:root {
  --main-theme-color: #6d3bff;
  --bg-0: #070812;
  --bg-1: #0b1020;
  --bg-2: #11162a;
  --surface-1: rgba(15, 20, 38, 0.88);
  --surface-2: rgba(22, 28, 52, 0.92);
  --surface-3: rgba(10, 14, 30, 0.96);
  --text-1: #f7f8ff;
  --text-2: #bfc7ea;
  --text-3: #8e97bd;
  --neon-blue: #34b8ff;
  --neon-purple: #7a4dff;
  --neon-pink: #ff4fd8;
  --focus-yellow: #ffd84d;
  --focus-yellow-2: #ffbf1a;
  --success: #28e38a;
  --danger: #ff5f7a;
  --border-soft: rgba(122, 77, 255, 0.22);
  --border-strong: rgba(52, 184, 255, 0.45);
  --glow-blue: 0 0 0 1px rgba(52, 184, 255, 0.16), 0 0 18px rgba(52, 184, 255, 0.16);
  --glow-purple: 0 0 0 1px rgba(122, 77, 255, 0.18), 0 0 22px rgba(122, 77, 255, 0.18);
  --glow-yellow: 0 0 0 1px rgba(255, 216, 77, 0.22), 0 0 20px rgba(255, 216, 77, 0.18);
  --gradient-primary: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 52%, var(--neon-pink) 100%);
  --gradient-accent: linear-gradient(135deg, var(--focus-yellow) 0%, var(--focus-yellow-2) 100%);
  --gradient-dark: linear-gradient(180deg, rgba(12,16,31,.96) 0%, rgba(7,9,20,.98) 100%);
  --card-radius: 16px;
  --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --fast: .22s ease;
  --medium: .32s ease;
}

body,
.site-content-container,
.home-inner-container,
[data-container-background="general"],
[data-container-background="home"],
[data-container-background="slots"],
[data-container-background="arcade"],
[data-container-background="crash-game"],
[data-container-background="casino"],
[data-container-background="race"],
[data-container-background="others"],
[data-container-background="promotions"] {
  background:
    radial-gradient(circle at top left, rgba(122, 77, 255, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 79, 216, 0.14), transparent 28%),
    radial-gradient(circle at bottom center, rgba(52, 184, 255, 0.14), transparent 32%),
    var(--bg-0);
  color: var(--text-1);
}

body {
  background-attachment: fixed;
}

.topbar-container,
.site-header,
.announcement-outer-container,
.standard-form-content,
.modal-body,
.modal-footer,
.bonus-slider-modal .modal-body,
.bonus-slider-modal .modal-footer,
.promotion-item,
.promotion-item .modal-body,
.transactions-table.table,
.reporting-detail-popup .reporting-detail-popup-content,
.pending-transaction-detail-card,
.transaction-item,
.claim-item,
.promotion-side-menu,
.promotion-list,
.mobile-app-container .logo-container,
.provider-slide,
.standard-profile-bar,
.standard-side-menu,
.large-game-list-container .large-game-list-section,
.footer-featured-product-section .site-info-description,
.footer-banking-section .banking-footer-section,
.footer-banking-section .bank-list-container,
.footer-banking-section .banking-footer-section .bank-service-container .site-info-description {
  background: var(--gradient-dark);
  border: 1px solid var(--border-soft);
  box-shadow: var(--soft-shadow);
}

.topbar-container,
.site-header {
  background:
    linear-gradient(180deg, rgba(9, 12, 25, 0.95), rgba(9, 12, 25, 0.88));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

.topbar-sub-section .topbar-item,
.site-info-inner-container,
.footer-description-section .site-description,
.footer-sitemap-section .footer-links>li>a,
.footer-sitemap-section .contact-list>li a,
.footer-sitemap-section .social-media-list>li>a,
.message-table,
.transactions-table.table thead tr th,
.transactions-table.table tbody,
.pending-transaction-detail-container .secondary,
.resolved-transaction-popup .secondary,
.transaction-item .info-section .details .secondary {
  color: var(--text-2);
}

.top-menu>li,
.game-list .game-name,
.game-list .game-player h5,
.game-description-container .game-title,
.game-description-container .game-description,
.profile-container .section-heading,
.register-done-container>h2,
.copyright-info-container .copyright,
.footer-description-section h4,
.footer-sitemap-section h4,
.footer-featured-product-section .site-info-description h4,
.footer-banking-section .banking-footer-section .bank-service-container .site-info-description h4,
.message-detail-title,
.pending-transaction-detail-container .primary,
.resolved-transaction-popup .primary,
.transaction-item .info-section .details .primary,
.claim-info-modal h4,
.confirmation-message-modal h4.modal-title {
  color: var(--text-1);
}

.top-menu>li[data-active="true"],
.top-menu>li:hover,
.topbar-sub-section .topbar-item a:hover,
.topbar-sub-section .topbar-item .live-chat:hover,
.contact-us-list li a,
.contact-us-list li a:hover,
.standard-form-title,
.info-center-container h2,
.standard-nav-bar .nav-bar-title,
.promotion-side-menu>h5,
.standard-profile-bar .username-field .username,
.standard-profile-bar .balance-field .balance,
.user-info .balance>span,
.deposit-container .formatted-balance,
.withdrawal-container .formatted-balance,
.deposit-summary-container .deposit-summary-header .summary-transfer-amount,
.withdrawal-summary-container .withdrawal-summary-header .summary-transfer-amount,
.replied-message,
.standard-content-info h2,
.claim-item .claim-details strong,
.claim-item .claim-title .free-spin-note {
  color: var(--focus-yellow);
}

.modal-header,
.confirmation-message-modal .modal-header {
  background: var(--gradient-primary);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}

.bonus-slider-modal .activation-button,
.claim-item .claim-button,
.claim-item .activation-button,
.claim-item .cancellation-button,
.claim-item .expiration-button,
.popular-game-title-container a,
.promotion-item .click-for-more-info-button,
.promotion-item-details .click-for-get-promo-button,
.register-done-container .btn-deposit,
.play-now,
.standard-button-group .btn-primary,
.standard-reporting-control-group .btn-primary,
.deposit-container .reveal-bank-account-button,
.copy-input-button-field .copy-input-button,
[data-payment-gateway] .download-qr-button,
.notification-tabs .notification-tab-item[data-active="true"],
.standard-nav-bar a[data-active="true"],
.standard-nav-bar a:not([data-active="true"]):hover,
.standard-side-menu a[data-active="true"],
.standard-side-menu a:not([data-active="true"]):hover,
.payment-method-selection input[type="radio"]:checked+label,
.login-panel .register-button,
.modal-footer .btn-primary,
.transaction-item .download-qr-btn,
.loyalty-reward-container .loyalty-reward-button,
.notification-popup-body .notification-footer,
.popup-modal [data-popup="maintenance"] p span {
  background: var(--gradient-primary);
  color: #fff;
  border: 0;
  box-shadow: var(--glow-purple);
}

.bonus-slider-modal .activation-button:hover,
.claim-item .claim-button:hover,
.claim-item .activation-button:hover,
.claim-item .cancellation-button:hover,
.claim-item .expiration-button:hover,
.popular-game-title-container a:hover,
.promotion-item .click-for-more-info-button:hover,
.promotion-item-details .click-for-get-promo-button:hover,
.register-done-container .btn-deposit:hover,
.play-now:hover,
.standard-button-group .btn-primary:hover,
.standard-reporting-control-group .btn-primary:hover,
.deposit-container .reveal-bank-account-button:hover,
.copy-input-button-field .copy-input-button:hover,
[data-payment-gateway] .download-qr-button:hover,
.login-panel .register-button:hover,
.modal-footer .btn-primary:hover,
.transaction-item .download-qr-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.free-play,
.login-panel .login-button,
.profile-container .mobile-info-button,
.request-otp-button,
.contact-verification-link,
.set-as-default-button,
.claim-item .close-button,
.standard-outline-button.standard-outline-button,
.complaint-container .btn-appeal {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-1);
}

.free-play:hover,
.login-panel .login-button:hover,
.profile-container .mobile-info-button:hover,
.request-otp-button:hover,
.contact-verification-link:hover,
.set-as-default-button:hover,
.standard-outline-button.standard-outline-button:hover,
.complaint-container .btn-appeal:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.login-panel input[type=text],
.login-panel input[type=password],
.standard-inline-form-group .form-control,
.standard-form-content .form-control,
.mobile-app-container .mobile-app-select,
.appeal-form textarea.form-control,
.rating-review-modal textarea.form-control,
.standard-reporting-control-group>input,
.games-list-container .filter-section,
.games-list-container .filter-section input[type=text],
.bonus-controls-field .bonus-amount,
.standard-inline-form-group .form-control[disabled],
.standard-inline-form-group .form-control[readonly] {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-1);
  box-shadow: none;
}

.standard-inline-form-group .form-control:focus,
.standard-form-content .form-control:focus,
.games-list-container .filter-section input[type=text]:focus,
.login-panel input[type=text]:focus,
.login-panel input[type=password]:focus,
.standard-reporting-control-group>input:focus {
  border-color: rgba(52, 184, 255, 0.42);
  box-shadow: var(--glow-blue);
  outline: none;
}

.standard-form-note,
.claim-info-modal .alert-container,
.payment-account-creation-remarks,
.modal-body .pending-transaction-summary-container,
.remarks-container,
.notification-list .notification-item[data-seen="false"],
.register-done-container .register-verification-done,
.update-verification-note,
.pending-transactions-container .pending-transactions-item .pending-transaction-remarks-container {
  background: linear-gradient(180deg, rgba(122,77,255,.14), rgba(52,184,255,.08));
  border: 1px solid rgba(122,77,255,.22);
  color: var(--text-1);
}

.standard-form-note span,
.standard-form-note a,
.register-done-container .register-verification-done .info,
.register-done-container .register-verification-done a,
.simple-form-note,
.referral-verification-container .standard-form-note,
.standard-form-note.with-icon>div:last-child p,
.referral-features .referral-features-item .feature-info p,
.pending-verification-container p,
.pending-verification-container .icon-container,
.remarks-container i {
  color: var(--focus-yellow);
}

.claim-item,
.promotion-item,
.pending-transactions-container .pending-transactions-item,
.pending-transaction-detail-card,
.transaction-item,
.game-list .game-item,
.large-game-list li,
.top-menu .games-container>li,
.footer-featured-product-section .site-info-description,
.footer-banking-section .banking-footer-section {
  border-radius: var(--card-radius);
  overflow: hidden;
}

.game-list .game-item,
.top-menu .games-container>li,
.large-game-list li,
.provider-slide,
.promotion-item,
.claim-item,
.transaction-item,
.pending-transaction-detail-card,
.standard-form-content,
.mobile-app-container .logo-container,
.footer-featured-product-section .site-info-description,
.footer-banking-section .banking-footer-section {
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), background-color var(--fast);
}

.game-list .wrapper-container:hover,
.top-menu .games-container>li:hover,
.large-game-list li:hover,
.provider-slide:hover,
.promotion-item:hover,
.claim-item:hover,
.transaction-item:hover,
.pending-transaction-detail-card:hover,
.footer-featured-product-section .site-info-description:hover,
.footer-banking-section .banking-footer-section:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 216, 77, .24);
  box-shadow: 0 16px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,216,77,.08);
}

.game-list .provider-name,
.about-us-container h5[data-title="safe-and-secure-gaming-environment"],
.about-us-container h5[data-title="customer-experience"],
.how-it-works-container .how-it-works-section .how-it-works-section-title,
.introjs-tooltiptext .subtitle,
.introjs-nextbutton.introjs-nextbutton,
.introjs-nextbutton.introjs-nextbutton:focus,
.introjs-skipbutton.introjs-skipbutton,
.large-game-list li a.game-info,
.notification-list .notification-item .notification-play-button,
.floating-action-button .floating-action-button-item {
  color: #07111f;
  background: var(--gradient-accent);
  border-color: rgba(255, 216, 77, .35);
}

.about-us-container h5[data-title="fast-and-secure-payments"],
.about-us-container h5[data-title="sky-is-not-the-limit"],
.benefit-container h2,
.otp-popup .otp-popup-content .resend-button,
.mobile-app-container .title-container,
.promotion-side-menu>a[data-active="true"],
.promotion-side-menu>a:hover {
  color: var(--neon-pink);
}

.jackpot-container,
.home-progressive-jackpot .jackpot-container {
  background: linear-gradient(180deg, rgba(255,216,77,.95) 0%, rgba(255,143,32,.92) 100%);
  color: #101114;
  box-shadow: var(--glow-yellow), 0 10px 24px rgba(0,0,0,.24);
}

.home-progressive-jackpot .inner-container,
.large-game-list img,
.top-menu .games-container>li>a img {
  background: linear-gradient(180deg, rgba(52,184,255,.28) 0%, rgba(122,77,255,.18) 100%);
}

.home-progressive-jackpot .border-container,
.home-progressive-jackpot .jackpot-border-container,
.jackpot-border-container,
.bank-info-container .carousel-indicators .active,
.carousel-indicators .active,
.carousel-indicators .slick-active,
.resolved-transactions-carousel .carousel-indicators .active,
.resolved-transactions-carousel .carousel-indicators .slick-active,
.otp-input,
.otp-fake-inputs div.filled,
.otp-fake-inputs div.focused {
  border-color: var(--focus-yellow);
  background-color: var(--focus-yellow);
}

.popover,
.bonus-selection-container,
.bonus-selection-list .bonus-selection-card.selected,
.modal-content:has(.resolved-transaction-popup),
.notification-popup-body .notification-popup-title,
.notification-popup-body .notification-tabs .notification-tab-item,
.notification-popup-body .notification-tabs .notification-tab-item[data-active="true"] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-1);
}

.large-game-list .link-container,
.game-list .link-container,
.arcade-game-list,
.crash-game-game-list,
.user-info .dropdown-menu.vendor-balances-container,
.top-menu .game-list-container {
  background: rgba(4, 7, 18, 0.86);
  backdrop-filter: blur(8px);
}

.game-list-title,
.popular-game-title-container,
.large-game-list-container,
.game-list-title>div,
.announcement-container>[data-section="announcements"],
.search-header .search-title {
  background-color: transparent;
}

.game-list-title {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,216,77,.28) 18%, rgba(255,79,216,.28) 50%, rgba(52,184,255,.28) 82%, transparent 100%);
}

.game-list-title>div,
.popular-game-title-container,
.info-center-container h3,
.standard-form-sub-title,
.loyalty-container .standard-form-title,
.complaint-container .standard-form-title,
.complaint-container .complaint-section-header {
  border-color: rgba(255,255,255,.08);
}

.progressbar {
  background: rgba(255,255,255,.12) !important;
}

.proggress {
  background: var(--gradient-accent) !important;
}

.unread-announcements-popup,
.unread-announcements-popup:before {
  border-color: var(--focus-yellow);
}

.unread-announcements-popup:before {
  border-bottom-color: var(--focus-yellow);
}

.footer-sitemap-section .contact-list>li a i,
.footer-sitemap-section .social-media-list>li a i,
.nav-btn {
  background: rgba(255,255,255,.06);
}

.nav-btn:hover {
  background: rgba(255,255,255,.12);
}

/* ringan: hanya 2 animasi utama */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(122,77,255,.18), 0 0 14px rgba(122,77,255,.12); }
  50% { box-shadow: 0 0 0 1px rgba(255,79,216,.24), 0 0 20px rgba(52,184,255,.16); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.jackpot-container,
.home-progressive-jackpot .jackpot-container,
.notification-popup-body .notification-footer,
.modal-header,
.claim-item .claim-button,
.play-now,
.login-panel .register-button {
  animation: neonPulse 4s ease-in-out infinite;
}

.floating-action-button .floating-action-button-item,
.provider-slide>i,
.carousel-indicators .active,
.resolved-transactions-carousel .carousel-indicators .active {
  animation: floatSoft 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  :root {
    --card-radius: 12px;
  }

  .game-list .wrapper-container:hover,
  .top-menu .games-container>li:hover,
  .large-game-list li:hover,
  .provider-slide:hover,
  .promotion-item:hover,
  .claim-item:hover,
  .transaction-item:hover,
  .pending-transaction-detail-card:hover {
    transform: none;
  }
}