/* =========================================
   DRAGON222 — Dark Gold (modern)
   theme.css  ·  visual layer
   ========================================= */

:root {
  --c-bg: #0e0e0e;
  --c-bg-2: #171717;
  --c-bg-3: #1f1f1f;
  --c-gold: #d4af37;
  --c-gold-2: #f5d76e;
  --c-text: #ffffff;
  --c-muted: #bdbdbd;
  --c-ink: #111111;
  --c-line: rgba(212, 175, 55, 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(212, 175, 55, 0.22);
  --c-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 22%), linear-gradient(180deg, #6b151c 0%, #3a0a0f 72%, #2a070b 100%);
  --c-bar-mid: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 20%), linear-gradient(180deg, #541218 0%, #2e0b0f 70%, #1c0709 100%);
  --c-bar-dim: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 18%), linear-gradient(180deg, #3d1014 0%, #22080b 70%, #140506 100%);
  --c-bar-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 210, 210, 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(212, 175, 55, 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 #d4af37;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 3px 0 #1a0406,
    inset 0 1px 0 rgba(255, 210, 210, 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(212, 175, 55, 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(212, 175, 55, 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(255, 210, 210, 0.14), inset 0 -2px 0 #d4af37;
}

.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(255, 210, 210, 0.14), inset 0 -2px 0 #d4af37;
}

/* ----- 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(212, 175, 55, 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; }
}