/* =========================================

   GENDUT188 — Dark Electric Blue (modern)

   theme.css  ·  visual layer

   ========================================= */

:root {

  --c-bg: #0e0e0e;

  --c-bg-2: #171717;

  --c-bg-3: #1f1f1f;

  --c-gold: #168aff; /* primary electric blue (legacy variable name) */

  --c-gold-2: #58c8ff; /* bright blue on hover */

  --c-text: #ffffff;

  --c-muted: #bdbdbd;

  --c-ink: #111111;

  --c-line: rgba(48, 144, 255, 0.38);

  --c-radius: 10px;

  --c-radius-sm: 8px;

  --c-radius-pill: 999px;

  --c-ease: 0.18s ease;

  --c-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --c-glow: 0 6px 18px rgba(41, 153, 255, 0.27);

  --c-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 22%), linear-gradient(180deg, #104a94 0%, #092958 72%, #061b39 100%);

  --c-bar-mid: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 20%), linear-gradient(180deg, #0d3e7d 0%, #08244b 70%, #05162f 100%);

  --c-bar-dim: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 18%), linear-gradient(180deg, #0c315e 0%, #061c3a 70%, #040f22 100%);

  --c-bar-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(206, 231, 255, 0.16), inset 0 -8px 14px rgba(0, 0, 0, 0.22);

}

html,

body {

  color: var(--c-text);

  background:

    radial-gradient(1200px 480px at 12% -8%, rgba(41, 153, 255, 0.08), transparent 55%),

    var(--c-bg);

}

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4,

.sports-platform-title,

.modal-title {

  color: var(--c-gold);

  letter-spacing: 0.02em;

  text-shadow: none;

}

.site-info h3,

.site-info h4,

.site-info h5,

.footer-section-title,

.provider-container > h5 {

  color: #e6e6e6;

}

p,

.site-info-container p,

.bank-list p,

.site-description p {

  color: var(--c-text);

}

a {

  color: var(--c-gold);

  font-weight: 400;

  transition: color var(--c-ease);

}

a:hover,

a:focus {

  color: var(--c-gold-2);

  text-decoration: none;

}

/* ----- Header ----- */

.topbar-container {

  background: rgba(14, 14, 14, 0.92);

  border-bottom: 1px solid var(--c-line);

  backdrop-filter: blur(8px);

}

.site-header {

  background: var(--c-bar);

  border-bottom: 2px solid #168aff;

  box-shadow:

    0 14px 36px rgba(0, 0, 0, 0.55),

    0 3px 0 #04152c,

    inset 0 1px 0 rgba(206, 231, 255, 0.16),

    inset 0 -10px 18px rgba(0, 0, 0, 0.22);

}

.top-menu > li > a {

  color: var(--c-text);

  font-weight: 600;

  background: transparent;

  border-radius: var(--c-radius-sm);

  transition: color var(--c-ease), background var(--c-ease), box-shadow var(--c-ease);

}

.top-menu > li > a:hover,

.top-menu > li[data-active="true"] > a {

  color: var(--c-gold);

  background: rgba(41, 153, 255, 0.08);

  box-shadow: inset 0 -2px 0 var(--c-gold);

}

.top-menu > li > a > .top-menu-icon,

.top-menu > li > a > img.top-menu-icon {

  display: block;

  width: 28px;

  height: 28px;

  object-fit: contain;

  filter: none;

}

/* ----- Menus / panels ----- */

.standard-side-menu,

.standard-side-menu .menu-section,

.messaging-side-menu,

.language-selector,

.dropdown-menu {

  background: var(--c-bg-2) !important;

  border: 1px solid var(--c-line) !important;

  border-radius: var(--c-radius);

  box-shadow: var(--c-shadow);

}

.standard-side-menu a,

.standard-side-menu-group-label {

  background: transparent;

  color: var(--c-text);

  border-left: 3px solid transparent;

  border-radius: 6px;

}

.standard-side-menu a[data-active="true"],

.standard-side-menu a:hover,

.standard-side-menu .menu-section a:hover,

.standard-side-menu .menu-section a[data-active="true"],

.messaging-side-menu [data-active="true"] a,

.messaging-side-menu a:hover,

.language-selector li:hover {

  background: rgba(41, 153, 255, 0.12) !important;

  color: var(--c-gold) !important;

  border-color: var(--c-gold);

}

.panel,

.panel-default > .panel-heading,

.standard-form-container,

.standard-form-content,

.info-center-content,

.promotions-container,

.promotion-list,

.slots-games-container,

.casino-games-container,

.race-games-container,

.arcade-games-container,

.crash-game-games-container,

.large-game-list-container,

.provider-list-container {

  background: var(--c-bg-2) !important;

  border-color: var(--c-line) !important;

  border-radius: var(--c-radius);

  box-shadow: var(--c-shadow);

}

.info-center-title,

.standard-form-title,

.home-game-list-container .container-title span {

  color: var(--c-gold) !important;

  background: var(--c-bg-3) !important;

  text-shadow: none;

  letter-spacing: 0.04em;

  box-shadow: inset 0 -2px 0 var(--c-gold);

}

.popular-game-title-container .container-title span {

  color: #fff !important;

  background: var(--c-bar-mid) !important;

  text-shadow: none;

  letter-spacing: 0.04em;

  box-shadow: inset 0 1px 0 rgba(206, 231, 255, 0.14), inset 0 -2px 0 #168aff;

}

.popular-games [data-section="left"] .section-title {

  color: #ffd400 !important;

  background: var(--c-bar-dim) !important;

  text-shadow: none;

  letter-spacing: 0.04em;

  box-shadow: inset 0 1px 0 rgba(206, 231, 255, 0.14), inset 0 -2px 0 #168aff;

}

/* ----- Buttons ----- */

.standard-button-group .btn-primary,

.messaging-side-menu .support-ticket > a,

.deposit-container .reveal-bank-account-button,

.play-now,

.login-panel .register-button,

.modal-footer .btn-primary,

.download-apk .btn,

.promotion-item .click-for-get-promo-button,

[data-payment-gateway] .download-qr-button,

.register-button,

.btn-primary,

.telegram-btn,

.download-apk-btn,

.live-chat {

  color: var(--c-ink) !important;

  border: 1px solid var(--c-gold) !important;

  background: var(--c-gold) !important;

  background-image: none !important;

  border-radius: var(--c-radius-pill);

  box-shadow: var(--c-glow);

  font-weight: 700;

  animation: none !important;

  transition: background var(--c-ease), border-color var(--c-ease), transform var(--c-ease), box-shadow var(--c-ease);

}

.standard-button-group .btn-primary:hover,

.play-now:hover,

.login-panel .register-button:hover,

.register-button:hover,

.btn-primary:hover,

.telegram-btn:hover,

.download-apk-btn:hover,

.live-chat:hover {

  background: var(--c-gold-2) !important;

  background-image: none !important;

  border-color: var(--c-gold-2) !important;

  color: var(--c-ink) !important;

  transform: translateY(-1px);

  filter: none;

}

.free-play,

.login-panel .login-button,

.login-button,

.modal-btn.blank,

.confirmation-message-modal .confirm-btn,

.btn-secondary {

  color: var(--c-gold) !important;

  background: transparent !important;

  background-image: none !important;

  border: 1px solid var(--c-gold) !important;

  border-radius: var(--c-radius-pill);

  box-shadow: none !important;

  transition: background var(--c-ease), color var(--c-ease);

}

.free-play:hover,

.login-panel .login-button:hover,

.login-button:hover {

  background: var(--c-gold) !important;

  color: var(--c-ink) !important;

  border-color: var(--c-gold) !important;

}

/* ----- Forms ----- */

.form-control,

.login-panel input[type="text"],

.login-panel input[type="password"],

input[type="text"],

input[type="password"],

input[type="email"],

select,

textarea {

  background: var(--c-bg) !important;

  color: var(--c-text) !important;

  border: 1px solid var(--c-line) !important;

  border-radius: var(--c-radius-sm) !important;

}

.form-control:focus,

input:focus,

select:focus,

textarea:focus {

  border-color: var(--c-gold) !important;

  box-shadow: 0 0 0 3px rgba(41, 153, 255, 0.18) !important;

  outline: none;

}

/* ----- Game cards ----- */

.game-list .game-item,

.large-game-list li,

.provider-slide .slide-item {

  background: var(--c-bg);

  border: 1px solid var(--c-line);

  border-radius: var(--c-radius);

  transition: transform var(--c-ease), border-color var(--c-ease), box-shadow var(--c-ease);

}

.game-list .game-item:hover,

.large-game-list li:hover {

  border-color: var(--c-gold);

  transform: translateY(-3px);

  box-shadow: var(--c-glow);

}

.game-list .game-name,

.slots-games-container .game-name,

.casino-games-container .game-name,

.race-games-container .game-name {

  color: var(--c-gold);

  background: var(--c-bg-2);

  border-top: 1px solid var(--c-line);

}

.slots-games-container .category-filter-link.active,

.slots-games-container .category-filter-link:hover,

.casino-games-container .category-filter-link.active,

.casino-games-container .category-filter-link:hover,

.race-games-container .category-filter-link.active,

.race-games-container .category-filter-link:hover,

.arcade-games-container .category-filter-link.active,

.arcade-games-container .category-filter-link:hover,

.crash-game-games-container .category-filter-link.active,

.crash-game-games-container .category-filter-link:hover {

  color: var(--c-ink) !important;

  background: var(--c-gold) !important;

  border-radius: var(--c-radius-pill);

  box-shadow: none;

}

.bank-info,

.deposit-container .bank-info,

.withdrawal-container .bank-info,

.bank-info-block {

  background: var(--c-bg-3);

  border: 1px solid var(--c-line);

  border-radius: var(--c-radius);

  color: var(--c-text);

}

.deposit-container .formatted-balance,

.deposit-amount-container .real-deposit-amount,

.withdrawal-container .total-balance,

.winner-amount,

.user-info .wallet-container .balance,

.user-info .wallet-container .locked-balance {

  color: var(--c-gold);

  text-shadow: none;

}

/* ----- Modals / ticker ----- */

.modal-content,

.bonus-slider-modal .modal-content {

  background: var(--c-bg-2) !important;

  border: 1px solid var(--c-line) !important;

  border-radius: 14px !important;

  box-shadow: var(--c-shadow);

}

.modal-header {

  border-bottom: 1px solid var(--c-line) !important;

  background: var(--c-bg-2);

}

.modal-content h4,

.claim-info-modal h4,

.download-popup-modal .modal-header .modal-title,

.close {

  color: var(--c-gold) !important;

}

.announcement-container {

  background: var(--c-bg-2) !important;

  border: 1px solid var(--c-line) !important;

  border-radius: var(--c-radius);

}

.announcement-container > [data-section="announcements"] {

  background: var(--c-bg) !important;

  border-radius: 6px;

}

.announcement-container .announcement-list li,

.notice ul li {

  color: var(--c-text) !important;

}

.jackpot-winners {

  background: var(--c-bg-2) !important;

  border: 1px solid var(--c-line);

  border-radius: var(--c-radius);

}

.jackpot-winners .winners-ticker-container {

  background: var(--c-bg) !important;

  border: 1px solid var(--c-line);

  border-radius: var(--c-radius-sm);

}

.tickercontainer {

  background: var(--c-bg-2);

  border: 1px solid var(--c-line);

  border-radius: var(--c-radius-sm);

}

.banner,

.banner .slick-slide img {

  background: var(--c-bg-2) !important;

}

.banner .slick-slide img,

.banner-carousel img,

.banner picture img {

  filter: none;

  border-radius: var(--c-radius);

}

.banner .carousel-indicators .active,

.banner .carousel-indicators li.active {

  background: var(--c-gold) !important;

  border-color: var(--c-gold) !important;

}

.site-footer {

  background: var(--c-bg);

  border-top: 1px solid var(--c-line);

}

.footer-links > li > a,

.site-footer a {

  color: var(--c-muted);

}

.footer-links > li > a:hover,

.site-footer a:hover {

  color: var(--c-gold);

}

.claim-item,

.pending-transactions-container .pending-transactions-item,

.remarks-container,

.promotion-item {

  background: var(--c-bg-3);

  border-color: var(--c-line);

  border-radius: var(--c-radius);

}

.claim-item .claim-button,

.claim-item .activation-button {

  background: var(--c-gold);

  color: var(--c-ink);

  border-radius: var(--c-radius-pill);

}

.provider-container {

  border-radius: 12px;

}

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: var(--c-bg); }

::-webkit-scrollbar-thumb {

  background: var(--c-gold);

  border-radius: var(--c-radius-pill);

}

.play-now,

.login-panel .register-button,

.standard-button-group .btn-primary,

.register-button {

  animation: none;

}

.logo img { filter: none; }

::selection {

  background: var(--c-gold);

  color: var(--c-ink);

}

@media (max-width: 768px) {

  .top-menu > li > a { font-size: 12px; }

  .standard-side-menu a,

  .game-list .game-name { font-size: 12px; }

}

@media (prefers-reduced-motion: reduce) {

  * { animation: none !important; transition: none !important; }

}