/* ========================================================
   ✈️ SPRIBE AVIATOR OFFICIAL DESIGN SYSTEM & STYLES
   Exact replica of Spribe Aviator (https://aviator-demo.spribegaming.com)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --spribe-bg-black: #000000;
  --spribe-card-bg: #1b1c1d;
  --spribe-input-bg: #141516;
  --spribe-button-secondary: #2c2d30;
  --spribe-button-secondary-hover: #36363c;
  --spribe-red: #e50539;
  --spribe-crash-red: #dc3545;
  --spribe-green: #28a909;
  --spribe-green-border: #b2f2a3;
  --spribe-green-hover: #36cb12;
  --spribe-orange: #d07206;
  --spribe-orange-border: #ffbd71;
  --spribe-orange-hover: #f58708;
  --spribe-cancel-red: #cb011a;
  --spribe-cancel-border: #ff7171;
  --spribe-cancel-hover: #f7001f;
  --spribe-text-gray: #83878e;
  --spribe-text-light: #cbd5e1;
  --spribe-border-subtle: rgba(255, 255, 255, 0.06);
}

/* Base View Wrapper */
#viewAviator {
  background: var(--spribe-bg-black) !important;
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  min-height: 100vh;
  padding-bottom: 70px;
}

/* Allow container to expand on desktop when playing Aviator */
.app-container:has(#viewAviator.active),
body.in-aviator-view .app-container {
  max-width: 1260px !important;
  background: #000000 !important;
  box-shadow: none !important;
  transition: max-width 0.25s ease;
}

/* ========================================================
   SPRIBE HEADER BAR
   ======================================================== */
.aviator-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: #111214 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 48px !important;
  box-sizing: border-box !important;
  z-index: 25;
}

.aviator-hdr-left,
.aviator-hdr-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.aviator-icon-btn {
  background: var(--spribe-button-secondary) !important;
  border: 1px solid #36363c !important;
  color: var(--spribe-text-gray) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.aviator-icon-btn:hover {
  background: #36363c !important;
  color: #ffffff !important;
}

.aviator-icon-btn.btn-lobby {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

.aviator-icon-btn.btn-lobby:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.hdr-pf-icon,
.hdr-clock-icon {
  width: 15px;
  height: 15px;
  filter: brightness(0.85);
}

.aviator-icon-btn:hover .hdr-pf-icon,
.aviator-icon-btn:hover .hdr-clock-icon {
  filter: brightness(1.2);
}

.aviator-brand-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.aviator-logo-icon {
  width: 26px !important;
  height: 26px !important;
  filter: drop-shadow(0 0 6px rgba(229, 5, 57, 0.5));
}

.aviator-logo-text {
  font-size: 22px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--spribe-red) !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 0 10px rgba(229, 5, 57, 0.6) !important;
  font-family: 'Inter', sans-serif !important;
}

.aviator-btn-help {
  background: var(--spribe-button-secondary) !important;
  border: 1px solid #36363c !important;
  color: #cbd5e1 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 64px !important;
  padding: 4px 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
}

.aviator-btn-help:hover {
  background: #36363c !important;
  color: #ffffff !important;
}

.rules-help-icon {
  width: 14px;
  height: 14px;
}

.aviator-wallet-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 64px !important;
  padding: 4px 12px !important;
}

.aviator-wallet-val {
  color: var(--spribe-green) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: 0.2px !important;
  font-family: 'Inter', sans-serif !important;
}

.aviator-wallet-unit {
  color: var(--spribe-text-gray) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.aviator-refresh-btn {
  background: none !important;
  border: none !important;
  color: var(--spribe-text-gray) !important;
  cursor: pointer !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
}

.aviator-refresh-btn:hover {
  color: var(--spribe-green) !important;
}

/* ========================================================
   SPRIBE GAME CONTAINER (DESKTOP 2-COLUMN / MOBILE STACKED)
   ======================================================== */
.spribe-game-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  background: var(--spribe-bg-black) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile & Tablet Default: Flight Stage & Betting System at the TOP (order 1); All Bets list at the BOTTOM (order 2) */
.spribe-stage-wrapper {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.spribe-bets-sidebar {
  order: 2 !important;
  width: 100% !important;
}

/* Desktop Wide Viewport: 2-Column Grid (Sidebar on the left, Stage on the right) */
@media (min-width: 992px) {
  .spribe-game-container {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    align-items: start !important;
  }

  .spribe-bets-sidebar {
    grid-column: 1 !important;
    order: 1 !important;
    height: 100% !important;
  }

  .spribe-stage-wrapper {
    grid-column: 2 !important;
    order: 2 !important;
  }
}

/* ========================================================
   MULTIPLIERS HISTORY RIBBON
   ======================================================== */
.aviator-history-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #0e0f10 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  height: 32px !important;
  box-sizing: border-box !important;
}

.aviator-history-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  flex: 1 !important;
}

.aviator-history-scroll::-webkit-scrollbar {
  display: none !important;
}

.bubble-multiplier {
  background-color: rgba(0, 0, 0, 0.5) !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 11px !important;
  font-size: 11.5px !important;
  font-family: 'Inter', sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.2px !important;
  transition: transform 0.15s ease !important;
  user-select: none !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
}

.bubble-multiplier:hover {
  transform: scale(1.08) !important;
}

.pill-blue {
  color: #34b4ff !important;
  border: 1px solid rgba(52, 180, 255, 0.35) !important;
}

.pill-purple {
  color: #913ef8 !important;
  border: 1px solid rgba(145, 62, 248, 0.4) !important;
}

.pill-magenta {
  color: #c017b4 !important;
  border: 1px solid rgba(192, 23, 180, 0.5) !important;
  text-shadow: 0 0 6px rgba(192, 23, 180, 0.6) !important;
}

.btn-history-dropdown {
  background: var(--spribe-button-secondary) !important;
  border: 1px solid #36363c !important;
  color: var(--spribe-text-gray) !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.btn-history-dropdown:hover {
  background: #36363c !important;
  color: #ffffff !important;
}

/* ========================================================
   FLIGHT CANVAS ARENA (STAGE BOARD)
   ======================================================== */
.aviator-arena-box {
  position: relative !important;
  width: 100% !important;
  height: 270px !important;
  background: var(--spribe-bg-black) !important;
  border: 1px solid #1c1d20 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

@media (max-width: 480px) {
  .aviator-arena-box {
    height: 220px !important;
    border-radius: 14px !important;
  }
}

@media (min-width: 992px) {
  .aviator-arena-box {
    height: 350px !important;
  }
}

#aviatorCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  touch-action: none !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

.aviator-overlay-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.huge-multiplier-text {
  font-size: 64px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35) !important;
}

@media (max-width: 480px) {
  .huge-multiplier-text {
    font-size: 44px !important;
  }
  .flew-away-badge {
    font-size: 20px !important;
  }
}

.flew-away-badge {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--spribe-crash-red) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 24px rgba(220, 53, 69, 0.9) !important;
  margin-top: 6px !important;
  font-family: 'Inter', sans-serif !important;
}

.countdown-bar-wrap {
  width: 220px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}

.countdown-bar-fill {
  height: 100% !important;
  width: 100% !important;
  background: linear-gradient(90deg, #dc3545, #f59e0b) !important;
  transition: width 1s linear !important;
}

.countdown-sub-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  margin-top: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}

/* ========================================================
   NAVIGATION SWITCHER (SPRIBE PILL SWITCHER)
   ======================================================== */
.navigation-switcher {
  display: flex !important;
  width: 100% !important;
  height: 32px !important;
  background: var(--spribe-input-bg) !important;
  border-radius: 64px !important;
  border: solid 4px var(--spribe-input-bg) !important;
  box-sizing: border-box !important;
}

.navigation-switcher .tab {
  flex-grow: 1 !important;
  height: 100% !important;
  width: 100% !important;
  text-align: center !important;
  background: none !important;
  border-radius: 32px !important;
  border: none !important;
  padding: 0 !important;
  color: #a3a3a3 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.18px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
}

.navigation-switcher .tab:not(.active):hover {
  color: #ffffff !important;
}

.navigation-switcher .tab.active {
  background: var(--spribe-button-secondary) !important;
  color: #ebebeb !important;
  font-weight: 700 !important;
  cursor: default !important;
}

/* ========================================================
   DUAL BETTING CONTROLS DECK (PANEL 1 & PANEL 2)
   ======================================================== */
.aviator-dual-deck {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .aviator-dual-deck {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #aviatorCardP2.hidden-card,
  #aviatorCardP2.hidden-desk {
    display: none !important;
  }
  .aviator-dual-deck:has(#aviatorCardP2.hidden-card),
  .aviator-dual-deck:has(#aviatorCardP2.hidden-desk) {
    grid-template-columns: 1fr !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 639px) {
  .aviator-dual-deck {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #aviatorCardP2 {
    display: flex !important;
  }
  #aviatorCardP2.hidden-card,
  #aviatorCardP2.hidden-desk {
    display: none !important;
  }
}

.btn-bet-action * {
  pointer-events: none !important;
}

.aviator-bet-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 20px !important;
  background-color: var(--spribe-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.controls-content-top {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.controls-content-top .navigation-wrapper {
  height: 32px !important;
  width: 180px !important;
}

/* Second Hand Add/Remove Buttons */
.sec-hand-btn {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 32px !important;
  height: 32px !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  border: solid 4px var(--spribe-input-bg) !important;
  background-color: var(--spribe-button-secondary) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.15s ease !important;
  padding: 0 !important;
}

.sec-hand-btn:hover {
  transform: scale(1.05) !important;
}

.sec-hand-btn.add {
  background-image: url('/images/aviator/plus.9a1101bb17808f90.svg') !important;
}

.sec-hand-btn.remove {
  background-image: url('/images/aviator/remove.aeeca15ffd0d871e.svg') !important;
}

/* Bet Action Grid (First Row) */
.first-row.bet-game {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.bet-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 140px !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
}

/* Stepper Spinner */
.spinner {
  height: 34px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: 32px !important;
  background-color: var(--spribe-input-bg) !important;
  font-weight: 600 !important;
  padding: 3px 4px !important;
  box-sizing: border-box !important;
}

.spinner .input {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}

.spinner .input input {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
}

.spinner .buttons button {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--spribe-button-secondary) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  cursor: pointer !important;
  min-width: 24px !important;
  min-height: 24px !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.spinner .buttons button:hover {
  background: #3a3b40 !important;
}

.spinner .buttons .minus {
  background-image: url('/images/aviator/minus-grey.337d79958d035ae8.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-indent: -9999px !important;
}

.spinner .buttons .plus {
  background-image: url('/images/aviator/plus-grey.5bf167adc606b769.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-indent: -9999px !important;
}

/* Quick Chips Presets */
.bets-opt-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
}

.bets-opt-list .bet-opt {
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 !important;
  background: var(--spribe-input-bg) !important;
  border: none !important;
  border-radius: 64px !important;
  color: #9ea0a3 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.bets-opt-list .bet-opt:hover {
  background: #252528 !important;
  color: #ffffff !important;
}

/* Giant Main Action Button */
.buttons-block {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 16px !important;
  border: solid 4px var(--spribe-input-bg) !important;
  box-sizing: border-box !important;
}

.btn-bet-action {
  color: #fafafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 68px !important;
  font-feature-settings: lining-nums tabular-nums !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  padding: 6px !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
}

.btn-bet-action:active {
  transform: scale(0.97) !important;
}

.bet-opt:active {
  transform: scale(0.93) !important;
}

.spinner .buttons button:active {
  transform: scale(0.90) !important;
}

.sec-hand-btn:active {
  transform: scale(0.92) !important;
}

.btn-bet-action,
.bet-opt,
.spinner .buttons button,
.sec-hand-btn,
.aviator-tab {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.action-btn-headline {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
}

.action-btn-subline {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  opacity: 0.95 !important;
}

/* Authentic Spribe Action Button Colors */
.btn-style-bet {
  background: var(--spribe-green) !important;
  border: 1px solid var(--spribe-green-border) !important;
  color: #ffffff !important;
}

.btn-style-bet:hover {
  background: var(--spribe-green-hover) !important;
}

.btn-style-cancel {
  background: var(--spribe-cancel-red) !important;
  border: 1px solid var(--spribe-cancel-border) !important;
  color: #ffffff !important;
}

.btn-style-cancel:hover {
  background: var(--spribe-cancel-hover) !important;
}

.btn-style-cashout {
  background: var(--spribe-orange) !important;
  border: 1px solid var(--spribe-orange-border) !important;
  box-shadow: 0 0 16px rgba(208, 114, 6, 0.6) !important;
  color: #ffffff !important;
}

.btn-style-cashout:hover {
  background: var(--spribe-orange-hover) !important;
}

/* Auto Options Sub-deck */
.auto-config-deck {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.auto-row-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.auto-switch-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.custom-switch-check {
  display: none !important;
}

.custom-switch-slider {
  width: 32px !important;
  height: 18px !important;
  background: var(--spribe-input-bg) !important;
  border-radius: 12px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.custom-switch-slider::before {
  content: '' !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  top: 2px !important;
  left: 2px !important;
  transition: all 0.2s ease !important;
}

.custom-switch-check:checked + .custom-switch-slider {
  background: var(--spribe-green) !important;
}

.custom-switch-check:checked + .custom-switch-slider::before {
  transform: translateX(14px) !important;
}

.auto-txt {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

.auto-mult-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--spribe-input-bg) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

.auto-mult-val {
  width: 48px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
}

.mult-x {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--spribe-text-gray) !important;
}

/* ========================================================
   LIVE BETS TABBED FEED (SPRIBE SIDEBAR / FOOTER)
   ======================================================== */
.aviator-live-feed-card {
  background: var(--spribe-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

.feed-tabs-header {
  margin-bottom: 8px !important;
}

.feed-info-strip {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 6px 6px 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--spribe-text-gray) !important;
}

.feed-total-bets {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.badge-bets-count {
  background: #252528 !important;
  color: #ffffff !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.feed-round-info {
  font-size: 11px !important;
  color: var(--spribe-text-gray) !important;
}

.feed-round-info span:last-child {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

.feed-table-header {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr !important;
  padding: 6px 6px 4px 6px !important;
  font-size: 10.5px !important;
  color: var(--spribe-text-gray) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.feed-rows-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-top: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
  contain: content !important;
  will-change: scroll-position !important;
}

.feed-row-item {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr !important;
  align-items: center !important;
  padding: 4px 6px !important;
  background: var(--spribe-input-bg) !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  contain: layout style paint !important;
}

.feed-row-item.feed-row-won {
  background: rgba(40, 169, 9, 0.12) !important;
  border: 1px solid rgba(40, 169, 9, 0.3) !important;
}

.feed-row-item.feed-row-user {
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.feed-user-col {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.feed-avatar-mini {
  font-size: 12px !important;
}

.feed-mult-pill {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  display: inline-block !important;
  text-align: center !important;
}

/* Feed Top Sub-Filters */
.feed-top-subfilters {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.subfilter-types,
.subfilter-periods {
  display: flex !important;
  gap: 4px !important;
}

.subfilter-btn,
.period-btn {
  flex: 1 !important;
  background: var(--spribe-input-bg) !important;
  border: 1px solid #252528 !important;
  color: var(--spribe-text-gray) !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.subfilter-btn.active,
.period-btn.active {
  background: var(--spribe-button-secondary) !important;
  color: #ffffff !important;
  border-color: #36363c !important;
}

/* ========================================================
   AVIATOR MODALS (HOW TO PLAY & HISTORY)
   ======================================================== */
.aviator-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 16px !important;
  backdrop-filter: blur(4px) !important;
}

.aviator-modal-dialog {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9) !important;
}

.aviator-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: #2c2d30 !important;
  border-bottom: 1px solid #242424 !important;
}

.aviator-modal-close {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 24px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.aviator-modal-close:hover {
  color: #ffffff !important;
}

.aviator-modal-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #1a1a1a !important;
}

.rules-step-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-align: center !important;
  position: relative !important;
}

.rules-step-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: var(--spribe-red) !important;
  color: #fff !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

.rules-step-img {
  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 10px auto !important;
  display: block !important;
}

.rules-step-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.rules-step-desc {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  line-height: 1.4 !important;
}

.provably-fair-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

.history-grid-modal {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  padding: 4px !important;
}

/* Mobile Touch & Hardware Acceleration Optimizations */
.btn-bet-action,
.chip-preset-btn,
.bet-opt,
.sec-hand-btn,
.aviator-icon-btn,
.aviator-btn-help,
.btn-history-dropdown,
.spinner .buttons button,
.navigation-switcher .tab,
.subfilter-btn,
.period-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.feed-rows-container {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  contain: content !important;
}

/* Extra mobile compactness to prevent vertical scrolling */
@media (max-width: 480px) {
  .aviator-bet-card {
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }
  .first-row.bet-game {
    gap: 6px !important;
  }
  .bet-block {
    width: 125px !important;
  }
  .btn-bet-action {
    min-height: 62px !important;
  }
  .action-btn-headline {
    font-size: 19px !important;
  }
  .action-btn-subline {
    font-size: 12px !important;
  }
}