/* Theme Switcher — matches LanguageSwitcher style */

.theme-switcher {
  position: relative;
  display: inline-block;
}

.theme-current-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}

.theme-current-btn:hover {
  color: var(--accent-blue-hover);
}

/* Dropdown */
.theme-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  box-shadow: 0 4px 20px var(--black-50);
  min-width: 120px;
  overflow: hidden;
  z-index: 1000;
  animation: themeDropdownFadeIn 0.15s ease-out;
}

@keyframes themeDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--white-90);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Proxima Nova', sans-serif;
  text-align: left;
}

.theme-option:hover {
  background: var(--white-10);
}

.theme-option.active {
  color: var(--accent-blue);
}

.theme-option:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

.theme-name {
  font-size: 13px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .theme-current-btn {
    padding: 3px 4px;
  }
}

.top-leagues {
  display: flex;
  overflow-x: auto;
  padding: 10px 2px 9px;
  gap: 10px;
}



.top-league-name {
    font-family: 'Proxima Nova Cond', sans-serif;}

.league-card {
  background: var(--gradient-top-league);
  border-radius: 4px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  text-align: center;
  color: var(--text-secondary);
  font-weight: bold;
  line-height: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

.league-card:hover {
  color: var(--text-primary);
}

.league-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.top-leagues-banners {
  overflow-x: auto;
  margin-top: 16px;
}

.banners-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
}

.banner-svg {
  flex: 0 0 100vw;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 5px;
}

.banner-svg img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.banner-dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 6px;
}

.banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-quaternary);
  transition: background-color 0.3s;
}

.banner-dot.active {
  background-color: var(--text-primary);
}

.banner-slider-container {
  overflow: hidden;
}

.banner-slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
  justify-content: center;
}

.banner-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 800px;
  padding: 0 10px;
  box-sizing: border-box;
}

.banner-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


@media (min-width: 1024px) {
  .top-leagues {
    padding: 0 2px 0;
    margin-bottom: 9px;
  }
}
.sportstab-tabs {
  display: flex;
  overflow-x: auto;
  gap: 5px;
  padding: 5px;
  background-color: #29292c;
}

.sportstab-tab {
  align-items: center;
  background-color: rgba(44, 44, 46, 0);
  border: 0;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  display: flex;
  cursor: pointer;
  font-family: "Proxima Nova", sans-serif;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  line-height: 15px;
  flex-direction: column;
  padding: 5px 5px 5px;
  white-space: nowrap;
}

.sportstab-tab.active {
  background-color: transparent;
  color: #3478f6;
}
@media (min-width: 1024px) {
.sportstab-tab:hover {
  color: #fff;
}
.sportstab-tab.active:hover {
  background-color: transparent;
  color: #3478f6;
}
}
.sportstab-icon {
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sportstab-icon svg {
  width: 100%;
  height: 100%;
}

.sportstab-starting-block {
  background-color: #000;
  padding: 10px 20px 5px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sportstab-starting-block img {
  width: 18px;
  height: 18px;
}

.sportstab-starting-block span {
  color: white;
  font-weight: bold;
  font-size: 15px;
  font-family: "Proxima Nova", sans-serif;
}

.sportstab-title {
  color: #fff;
  font-family: Proxima Nova, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.sportstab-header {
  background-color: black;
  padding: 12px 5px 5px 12px;
  display: none;
  gap: 12px;
}

.wrap-sportstab-header {
  display: flex;
  border-bottom: 1px solid #363636;
  border-top: 1px solid #363636;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Mobile only - offset from header */
@media (max-width: 1023px) {
  .wrap-sportstab-header {
    top: 36px;
  }
}

.sportstab-tabs { scroll-behavior: smooth; }
/* StarIcon - Phosphor star for favorites */

.star-icon {
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .star-icon:hover:not(.star-icon--disabled) {
    transform: scale(1.15);
  }
  .star-icon:active:not(.star-icon--disabled) {
    transform: scale(0.95);
  }
}

/* Disabled state */
.star-icon--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.star-icon--disabled:hover {
  transform: none;
}

/* SportTabs - Reusable sport tabs component */

.st-tabs {
  display: flex;
  overflow-x: auto;
  gap: 5px;
  padding: 10px 0 5px 0px;
  margin: 5px 3px 0px 3px;
  background-color: var(--bg-primary);
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--bg-header);
  border-radius: 5px;
}

.st-tabs::-webkit-scrollbar {
  display: none;
}

.st-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
          user-select: none;
}

.st-tab.active .st-icon {
  color: var(--accent-blue);
  color: var(--sport-icon-color, var(--accent-blue));
}

/* Favorites tab - golden star (icon + text) */
.st-tab-favorites.active {
  color: var(--accent-yellow);
}
.st-tab-favorites.active .st-icon {
  color: var(--accent-yellow);
}

/* Hover only on devices that support hover (not touch) */
@media (hover: hover) {
  .st-tab:hover:not(.active) .st-icon {
    color: var(--accent-blue);
    color: var(--sport-icon-color, var(--accent-blue));
  }

  .st-tab-favorites:hover:not(.active) {
    color: var(--accent-yellow);
  }
  .st-tab-favorites:hover:not(.active) .st-icon {
    color: var(--accent-yellow);
  }
}

/* Icon wrapper for badge positioning */
.st-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  color: var(--text-secondary);
  color: var(--sport-icon-inactive, var(--text-secondary));
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.st-icon-svg {
  width: 100%;
  height: 100%;
}

/* Fallback icon - circle with letter */
.st-icon-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-quaternary);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-tab.active .st-icon-fallback {
  background: currentColor;
}

.st-label {
  font-weight: 500;
  pointer-events: none;
}

/* Badge with count */
.st-count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  min-height: 15px;
  padding: 1px;
  background-color: var(--accent-red);
  border-radius: 999px;
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

/* Desktop */
@media (min-width: 1024px) {
  .st-tabs {
    padding: 4px 0 3px;
    margin: 0;
  }

  .st-tab {
    gap: 1px;
  }

  .st-icon {
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   Shockwave Double Bonus Poker — visual effects
   ============================================ */

/* Reuse double-bonus modal override (we kept the .double-bonus-game class) */
.vp-container.shockwave-double-bonus-game.vp-in-modal {
  max-width: 100%;
  margin: 0;
}

/* Lock status-bar height to 40px and vertically center its content always —
   prevents layout shift when entering/leaving Shockwave Mode. Shockwave-mode
   overrides display:grid below to add the 3-column counter/text/badge layout. */
.vp-container.shockwave-double-bonus-game .vp-status-bar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ============ BACKGROUND COLOR CYCLE ============ */
/* Synchronously cycles .vp-main-area + .vp-info-row through 10 solid vivid hues,
   ~1 second per color, total 10s loop. Same animation on both elements keeps
   them in lock-step. */

.vp-container.shockwave-mode-active .vp-main-area,
.vp-container.shockwave-mode-active .vp-info-row {
  animation: sdbBgCycle 10s linear infinite;
  background: #00a050;
}

@keyframes sdbBgCycle {
  0%   { background: #00a050; } /* emerald */
  10%  { background: #cc1030; } /* crimson */
  20%  { background: #ff5500; } /* sunset orange */
  30%  { background: #6020d0; } /* ultraviolet */
  40%  { background: #cc20a0; } /* magenta */
  50%  { background: #00b0a0; } /* turquoise */
  60%  { background: #d09000; } /* amber */
  70%  { background: #1040d0; } /* sapphire */
  80%  { background: #ff3080; } /* hot pink */
  90%  { background: #50c020; } /* lime */
  100% { background: #00a050; } /* loop */
}

/* Smooth restoration of original gradients when mode ends */
.vp-container:not(.shockwave-mode-active) .vp-main-area,
.vp-container:not(.shockwave-mode-active) .vp-info-row {
  transition: background 800ms ease-out;
}

/* ============ STATUS BAR LAYOUT (Shockwave Mode) ============ */
/* 3-column grid (1fr auto 1fr) — equal-sized side columns guarantee the center
   column is geometrically centered regardless of side widths. Counter sticks to
   the left edge, status text in the true middle, badge to the right edge. */
.vp-container.shockwave-double-bonus-game .vp-status-bar.sdb-status-bar {
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
  width: 100%;
  align-self: stretch;
  justify-content: initial;
}

.vp-status-bar.sdb-status-bar .status-text {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
}

.sdb-status-counter {
  grid-column: 1;
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffd84d;
  line-height: 1;
  text-shadow: 0 0 4px #ff8040, 1px 1px 2px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  font-family: 'Arial Black', 'Helvetica', sans-serif;
  pointer-events: none;
}

.sdb-status-counter strong {
  font-size: 14px;
  color: #fff;
  /* text-shadow: 0 0 6px #ffd84d, 0 0 4px #ff6080, 1px 1px 2px #000; */
}

.sdb-status-badge {
  grid-column: 3;
  justify-self: end;
  height: 10px;
  width: auto;
  display: block;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
  pointer-events: none;
}

/* ============ ACTIVATION OVERLAY: drop-in badge ============ */
.sdb-activation-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40%;
  pointer-events: none;
}

.sdb-activation-badge {
  width: min(60%, 380px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  animation: sdbBadgeDropIn 2500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sdbBadgeDropIn {
  0%   { transform: translateY(-120vh) rotate(-25deg) scale(0.6); opacity: 0; }
  18%  { transform: translateY(0) rotate(8deg) scale(1.15); opacity: 1; }
  28%  { transform: translateY(-12px) rotate(-4deg) scale(1.0); opacity: 1; }
  38%  { transform: translateY(0) rotate(2deg) scale(1.05); opacity: 1; }
  48%  { transform: translateY(-4px) rotate(-1deg) scale(1.0); opacity: 1; }
  85%  { transform: translateY(0) rotate(0deg) scale(1.0); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg) scale(1.1); opacity: 0; }
}

/* Shockwave Hit uses the same .royal-flush-celebration classes from VideoPoker.css —
   no additional styles needed. */

/* ============ PAYTABLE: text-only highlight (no fill / no border) ============ */
/* Goal: keep the existing .winner round-yellow highlight intact, only add a
   shimmer to the hand-name label and the strikethrough+250 payout text. */

.vp-paytable-row.shockwave-row .hand-name {
  /* animation: sdbPayoutShimmer 1s ease-in-out infinite alternate; */
  color: #e60000;
  font-weight: 900;
}

.vp-paytable-row.shockwave-row .payout {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.vp-paytable-row.shockwave-row .payout-strike {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 80, 80, 0.95);
  text-decoration-thickness: 2px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9em;
}

.vp-paytable-row.shockwave-row .payout-shockwave {
  color: #e60000;
  font-weight: 900;
  /* animation: sdbPayoutShimmer 1s ease-in-out infinite alternate; */
}

@keyframes sdbPayoutShimmer {
  0%   { text-shadow: 0 0 4px #ff8040, 0 0 8px #ffaa20, 0 0 2px #000; }
  100% { text-shadow: 0 0 10px #ffaa20, 0 0 18px #ff6020, 0 0 4px #fff, 0 0 2px #000; }
}