/* ==========================================================================
   CROWNIXBET MOBILE APP UI
   ========================================================================== */

/* Responsive baseline: every element sizes itself including padding/border,
   and the page can never scroll horizontally on any phone width. This is
   what makes the layout adapt to each device instead of assuming one
   reference screen size. */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --bg-main: #0b0a1a;
  --bg-panel: #16132b;
  --bg-card: #201a3e;
  --bg-card-hover: #2a2250;
  --bg-header: #131024;

  --text-main: #ffffff;
  --text-muted: #8c89a7;

  --accent-yellow: #fcd535;
  --accent-blue: #2563eb;
  --accent-purple: #7c3aed;

  --border-radius: 12px;
  --border-radius-lg: 24px;
}

body.app-mode {
  margin: 0;
  padding: 0;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, sans-serif;
  overflow: hidden;
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Custom Scrollbar */
.app-mode ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.app-mode ::-webkit-scrollbar-track {
  background: transparent;
}

.app-mode ::-webkit-scrollbar-thumb {
  background: #322b5e;
  border-radius: 10px;
}

.app-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4185;
}

/* Promo Boxes */
.promo-row {
  display: flex;
  gap: 8px;
}

.promo-box {
  flex: 1;
  border-radius: 12px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.promo-box.blue {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

.promo-box.orange {
  background: linear-gradient(180deg, #f97316, #c2410c);
}

.promo-box.purple {
  background: linear-gradient(180deg, #d946ef, #9333ea);
}

.promo-box img {
  width: 35px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.refer-earn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(252, 213, 53, 0.15), rgba(252, 213, 53, 0.05));
  border: 1px solid rgba(252, 213, 53, 0.4);
  color: var(--accent-yellow);
  font-size: 0.9rem;
  font-weight: 800;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.refer-earn:hover {
  background: rgba(252, 213, 53, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(252, 213, 53, 0.2);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg-panel);
  border-radius: 20px;
  width: 90%;
  max-width: 450px;
  padding: 30px;
  position: relative;
  border: 1px solid rgba(252, 213, 53, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(252, 213, 53, 0.1);
  transform: translateY(20px);
  transition: transform 0.3s;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}

/* Refer Modal Specifics */
.refer-header {
  text-align: center;
  margin-bottom: 24px;
}

.refer-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 15px rgba(252, 213, 53, 0.4));
}

.refer-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 8px 0;
}

.text-gold {
  color: var(--accent-yellow);
}

.refer-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

.refer-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tier-friends {
  font-weight: 700;
  font-size: 0.95rem;
}

.tier-reward {
  color: var(--accent-yellow);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-vip {
  background: linear-gradient(90deg, #f97316, #c2410c);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
}

.refer-link-box {
  margin-bottom: 24px;
}

.link-title {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.link-input-group {
  display: flex;
  gap: 8px;
}

.link-input-group input {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  outline: none;
}

.btn-copy {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-copy:hover {
  background: rgba(255, 255, 255, 0.2);
}

.refer-share-btn {
  width: 100%;
  display: block;
  text-align: center;
  background: #25D366;
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.refer-share-btn:hover {
  background: #1ebc5a;
}

/* Nav Menu (Sidebar Drawer) */
.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-nav-item:hover {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.sidebar-nav-item.active {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-left: 4px solid var(--accent-yellow);
}

.nav-icon {
  width: 18px;
  text-align: center;
  font-size: 1.1rem;
}

.nav-badge {
  background: var(--accent-yellow);
  color: #000;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}

.nav-chevron {
  font-size: 0.7rem;
  color: #555;
  transition: transform 0.3s;
}

.sidebar-nav-item[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.sidebar-dropdown {
  display: none;
  flex-direction: column;
  padding-left: 36px;
  margin-top: -2px;
  margin-bottom: 8px;
  gap: 6px;
}

.sidebar-dropdown.show {
  display: flex;
}

.dropdown-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
}

.dropdown-item:hover {
  color: var(--accent-yellow);
  background: var(--bg-card);
}

.sidebar-heading {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 10px;
  padding-left: 14px;
}

/* Bottom Nav (used by game-detail.html) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0b0f19;
  border-top: 1px solid #1f253a;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 65px;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6a6f8a;
  font-size: 0.7rem;
  gap: 4px;
}

.nav-icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
  transition: all 0.2s;
}

.nav-item.active .nav-icon-wrapper {
  background: #00f0ff;
  color: #000;
}

/* ==========================================================================
   HOME PAGE (INDEX) MOBILE APP UI
   ========================================================================== */

.mobile-only-home {
  display: block;
  background-color: #05040a;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  padding-bottom: 120px;
  color: white;
  font-family: "Inter", sans-serif;
}

/* Mobile Header */
.mobile-home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #05040a;
}

.hamburger-icon,
.notification-bell svg {
  color: white;
}

.notification-bell {
  position: relative;
}

.bell-dot {
  position: absolute;
  top: -2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #05040a;
}

/* Wallet Card */
.mobile-wallet-card {
  margin: 0 15px 20px 15px;
  background: rgba(22, 19, 43, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wallet-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-greeting {
  font-size: 0.75rem;
  color: #a0a0b8;
  margin-bottom: -4px;
}

.wallet-name {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.wallet-vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(180, 83, 9, 0.2);
  color: #d97706;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  width: max-content;
}

.wallet-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  align-items: flex-end;
}

.wallet-balance-label {
  font-size: 0.75rem;
  color: #a0a0b8;
  margin-bottom: -4px;
}

.wallet-balance-amount {
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coin-icon {
  font-size: 1.1rem;
}

.wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  width: 130px;
}

.wallet-btn {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
}

.btn-deposit-gold {
  background: linear-gradient(90deg, #eab308, #d97706);
  color: white;
}

.btn-withdraw-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

/* Hero Banner */
.mobile-hero-banner {
  margin: 0 15px 20px 15px;
  border-radius: 16px;
  background: #0b0c10;
  padding: 20px;
  position: relative;
  overflow: hidden;
  height: 220px !important;
  max-height: 220px !important;
  box-sizing: border-box;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(253, 213, 53, 0.25);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
  transition: background-image 0.5s ease-in-out;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(11, 8, 24, 0.92) 0%, rgba(11, 8, 24, 0.6) 55%, rgba(11, 8, 24, 0.25) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 70%;
}

.hero-text-large {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 6px;
  height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.highlight-gold {
  color: #fcd535;
}

.hero-desc {
  font-size: 0.75rem;
  color: #d1d5db;
  margin-bottom: 12px;
  line-height: 1.3;
  height: 32px;
  display: flex;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFF3A8 0%, #FCD535 30%, #E59B00 75%, #B37400 100%);
  color: #120A00;
  border: 1px solid #FFF8C7;
  padding: 9px 20px;
  border-radius: 30px;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(252, 213, 53, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.hero-btn::after {
  content: '➔';
  font-size: 0.85rem;
  font-weight: 900;
  transition: transform 0.25s ease;
}

.hero-btn:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE566 30%, #F0A500 75%, #C27E00 100%);
  box-shadow: 0 6px 22px rgba(252, 213, 53, 0.7), inset 0 1px 1px #ffffff;
  transform: translateY(-2px) scale(1.03);
}

.hero-btn:hover::after {
  transform: translateX(4px);
}

.hero-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 8px rgba(252, 213, 53, 0.3);
}

.hero-dots,
.games-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.dot.active {
  background: #fcd535;
  width: 12px;
  border-radius: 4px;
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 15px 30px 15px;
  background: rgba(22, 19, 43, 0.4);
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #a0a0b8;
  font-weight: 600;
}

.action-icon {
  width: 48px;
  height: 48px;
  background: rgba(252, 213, 53, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px 15px 15px;
}

.section-header h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

.section-header a {
  color: #a0a0b8;
  font-size: 0.8rem;
  text-decoration: none;
}

/* Popular Games Grid */
.mobile-games-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc(25% - 6px);
  /* Show 4 columns at once */
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 10px 15px;
  padding-right: 15px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.mobile-games-grid::-webkit-scrollbar {
  display: none;
}

.mobile-game-card {
  background: #12101f;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
  scroll-snap-align: start;
}

.game-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.45rem;
  font-weight: 800;
  color: white;
  z-index: 2;
}

.game-badge.hot {
  background: #ef4444;
}

.game-badge.new {
  background: #10b981;
}

.img-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-info {
  padding: 6px 4px;
  text-align: center;
}

.card-info .title {
  font-size: 0.6rem;
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-info .subtitle {
  font-size: 0.45rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats Footer */
.mobile-stats-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 30px 15px 20px 15px;
  background: rgba(22, 19, 43, 0.4);
  padding: 15px 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  font-size: 0.85rem;
  font-weight: 800;
}

.stat-label {
  font-size: 0.6rem;
  color: #a0a0b8;
}

/* V2 Bottom Nav */
.v2-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(9, 8, 18, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px 24px 0 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 15px);
  height: calc(65px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
}

.v2-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.65rem;
  font-weight: 600;
  text-decoration: none;
  gap: 4px;
  width: 20%;
  transition: color 0.25s ease;
}

.v2-bottom-nav .nav-item.active {
  color: #fcd535;
  font-weight: 700;
}

.v2-bottom-nav .nav-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.v2-bottom-nav .nav-icon-badge svg {
  width: 20px;
  height: 20px;
  transition: fill 0.25s ease;
}

.v2-bottom-nav .nav-item.active .nav-icon-badge {
  background: linear-gradient(135deg, #fcd535, #d97706);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45);
  transform: translateY(-2px);
}

.v2-bottom-nav .nav-item.active .nav-icon-badge svg {
  fill: #fff;
}

.v2-bottom-nav .center-btn {
  position: relative;
  top: -15px;
}

.wallet-orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcd535, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -5px 20px rgba(217, 119, 6, 0.4);
  border: 4px solid #090812;
  transition: transform 0.2s ease;
}

.v2-bottom-nav .nav-item:active .nav-icon-badge,
.v2-bottom-nav .center-btn:active .wallet-orb {
  transform: scale(0.9);
}

.v2-bottom-nav .nav-item.active:active .nav-icon-badge {
  transform: translateY(-2px) scale(0.9);
}

/* Mobile Sidebar */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: #110e26;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  transition: left 0.3s ease;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.mobile-sidebar.open {
  left: 0;
}

.mobile-nav-overlay.open {
  display: block;
  opacity: 1;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.mobile-sidebar .sidebar-logo {
  height: 70px;
  object-fit: contain;
}

.sidebar-close {
  font-size: 28px;
  color: white;
  cursor: pointer;
}

.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.sidebar-links a.active {
  color: #d8b4fe;
}


/* Notification Sidebar */
.notification-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #110e26;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  transition: right 0.3s ease;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.notification-sidebar.open {
  right: 0;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.notif-header h2 {
  color: white;
  font-size: 18px;
  margin: 0;
}

.notif-close {
  font-size: 28px;
  color: white;
  cursor: pointer;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.notif-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.notif-title {
  color: #d8b4fe;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.notif-desc {
  color: #a0a0b8;
  font-size: 12px;
  line-height: 1.4;
}

.notif-time {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-top: 6px;
  text-align: right;
}

/* Standardized Mobile Header */
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-header .menu-icon {
  cursor: pointer;
}

.mobile-header .menu-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.mobile-header .logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-header .logo-container img {
  height: 52px;
  max-height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.mobile-header .bell-icon {
  position: relative;
  cursor: pointer;
}

.mobile-header .bell-icon svg {
  width: 24px;
  height: 24px;
  stroke: white;
  fill: none;
  stroke-width: 2;
}

.mobile-header .bell-icon .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent-danger, #ef4444);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-bottom-nav .nav-item svg { fill: currentColor; }

/* ==========================================================================
   FEATURED SLIDER & ANIMATED SVG ICONS ENHANCEMENTS
   ========================================================================== */

/* Realistic 3D Animated Filter Pills */
.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(26, 17, 48, 0.9), rgba(15, 10, 30, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 8px 16px 8px 10px;
  min-width: max-content;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.pill:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: rgba(253, 213, 53, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(253, 213, 53, 0.2);
}

.pill.active {
  background: linear-gradient(135deg, #7e22ce 0%, #a855f7 50%, #c084fc 100%);
  border: 1.5px solid #fcd535;
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5), 0 0 20px rgba(252, 213, 53, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.pill-3d-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #090614;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.pill-3d-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.4s ease;
}

.pill:hover .pill-3d-badge {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 0 14px rgba(253, 213, 53, 0.6);
}

.pill.active .pill-3d-badge {
  animation: float3DGlow 2.5s infinite ease-in-out;
  border-color: #fcd535;
}

@keyframes float3DGlow {
  0%, 100% {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 0 12px rgba(252, 213, 53, 0.7);
  }
  50% {
    transform: translateY(-3px) scale(1.12);
    box-shadow: 0 0 22px rgba(252, 213, 53, 0.95);
  }
}

/* On mobile the 42px icon badge + generous padding made each category pill
   (All Games/Fish Games/Slots/Arcade/Table) so wide that barely more than
   one fit on screen at a time. Shrink the badge and tighten padding/gap so
   several pills are visible without feeling oversized. */
@media (max-width: 600px) {
  .pill {
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 12px;
  }

  .pill-3d-badge {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

/* Games Featured Slider Container */
.games-featured-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  min-height: 210px;
  background: #110c22;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(126, 34, 206, 0.15);
}

.featured-slides-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 210px;
}

.featured-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* No opacity/visibility transition on the container itself — the text
     content (title/description/button) switches instantly on slide change.
     Crossfading full text blocks caused two slides' text to visibly
     double-expose and overlap for the duration of the transition, which
     read as garbled/broken (most noticeable on the narrower mobile layout
     where the carousel text takes up more of the visible area). Only the
     background image below crossfades — that reads fine since it's just
     imagery, not text that needs to stay legible mid-transition. */
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 20px 22px;
  z-index: 1;
}

.featured-slide.active {
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Slide Visual Background & Fit Image */
.slide-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
  opacity: 0;
  filter: contrast(1.05) brightness(1.02);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 6s ease-out;
}

.featured-slide.active .slide-bg-img {
  opacity: 1;
  transform: scale(1.04);
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #070410 0%, rgba(7, 4, 16, 0.92) 38%, rgba(7, 4, 16, 0.2) 65%, transparent 100%);
  z-index: 2;
}

.slide-content-col {
  position: relative;
  z-index: 3;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  width: max-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.slide-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.slide-title span {
  color: #fcd535;
}

.slide-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  margin-bottom: 14px;
}

.btn-slide-play {
  background: linear-gradient(135deg, #fcd535 0%, #d97706 100%);
  color: #000000;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: max-content;
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.45);
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-slide-play:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(252, 213, 53, 0.6);
  background: linear-gradient(135deg, #ffffff 0%, #fcd535 100%);
}

/* Slider Pagination Dots & Controls */
.slider-dots-container {
  position: absolute;
  bottom: 12px;
  left: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  width: 22px;
  border-radius: 10px;
  background: #fcd535;
  box-shadow: 0 0 8px rgba(252, 213, 53, 0.8);
}

/* ==========================================================================
   DESKTOP HOME LAYOUT (index.html only, >=1024px)
   3-column casino layout: left nav sidebar / games grid / right promo rail.
   Hidden below 1024px so the existing mobile-only-home experience is
   untouched on phones/tablets.
   ========================================================================== */
.desktop-only-home {
  display: none;
}

/* Universal subpage shell (js/desktop-shell.js) — hidden by default so the
   fixed header/sidebar never render on mobile; only the >=1024px query
   below turns them on. Page content itself is never touched/moved. */
.dts-header,
.dts-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  /* body.app-mode's overflow:hidden was written for the mobile layout
     (which scrolls inside its own container) — on desktop it left BODY
     as an ambiguous non-scrolling "scroll container" sitting between the
     sticky sidebar and the real (HTML-level) scroller, which silently
     breaks position:sticky (it never clamps to `top`, just tracks
     static flow position). Restoring normal overflow here makes HTML
     the sidebar's one unambiguous scrolling ancestor again. */
  body.app-mode {
    overflow: visible;
  }

  .mobile-only-home,
  .v2-bottom-nav {
    display: none !important;
  }

  .desktop-only-home {
    display: block;
    background: var(--bg-main);
    min-height: 100vh;
  }

  /* Header */
  .dt-header {
    height: 70px;
    background: var(--bg-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .dt-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .dt-logo img {
    height: 34px;
    width: auto;
  }

  .dt-search {
    position: relative;
    width: 360px;
    max-width: 30vw;
  }

  .dt-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .dt-search input {
    width: 100%;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid #2a2450;
    border-radius: 10px;
    padding: 0 14px 0 42px;
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
  }

  .dt-search input:focus {
    border-color: var(--accent-yellow);
  }

  .dt-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .dt-balance-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-panel);
    border: 1px solid rgba(252, 213, 53, 0.25);
    border-radius: 10px;
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  .dt-balance-pill:hover {
    border-color: var(--accent-yellow);
  }

  .dt-balance-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: #000;
    font-weight: 900;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dt-balance-pill span:last-child {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
  }

  .dt-btn-primary {
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #fcd535 0%, #d97706 100%);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(252, 213, 53, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .dt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(252, 213, 53, 0.45);
  }

  .dt-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid #2a2450;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
  }

  .dt-icon-btn:hover {
    color: var(--accent-yellow);
    border-color: var(--accent-yellow);
  }

  .dt-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  .dt-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid #2a2450;
    cursor: pointer;
  }

  .dt-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: #000;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-yellow);
    font-size: 1rem;
  }

  .dt-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
  }

  .dt-user-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
  }

  .dt-guest-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .dt-btn-outline {
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid #2a2450;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  .dt-btn-outline:hover {
    border-color: var(--accent-yellow);
  }

  /* Layout shell */
  .dt-layout {
    display: flex;
    /* stretch (not flex-start) so .dt-sidebar's background grows to match
       the page's full content height instead of stopping at one viewport
       tall — see .dt-sidebar-sticky below for the part that pins in place. */
    align-items: stretch;
  }

  /* Left Sidebar */
  .dt-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-header);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    /* No height/position here — this box stretches (via .dt-layout's
       align-items:stretch) to match the page's full content height, so
       its background never runs out partway down a tall page. */
  }

  .dt-sidebar-sticky {
    position: sticky;
    top: 70px;
    /* Fixed height (not max-height) so this box is ALWAYS exactly one
       viewport tall — .dt-nav's space-between then stretches to fill it.
       That match is what makes the sticky "unstick" point land exactly
       at the page's true bottom, so Logout ends up level with the
       footer banner once fully scrolled instead of floating above it
       with content shorter than the box leaving it stuck mid-viewport. */
    height: calc(100vh - 70px);
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
  }

  .dt-profile-card {
    background: var(--bg-panel);
    border: 1px solid #2a2450;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .dt-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .dt-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: #000;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-yellow);
    flex-shrink: 0;
  }

  .dt-profile-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dt-profile-id {
    font-size: 10px;
    color: var(--text-muted);
  }

  .dt-badge-verified {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 6px;
  }

  .dt-balance-box {
    background: var(--bg-main);
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dt-balance-box-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
  }

  .dt-balance-box-amount {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-main);
  }

  .dt-balance-box-add {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--accent-yellow);
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 900;
    font-size: 15px;
  }

  .dt-profile-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .dt-profile-tab {
    height: 26px;
    background: var(--bg-main);
    border: 1px solid #2a2450;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: 24px;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
  }

  .dt-profile-tab:hover,
  .dt-profile-tab.active {
    border-color: var(--accent-yellow);
    color: var(--text-main);
  }

  .dt-nav {
    display: flex;
    flex-direction: column;
    /* Spread the nav items evenly across the available height instead of
       clumping at the top and leaving a dead gap before Support/Profile/
       Settings/Logout — fills top-to-bottom with equal spacing, like the
       reference. justify-content handles the spacing; gap is a floor so
       items never collapse together on a short/scrolling viewport. */
    justify-content: space-between;
    gap: 1px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .dt-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .dt-nav-item:hover {
    background: var(--bg-panel);
    color: var(--text-main);
  }

  .dt-nav-item.active {
    background: rgba(252, 213, 53, 0.12);
    border-left-color: var(--accent-yellow);
    color: var(--text-main);
    font-weight: 700;
  }

  .dt-nav-item svg {
    flex-shrink: 0;
  }

  .dt-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 0;
  }

  .dt-sidebar-bottom {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
  }

  .dt-support-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }

  /* Main content column */
  /* Wraps the hero row + the main/sidebar split so the hero row can span
     the full width (main + right sidebar) while the split below it
     starts the right sidebar level with .dt-category-nav instead of the
     hero row. */
  .dt-content-column {
    flex: 1;
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  .dt-content-split {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .dt-main {
    flex: 1;
    min-width: 0;
  }

  .dt-hero-row {
    display: grid;
    /* Fixed 3 columns (not auto-fit/minmax) so the 3 promo cards always
       stay on one row and shrink together — auto-fit was dropping the
       3rd card to its own row on real laptop widths where the content
       column is narrower than 3*260px, breaking the "1 frame" layout. */
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .dt-hero-card {
    position: relative;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(252, 213, 53, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .dt-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(252, 213, 53, 0.2);
  }

  .dt-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,4,10,0.92) 25%, rgba(5,4,10,0.55) 65%, rgba(5,4,10,0.25) 100%);
    z-index: 1;
  }

  .dt-hero-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 213, 53, 0.25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
  }

  .dt-hero-card-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(252, 213, 53, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--accent-yellow);
    width: max-content;
  }

  .dt-hero-card-title {
    position: relative;
    z-index: 2;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }

  .dt-hero-card-title span {
    color: var(--accent-yellow);
  }

  .dt-hero-card-desc {
    position: relative;
    z-index: 2;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    max-width: 80%;
  }

  .dt-category-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .dt-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .dt-pill {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .dt-pill:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
  }

  .dt-pill.active {
    background: var(--accent-yellow);
    color: #000;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.35);
  }

  .dt-grid-search {
    position: relative;
    width: 200px;
  }

  .dt-grid-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .dt-grid-search input {
    width: 100%;
    height: 36px;
    background: var(--bg-panel);
    border: 1px solid #2a2450;
    border-radius: 8px;
    padding: 0 12px 0 36px;
    color: var(--text-main);
    font-size: 12px;
    outline: none;
  }

  .dt-games-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
  }

  .dt-games-section-title .dt-icon-chip {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent-yellow);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dt-games-grid {
    display: grid;
    /* 8 columns so 24 games form exactly 3 rows — matching the reference's
       3-row games grid height against the 3-widget right sidebar (a 6/7
       column grid made 4 rows, leaving a visible empty gap under the
       shorter sidebar). */
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-bottom: 28px;
  }

  .dt-game-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    display: block;
  }

  .dt-game-tile:hover {
    transform: translateY(-4px);
    border-color: var(--accent-yellow);
    box-shadow: 0 8px 25px rgba(252, 213, 53, 0.25);
  }

  .dt-game-tile-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  .dt-game-tile-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--accent-yellow);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 5px;
    z-index: 2;
  }

  .dt-game-tile-info {
    padding: 6px 8px;
  }

  .dt-game-tile-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dt-game-tile-cat {
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dt-games-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: 13px;
  }

  .dt-footer-banner {
    background: var(--bg-header);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 12px;
  }

  .dt-footer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
  }

  /* Right Sidebar */
  .dt-right-sidebar {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dt-widget {
    background: var(--bg-panel);
    border: 1px solid #2a2450;
    border-radius: 14px;
    padding: 16px;
  }

  .dt-widget-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
  }

  .dt-widget-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .dt-widget-link {
    display: block;
    text-align: center;
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fcd535 0%, #d97706 100%);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
  }

  .dt-widget-promo {
    position: relative;
    height: 150px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c2d12 0%, #431407 100%);
    border: 1px solid rgba(252, 213, 53, 0.25);
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
  }

  .dt-widget-promo-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
  }

  .dt-widget-promo-title span {
    color: var(--accent-yellow);
  }

  .dt-widget-promo-desc {
    position: relative;
    z-index: 2;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
  }

  .dt-widget-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .dt-widget-title-row .dt-widget-title {
    margin-bottom: 0;
  }

  .dt-widget-icon {
    font-size: 16px;
  }

  .dt-cashback-rate {
    display: none;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
  }

  .dt-cashback-rate-val {
    font-size: 22px;
    font-weight: 900;
    color: var(--accent-yellow);
  }

  .dt-cashback-rate-label {
    font-size: 11px;
    color: var(--text-muted);
  }

  .dt-payouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }

  .dt-payout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
  }

  .dt-payout-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }

  .dt-payout-info {
    flex: 1;
    min-width: 0;
  }

  .dt-payout-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dt-payout-time {
    font-size: 10px;
    color: var(--text-muted);
  }

  .dt-payout-amount {
    font-size: 11px;
    font-weight: 800;
    color: #10b981;
    flex-shrink: 0;
  }

  /* .dt-widget-link doubles as a <button> for the cashback claim action —
     reset default button chrome so it matches the <a> version exactly. */
  button.dt-widget-link {
    font-family: inherit;
    appearance: none;
    width: 100%;
  }

  /* Subpage Desktop Shell (built by js/desktop-shell.js)
     Deliberately non-destructive: the header/sidebar are injected as
     standalone fixed-position elements and the page's real content is
     NEVER moved in the DOM. That's what makes this safe — a version that
     physically relocated content into a wrapper div broke mobile outright
     (the wrapper is display:none below 1024px, so anything moved inside it
     vanished instead of falling back to the normal mobile layout). Reuses
     the same inner classes (.dt-logo, .dt-nav-item, .dt-profile-card, etc)
     already styled above for index.html, just under new fixed-position
     outer wrappers (.dts-header/.dts-sidebar) instead of .dt-header/.dt-sidebar's
     sticky-in-flex-row rules, so the two contexts don't collide. */
  html.has-dt-shell body {
    padding-top: 70px;
    padding-left: 240px;
    padding-bottom: 0 !important;
    background: var(--bg-main) !important;
  }

  html.has-dt-shell .mobile-header,
  html.has-dt-shell .detail-header,
  html.has-dt-shell .v2-bottom-nav,
  html.has-dt-shell .mobile-sidebar,
  html.has-dt-shell .mobile-nav-overlay {
    display: none !important;
  }

  .dts-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 600;
    background: var(--bg-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
  }

  .dts-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 590;
    background: var(--bg-header);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto;
    padding: 16px 12px;
  }

  /* Desktop polish for real page content — nothing was relocated, so these
     target the actual ids/classes wherever they occur on the page. */
  html.has-dt-shell #gamesGrid,
  html.has-dt-shell .game-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
  }

  html.has-dt-shell .single-frame-wrapper {
    max-width: 1100px;
    margin: 0 auto;
  }

  html.has-dt-shell .sf-grid-hub {
    grid-template-columns: repeat(2, 1fr);
  }

  html.has-dt-shell .promotions-grid,
  html.has-dt-shell .events-grid,
  html.has-dt-shell .platforms-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  html.has-dt-shell .vip-tiers-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  html.has-dt-shell .container,
  html.has-dt-shell .main-content {
    max-width: 100% !important;
  }
}