/* ============================================================
   PRIME — variação "DT300 Neon" (tema próprio do dt300.com)
   ------------------------------------------------------------
   Carregado por index.php junto de base.css e fx.css quando
   temas.valor_cor = 'DT300Neon' (registro em themes/prime/prime.php).
   Tema-base do bundle: PhantomBlue (estrutura). Esta camada troca as
   rampas de cor (tokens --ep-*) e acrescenta acabamento: glass no
   header/tabbar, glow dourado/magenta, raios 14–18px, tipografia
   Poppins, hover/press nos cards, scrollbar e loading estilizados.
   Paleta: fundo roxo-escuro/preto, dourado #F7B928, magenta #E0308F.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

html.prime-dt300neon {
  /* ---------- TIPOGRAFIA ---------- */
  --ep-default-font-family: "Poppins", "Prompt", -apple-system, "Roboto", sans-serif;
  --ep-font-weight-medium: 600;
  --ep-font-weight-bold: 700;

  /* ---------- RAIOS (14–18px) ---------- */
  --ep-border-radius-m: .5rem;
  --ep-border-radius-l: .75rem;
  --ep-border-radius-xl: .875rem;
  --ep-border-radius-surface-small: .875rem;
  --ep-border-radius-surface-default: 1rem;
  --ep-border-radius-surface-large: 1.125rem;

  /* ---------- PRIMÁRIA: DOURADO (CTA, abas ativas, seleção) ---------- */
  --ep-primary-primary-900: rgb(92, 58, 4);
  --ep-primary-primary-800: rgb(128, 82, 6);
  --ep-primary-primary-700: rgb(170, 112, 9);
  --ep-primary-primary-600: rgb(214, 148, 15);
  --ep-primary-primary-500: rgb(247, 185, 40);
  --ep-primary-primary-400: rgb(250, 200, 80);
  --ep-primary-primary-300: rgb(253, 216, 120);
  --ep-primary-primary-200: rgb(254, 231, 165);
  --ep-primary-primary-100: rgb(255, 243, 205);
  --ep-primary-primary-Opacity: rgba(247, 185, 40, .40);

  /* ---------- SECUNDÁRIA: MAGENTA NEON (sobrepõe o ouro do base.css) ---------- */
  --ep-secondary-secondary-900: rgb(78, 12, 48);
  --ep-secondary-secondary-800: rgb(110, 18, 68);
  --ep-secondary-secondary-700: rgb(150, 26, 94);
  --ep-secondary-secondary-600: rgb(190, 36, 120);
  --ep-secondary-secondary-500: rgb(224, 48, 143);
  --ep-secondary-secondary-400: rgb(236, 90, 170);
  --ep-secondary-secondary-300: rgb(244, 130, 194);
  --ep-secondary-secondary-200: rgb(249, 175, 216);
  --ep-secondary-secondary-100: rgb(253, 218, 236);
  --ep-secondary-secondary-Opacity: rgba(224, 48, 143, .40);

  /* ---------- TERCIÁRIA: VIOLETA ELÉTRICO ---------- */
  --ep-tertiary-tertiary-900: rgb(52, 18, 96);
  --ep-tertiary-tertiary-800: rgb(72, 26, 132);
  --ep-tertiary-tertiary-700: rgb(96, 36, 172);
  --ep-tertiary-tertiary-600: rgb(124, 52, 214);
  --ep-tertiary-tertiary-500: rgb(150, 80, 240);
  --ep-tertiary-tertiary-400: rgb(176, 120, 248);
  --ep-tertiary-tertiary-300: rgb(200, 160, 252);
  --ep-tertiary-tertiary-200: rgb(222, 198, 254);
  --ep-tertiary-tertiary-100: rgb(240, 228, 255);
  --ep-tertiary-tertiary-Opacity: rgba(150, 80, 240, .40);

  /* ---------- INVERSE: MAGENTA (glow secundário, ícones de marca) ---------- */
  --ep-inverse-inverse-900: rgb(78, 12, 48);
  --ep-inverse-inverse-800: rgb(110, 18, 68);
  --ep-inverse-inverse-700: rgb(150, 26, 94);
  --ep-inverse-inverse-600: rgb(190, 36, 120);
  --ep-inverse-inverse-500: rgb(224, 48, 143);
  --ep-inverse-inverse-400: rgb(236, 90, 170);
  --ep-inverse-inverse-300: rgb(244, 130, 194);
  --ep-inverse-inverse-200: rgb(249, 175, 216);
  --ep-inverse-inverse-100: rgb(253, 218, 236);
  --ep-inverse-inverse-Opacity: rgba(224, 48, 143, .40);

  /* ---------- NEUTRA: ROXO-ESCURO / PRETO ----------
     L01 barra inferior · L02 corpo · L03 cabeçalho · L04 card
     L05 divisor · L06–L08 texto fraco · L09–L10 texto */
  --ep-neutral-gray-gray-L01: rgb(12, 6, 22);
  --ep-neutral-gray-gray-L02: rgb(20, 10, 36);
  --ep-neutral-gray-gray-L03: rgb(26, 12, 46);
  --ep-neutral-gray-gray-L04: rgb(38, 20, 66);
  --ep-neutral-gray-gray-L05: rgb(56, 32, 92);
  --ep-neutral-gray-gray-L06: rgb(112, 86, 150);
  --ep-neutral-gray-gray-L07: rgb(146, 120, 182);
  --ep-neutral-gray-gray-L08: rgb(180, 158, 210);
  --ep-neutral-gray-gray-L09: rgb(222, 210, 238);
  --ep-neutral-gray-gray-L10: rgb(248, 242, 255);
  --ep-neutral-gary-gary-L01: rgb(12, 6, 22);
  --ep-neutral-gary-gary-L02: rgb(20, 10, 36);
  --ep-neutral-gary-gary-L03: rgb(26, 12, 46);
  --ep-neutral-gary-gary-L04: rgb(38, 20, 66);
  --ep-neutral-gary-gary-L06: rgb(112, 86, 150);

  /* ---------- GRADIENTES ----------
     Entrar/Registro/CTA: dourado claro -> dourado profundo.
     Secundário: magenta. Terciário: violeta -> magenta. */
  --ep-color-background-fill-gradients-primary-a: rgb(255, 214, 92);
  --ep-color-background-fill-gradients-primary-b: rgb(222, 140, 10);
  --ep-color-background-fill-gradients-secondary-a: rgb(240, 96, 176);
  --ep-color-background-fill-gradients-secondary-b: rgb(168, 28, 108);
  --ep-color-background-fill-gradients-tertiary-a: rgb(124, 52, 214);
  --ep-color-background-fill-gradients-tertiary-b: rgb(224, 48, 143);
  --ep-color-background-fill-gradients-tertiary-weak-a: rgb(38, 20, 66);
  --ep-color-background-fill-gradients-tertiary-weak-b: rgb(72, 26, 132);
  --ep-color-background-fill-tips: rgb(224, 48, 143);
  --ep-color-background-fill-glow-secondary-opacity-40: rgba(224, 48, 143, .40);
  --ep-color-background-fill-glow-secondary-opacity-100: rgb(224, 48, 143);

  /* Texto sobre dourado precisa ser escuro */
  --ep-color-text-inverse: rgb(30, 14, 4);
  --ep-color-icon-inverse: rgb(30, 14, 4);
  --ep-color-text-inverse-disabled: rgba(30, 14, 4, .45);
  --ep-color-icon-inverse-disabled: rgba(30, 14, 4, .45);
  --ep-color-btn-level-2-text: rgb(255, 255, 255);
  --ep-color-text-navigation-default: rgba(255, 246, 229, .55);
  --ep-color-text-weak: rgba(255, 246, 229, .68);
  --ep-color-text-weaker: rgba(255, 246, 229, .45);

  /* Variáveis Ionic globais */
  --ion-font-family: var(--ep-default-font-family);
  --ion-background-color: rgb(20, 10, 36);
  --ion-toolbar-background: rgba(26, 12, 46, .82);
  --ion-tab-bar-background: rgba(18, 8, 34, .88);
  --ion-color-primary: rgb(247, 185, 40);
  --ion-color-primary-contrast: rgb(30, 14, 4);

  color-scheme: dark;
}

/* ============================================================
   FUNDO — gradiente profundo com "auroras" douradas/magenta
   ============================================================ */
html.prime-dt300neon body,
html.prime-dt300neon ion-app,
html.prime-dt300neon ion-content {
  --background: transparent;
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(224, 48, 143, .16), rgba(224, 48, 143, 0) 60%),
    radial-gradient(800px 480px at 100% 12%, rgba(247, 185, 40, .10), rgba(247, 185, 40, 0) 60%),
    linear-gradient(180deg, #1A0B2E 0%, #120720 55%, #0B0414 100%);
}
html.prime-dt300neon ion-content::part(background) { background: transparent; }
/* Os "blobs" desfocados do bundle (.main-page::before/::after, filter: blur ~90px)
   viram anéis duros em renderização por software; o brilho fica a cargo dos
   radial-gradients acima, que renderizam igual em qualquer GPU. */
html.prime-dt300neon .main-page::before,
html.prime-dt300neon .main-page::after { display: none !important; }

/* ============================================================
   HEADER — glassmorphism + linha dourada
   ============================================================ */
html.prime-dt300neon ion-header ion-toolbar {
  --background: rgba(26, 12, 46, .86);
  --border-width: 0 0 1px 0;
  --border-color: rgba(247, 185, 40, .22);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
html.prime-dt300neon ion-header { box-shadow: none; }
html.prime-dt300neon .logo-wrap ion-img.logo::part(image),
html.prime-dt300neon .logo-wrap .logo img {
  filter: drop-shadow(0 0 10px rgba(247, 185, 40, .35));
}

/* Botões Entrar / Registro do cabeçalho */
html.prime-dt300neon .btn-default,
html.prime-dt300neon .login .btn-default,
html.prime-dt300neon .register-btn-warper,
html.prime-dt300neon .register-btn-warper ion-button::part(native) {
  background: linear-gradient(135deg, #FFD65C 0%, #F7B928 45%, #DE8C0A 100%) !important;
  color: #1E0E04 !important;
  border-radius: 12px !important;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(247, 185, 40, .40), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: none;
}
html.prime-dt300neon .register-btn-warper,
html.prime-dt300neon .register {
  background: linear-gradient(135deg, #F468B8 0%, #E0308F 50%, #A81C6C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(224, 48, 143, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
}
html.prime-dt300neon .register-btn-warper .register,
html.prime-dt300neon .register-btn-warper ion-button,
html.prime-dt300neon .register-btn-warper ion-button::part(native) {
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
html.prime-dt300neon .btn-default .btn-text,
html.prime-dt300neon .btn-default span { color: #1E0E04 !important; }
/* "Entrar" é um ion-button.login: o fundo fica no ::part(native) */
html.prime-dt300neon ion-button.login,
html.prime-dt300neon ion-button.login::part(native) {
  --background: linear-gradient(135deg, #FFD65C 0%, #F7B928 45%, #DE8C0A 100%);
  --background-hover: linear-gradient(135deg, #FFE080 0%, #F7B928 45%, #DE8C0A 100%);
  --background-activated: #DE8C0A;
  --color: #1E0E04;
  --border-radius: 12px;
  background: linear-gradient(135deg, #FFD65C 0%, #F7B928 45%, #DE8C0A 100%) !important;
  color: #1E0E04 !important;
  border-radius: 12px !important;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(247, 185, 40, .40), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* Barra PWA "Baixe nosso APP" */
html.prime-dt300neon .pwa-header-wrap {
  background: linear-gradient(90deg, rgba(38, 20, 66, .96), rgba(26, 12, 46, .96)) !important;
  border-bottom: 1px solid rgba(224, 48, 143, .25);
}
html.prime-dt300neon .pwa-header-wrap .btn-default {
  background: linear-gradient(135deg, #FFD65C, #DE8C0A) !important;
}
html.prime-dt300neon .pwa-header-wrap .btn-default .btn-text { color: #1E0E04 !important; }

/* ============================================================
   TAB BAR INFERIOR — glass, ícone ativo destacado com glow
   ============================================================ */
html.prime-dt300neon ion-tab-bar,
html.prime-dt300neon ion-tabs ion-tab-bar {
  --background: transparent;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(100% - 62px), rgba(18, 8, 34, .92) calc(100% - 62px)) !important;
  border-top: 0;
}
html.prime-dt300neon ion-tab-bar::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px;
  background: rgba(18, 8, 34, .90);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(247, 185, 40, .20);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
  pointer-events: none;
  z-index: 0;
}
html.prime-dt300neon ion-tab-bar > * { position: relative; z-index: 1; }
html.prime-dt300neon .tab-btn .tab-label,
html.prime-dt300neon .tab-btn ion-label {
  font-weight: 600;
  letter-spacing: .1px;
}
html.prime-dt300neon .tab-btn.tab-selected .tab-label,
html.prime-dt300neon .tab-btn[aria-selected="true"] .tab-label,
html.prime-dt300neon .tab-btn.active .tab-label {
  color: #F7B928 !important;
  text-shadow: 0 0 10px rgba(247, 185, 40, .55);
}
html.prime-dt300neon .tab-btn.tab-selected .tab-img,
html.prime-dt300neon .tab-btn.active .tab-img,
html.prime-dt300neon .tab-btn[aria-selected="true"] .tab-img {
  filter: drop-shadow(0 0 10px rgba(247, 185, 40, .65));
  transform: translateY(-2px) scale(1.06);
}
html.prime-dt300neon .tab-btn .tab-img { transition: transform .2s ease, filter .2s ease; }
html.prime-dt300neon .tab-btn:active .tab-img { transform: scale(.92); }
/* botão central (convidar/baú) com anel dourado */
html.prime-dt300neon .tab-btn.floating .tab-img,
html.prime-dt300neon .tab-btn .floating {
  filter: drop-shadow(0 0 14px rgba(247, 185, 40, .6));
}

/* ============================================================
   CARROSSEL / BANNERS
   ============================================================ */
html.prime-dt300neon .swiper-poster,
html.prime-dt300neon .poster-img,
html.prime-dt300neon .swiper-slide .type-img,
html.prime-dt300neon .activity-img,
html.prime-dt300neon .hot-img,
html.prime-dt300neon .social-img {
  border-radius: 16px !important;
  overflow: hidden;
}
html.prime-dt300neon .swiper-slide.type-img,
html.prime-dt300neon .activity-box {
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
html.prime-dt300neon .swiper-pagination-bullet {
  background: rgba(255, 246, 229, .35);
  opacity: 1;
  width: 7px; height: 7px;
  transition: all .25s ease;
}
html.prime-dt300neon .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, #FFD65C, #F7B928);
  box-shadow: 0 0 10px rgba(247, 185, 40, .7);
}

/* Faixa de avisos (megafone) */
html.prime-dt300neon .marquee-wrapper,
html.prime-dt300neon .megaphone-wrapper {
  background: rgba(38, 20, 66, .70) !important;
  border: 1px solid rgba(247, 185, 40, .18);
  border-radius: 999px !important;
}

/* ============================================================
   ABAS DE PROVEDORES (Popular / PG / SPRIBE …)
   ============================================================ */
html.prime-dt300neon ion-segment {
  --background: transparent;
  background: transparent;
}
html.prime-dt300neon ion-segment-button {
  --background: rgba(38, 20, 66, .62);
  --background-checked: linear-gradient(180deg, rgba(247, 185, 40, .22), rgba(224, 48, 143, .18));
  --border-radius: 16px;
  --indicator-color: transparent;
  --color: rgba(255, 246, 229, .72);
  --color-checked: #FFF6E5;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  margin: 0 3px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.prime-dt300neon ion-segment-button.segment-button-checked {
  border-color: rgba(247, 185, 40, .65);
  box-shadow: 0 0 18px rgba(247, 185, 40, .28), inset 0 0 0 1px rgba(247, 185, 40, .25);
  transform: translateY(-2px);
}
html.prime-dt300neon ion-segment-button.segment-button-checked .label,
html.prime-dt300neon ion-segment-button.segment-button-checked ion-label {
  color: #F7B928 !important;
  text-shadow: 0 0 10px rgba(247, 185, 40, .5);
}
html.prime-dt300neon ion-segment-button .sub-label { color: rgba(255, 246, 229, .55); }
html.prime-dt300neon ion-segment-button:active { transform: scale(.96); }
html.prime-dt300neon .platform-item-icon-wrapper,
html.prime-dt300neon .img-box {
  border-radius: 14px;
}
html.prime-dt300neon ion-segment-button.segment-button-checked .platform-item-icon,
html.prime-dt300neon ion-segment-button.segment-button-checked .img-box img {
  filter: drop-shadow(0 0 8px rgba(247, 185, 40, .55));
}

/* Barra de busca */
html.prime-dt300neon .search-container,
html.prime-dt300neon .search-box,
html.prime-dt300neon ion-searchbar {
  --background: rgba(38, 20, 66, .70);
  --border-radius: 999px;
  --color: #FFF6E5;
  --icon-color: #F7B928;
  --placeholder-color: rgba(255, 246, 229, .5);
  background: rgba(38, 20, 66, .70);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
}

/* ============================================================
   CARDS DE JOGOS — raio 16px, glow no hover, press
   ============================================================ */
html.prime-dt300neon .game-card {
  border-radius: 16px !important;
  background: rgb(38, 20, 66) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .05);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
html.prime-dt300neon .game-card .game-img,
html.prime-dt300neon .game-card .game-img img,
html.prime-dt300neon .game-card ion-img::part(image),
html.prime-dt300neon .game-card .img {
  border-radius: 16px 16px 0 0 !important;
  transition: transform .35s ease;
}
html.prime-dt300neon .game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55), 0 0 22px rgba(247, 185, 40, .35), 0 0 0 1px rgba(247, 185, 40, .55);
}
html.prime-dt300neon .game-card:hover .game-img img,
html.prime-dt300neon .game-card:hover ion-img::part(image) { transform: scale(1.05); }
html.prime-dt300neon .game-card:active { transform: scale(.97); }
html.prime-dt300neon .game-card .game-name {
  font-weight: 600;
  color: #FFF6E5;
}
html.prime-dt300neon .game-card .favorite,
html.prime-dt300neon .game-card .platform-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
/* Título de seção + "Todos" */
html.prime-dt300neon .onMore,
html.prime-dt300neon .card-container .onMore {
  background: rgba(247, 185, 40, .16) !important;
  border: 1px solid rgba(247, 185, 40, .45);
  border-radius: 999px !important;
  color: #F7B928 !important;
}

/* ============================================================
   BOTÕES GERAIS (Ionic)
   ============================================================ */
html.prime-dt300neon ion-button {
  --border-radius: 14px;
  --box-shadow: none;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
}
html.prime-dt300neon ion-button.button-solid:not([color]),
html.prime-dt300neon ion-button.primary::part(native),
html.prime-dt300neon ion-button[color="primary"]::part(native) {
  --background: linear-gradient(135deg, #FFD65C 0%, #F7B928 45%, #DE8C0A 100%);
  --background-hover: linear-gradient(135deg, #FFE184, #F7B928);
  --background-activated: linear-gradient(135deg, #E9A91E, #C97C08);
  --color: #1E0E04;
  box-shadow: 0 0 18px rgba(247, 185, 40, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.prime-dt300neon ion-button[fill="outline"] {
  --border-color: rgba(247, 185, 40, .7);
  --color: #F7B928;
}
html.prime-dt300neon ion-button[expand="block"],
html.prime-dt300neon ion-button[expand="full"] {
  border-radius: 14px;
  min-height: 46px;
}
html.prime-dt300neon .unset-btn,
html.prime-dt300neon .button-box {
  border-radius: 14px;
}

/* ============================================================
   MODAIS (login, registro, depósito, saque, VIP, perfil, histórico…)
   ============================================================ */
html.prime-dt300neon ion-modal {
  --background: rgba(26, 12, 46, .96);
  --border-radius: 18px;
  --box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(247, 185, 40, .22);
  --backdrop-opacity: .72;
}
html.prime-dt300neon ion-modal::part(content) {
  border-radius: 18px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html.prime-dt300neon ion-modal ion-header ion-toolbar {
  --background: transparent;
  --border-color: rgba(247, 185, 40, .18);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.prime-dt300neon ion-modal ion-content {
  --background: transparent;
  background: transparent;
}
html.prime-dt300neon ion-modal ion-title,
html.prime-dt300neon ion-modal .title {
  font-weight: 700;
  color: #FFF6E5;
}
html.prime-dt300neon ion-modal .close,
html.prime-dt300neon ion-modal .close-btn-bg {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}
html.prime-dt300neon ion-popover {
  --background: rgba(26, 12, 46, .97);
  --box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(247, 185, 40, .22);
}
html.prime-dt300neon ion-popover::part(content) { border-radius: 16px; }
html.prime-dt300neon ion-alert .alert-wrapper,
html.prime-dt300neon ion-action-sheet .action-sheet-group {
  background: rgb(26, 12, 46);
  border-radius: 16px;
}
html.prime-dt300neon ion-toast {
  --background: rgba(38, 20, 66, .96);
  --color: #FFF6E5;
  --border-radius: 14px;
  --box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(247,185,40,.3);
}

/* Campos de formulário */
html.prime-dt300neon ion-item,
html.prime-dt300neon ion-input,
html.prime-dt300neon ion-textarea,
html.prime-dt300neon ion-select,
html.prime-dt300neon .input-wrapper,
html.prime-dt300neon .ep-input,
html.prime-dt300neon input:not([type="checkbox"]):not([type="radio"]) {
  --background: rgba(20, 10, 36, .85);
  --border-radius: 14px;
  --border-color: rgba(255, 255, 255, .10);
  --highlight-color-focused: #F7B928;
  --color: #FFF6E5;
  --placeholder-color: rgba(255, 246, 229, .45);
  --padding-start: 14px;
  border-radius: 14px;
}
html.prime-dt300neon ion-item {
  --inner-border-width: 0;
  --border-width: 1px;
  --border-style: solid;
  margin-bottom: 4px;
}
html.prime-dt300neon ion-item.item-has-focus,
html.prime-dt300neon ion-item.ion-focused {
  --border-color: rgba(247, 185, 40, .75);
  box-shadow: 0 0 0 3px rgba(247, 185, 40, .16);
}
html.prime-dt300neon ion-checkbox {
  --checkbox-background-checked: #F7B928;
  --border-color-checked: #F7B928;
  --checkmark-color: #1E0E04;
  --border-radius: 6px;
}
html.prime-dt300neon ion-toggle {
  --track-background-checked: rgba(247, 185, 40, .55);
  --handle-background-checked: #F7B928;
}

/* Cards/superfícies genéricas (perfil, saldo, VIP, depósito) */
html.prime-dt300neon .card,
html.prime-dt300neon .card-wrapper,
html.prime-dt300neon .wrapper.item-image,
html.prime-dt300neon ion-card,
html.prime-dt300neon .content-box,
html.prime-dt300neon .balance-box,
html.prime-dt300neon .vip-card,
html.prime-dt300neon .amount-item,
html.prime-dt300neon .pay-item,
html.prime-dt300neon .list-item {
  border-radius: 16px;
}
html.prime-dt300neon ion-card {
  --background: rgba(38, 20, 66, .75);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .06);
}
html.prime-dt300neon .amount-item.active,
html.prime-dt300neon .amount-item.selected,
html.prime-dt300neon .pay-item.active,
html.prime-dt300neon .pay-item.selected,
html.prime-dt300neon .selected-item {
  border-color: #F7B928 !important;
  box-shadow: 0 0 14px rgba(247, 185, 40, .40);
}

/* Segmentos secundários (abas dentro de modais: Depósito/Saque, Histórico…) */
html.prime-dt300neon ion-modal ion-segment-button {
  --background: rgba(20, 10, 36, .6);
  --background-checked: linear-gradient(135deg, #FFD65C, #DE8C0A);
  --color-checked: #1E0E04;
  border-radius: 12px;
}
html.prime-dt300neon ion-modal ion-segment-button.segment-button-checked .label,
html.prime-dt300neon ion-modal ion-segment-button.segment-button-checked ion-label {
  color: #1E0E04 !important;
  text-shadow: none;
}

/* Etiquetas de valores (R$ +99, tags) */
html.prime-dt300neon .rewardTag,
html.prime-dt300neon .reward-amount {
  background: linear-gradient(90deg, #E0308F, #F468B8) !important;
  border-radius: 6px;
}
html.prime-dt300neon .merchantCy {
  background: linear-gradient(90deg, #DE8C0A, #F7B928) !important;
  color: #1E0E04 !important;
}
html.prime-dt300neon .red-point,
html.prime-dt300neon .badge { box-shadow: 0 0 8px rgba(224, 48, 143, .8); }

/* Menu lateral */
html.prime-dt300neon ion-menu {
  --background: rgba(20, 10, 36, .97);
}
html.prime-dt300neon .menu-content {
  background: rgba(20, 10, 36, .97);
  border-right: 1px solid rgba(247, 185, 40, .18);
}

/* Rodapé */
html.prime-dt300neon .footer,
html.prime-dt300neon ion-footer,
html.prime-dt300neon .footer-wrap {
  background: rgb(12, 6, 22);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Suporte flutuante */
html.prime-dt300neon .floating,
html.prime-dt300neon .service-btn {
  filter: drop-shadow(0 0 12px rgba(224, 48, 143, .55));
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
html.prime-dt300neon ::-webkit-scrollbar { width: 8px; height: 8px; }
html.prime-dt300neon ::-webkit-scrollbar-track { background: rgba(12, 6, 22, .8); }
html.prime-dt300neon ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F7B928, #E0308F);
  border-radius: 8px;
  border: 2px solid rgba(12, 6, 22, .8);
}
html.prime-dt300neon ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFD65C, #F468B8); }
html.prime-dt300neon * { scrollbar-color: #F7B928 rgba(12, 6, 22, .8); scrollbar-width: thin; }

/* ============================================================
   LOADING (splash e spinners)
   ============================================================ */
html.prime-dt300neon .fade-in-loading-main-tree,
html.prime-dt300neon .loading-wrap,
html.prime-dt300neon #loading,
html.prime-dt300neon .splash {
  background: radial-gradient(600px 400px at 50% 30%, rgba(224, 48, 143, .18), transparent 70%),
              linear-gradient(180deg, #1A0B2E, #0B0414) !important;
}
html.prime-dt300neon ion-spinner,
html.prime-dt300neon ion-loading ion-spinner {
  --color: #F7B928;
  color: #F7B928;
  filter: drop-shadow(0 0 8px rgba(247, 185, 40, .6));
}
html.prime-dt300neon ion-loading {
  --background: rgba(26, 12, 46, .96);
  --spinner-color: #F7B928;
}
html.prime-dt300neon ion-loading .loading-wrapper { border-radius: 16px; box-shadow: 0 0 0 1px rgba(247,185,40,.3), 0 12px 40px rgba(0,0,0,.6); }
html.prime-dt300neon ion-progress-bar {
  --progress-background: linear-gradient(90deg, #F7B928, #E0308F);
  --background: rgba(255, 255, 255, .10);
  border-radius: 999px;
}
html.prime-dt300neon ion-skeleton-text {
  --background: rgba(255, 255, 255, .06);
  --background-rgb: 255, 255, 255;
  border-radius: 12px;
}

/* ============================================================
   DESKTOP (≥ 1024px): moldura central do app + hover de cards
   ============================================================ */
@media (min-width: 1024px) {
  html.prime-dt300neon ion-app,
  html.prime-dt300neon .main-page {
    box-shadow: none;
  }
  html.prime-dt300neon .mx-auto.overflow-hidden,
  html.prime-dt300neon .main-content {
    box-shadow: 0 0 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(247, 185, 40, .10);
  }
}

/* ============================================================
   ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.prime-dt300neon .game-card,
  html.prime-dt300neon ion-segment-button,
  html.prime-dt300neon .tab-btn .tab-img { transition: none; }
}