/* Roulette-specific styles */

/* Old wheel animations removed - using CodePen wheel now */

/* Number highlighting for winning number */
.number-cell.winning {
  animation: winningPulse 2s ease-in-out;
  box-shadow: 0 0 20px var(--gold);
  z-index: 10;
}

/* Bet chip display system */
.bet-chip {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  color: #333;
  font-size: 0.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  animation: chipPlace 0.3s ease-out;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.bet-chip.large {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
  border-width: 4px;
}

.bet-chip.small {
  width: 18px;
  height: 18px;
  font-size: 0.5rem;
  border-width: 2px;
}

@keyframes chipPlace {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Bet chip positioning for different bet types */
.number-cell {
  position: relative;
}

.outside-bet {
  position: relative;
}

/* Split bet chips - positioned between numbers */
.split-bet-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

/* Street bet chips - positioned on the street line */
.street-bet-chip {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

/* Corner bet chips - positioned at the corner intersection */
.corner-bet-chip {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 6;
}

/* Trio bet chips - positioned near zero */
.trio-bet-chip {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  z-index: 6;
}

/* Outside bet chips - positioned on the bet area */
.outside-bet-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

/* Call bet chips - positioned on the racetrack */
.call-bet-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

/* Bet chip horizontal layout */
.bet-chip-row {
  position: relative;
  overflow: visible; /* Allow chips to extend slightly if needed */
}

/* Individual chip positioning within rows */
.bet-chip-row .bet-chip {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* Responsive chip layout */
@media (max-width: 768px) {
  .bet-chip-row .bet-chip {
    width: 18px;
    height: 18px;
    font-size: 0.5rem;
  }
}

@media (max-width: 480px) {
  .bet-chip-row .bet-chip {
    width: 16px;
    height: 16px;
    font-size: 0.4rem;
  }
}

/* Bet chip hover effects */
.bet-chip:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* Player-colored chips with better design */
.bet-chip {
  /* Base chip design with player color border */
  border: 3px solid var(--player-color, #ff6b6b);
  background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
  color: #333;
}

.bet-chip.large {
  border-width: 4px;
}

.bet-chip.small {
  border-width: 2px;
}

/* Player color indicator styling */
.player-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-color-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--cell-bg);
  border: 1px solid var(--gold);
  border-radius: 6px;
  transition: all 0.2s ease;
  min-height: 44px;
}

.player-item:hover {
  background: var(--cell-selected);
  transform: translateX(2px);
}

/* Responsive bet chip sizing */
@media (max-width: 768px) {
  .bet-chip {
    width: 16px;
    height: 16px;
    font-size: 0.5rem;
  }
  
  .bet-chip.large {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }
  
  .bet-chip.small {
    width: 12px;
    height: 12px;
    font-size: 0.4rem;
  }
  
  .player-color-indicator {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .bet-chip {
    width: 14px;
    height: 14px;
    font-size: 0.4rem;
  }
  
  .bet-chip.large {
    width: 18px;
    height: 18px;
    font-size: 0.5rem;
  }
  
  .bet-chip.small {
    width: 10px;
    height: 10px;
    font-size: 0.3rem;
  }
}

@keyframes winningPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px var(--gold);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px var(--gold);
  }
}

/* Betting Controls - Removed fixed positioning to prevent layout conflicts */
/* Styles moved to layout.css for proper responsive behavior */

.bet-label {
  font-size: 1rem;
  color: var(--gold);
  font-weight: bold;
  text-align: center;
}

.bet-input-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

#bet-amount {
  padding: 12px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: var(--black);
  color: var(--white);
  font-size: 1.1rem;
  text-align: center;
  width: 120px;
}

#bet-amount:focus {
  outline: none;
  box-shadow: 0 0 10px var(--gold);
}

#place-bet {
  padding: 10px 20px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 80px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: var(--gold);
  color: var(--black);
}

#place-bet:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  background: #ffd700;
}

#place-bet:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#place-bet:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Chip Selector */
.chip-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  min-width: 50px;
  min-height: 50px;
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chip-btn:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.chip-btn.selected {
  background: var(--black);
  color: var(--gold);
  border-color: var(--white);
}

/* Betting Phase Indicators */
.betting-phase .number-cell,
.betting-phase .outside-bet {
  cursor: pointer;
}

.betting-phase .number-cell:hover,
.betting-phase .outside-bet:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--gold);
}

/* Bet Type Display */
.bet-type-display {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--gold);
  text-align: center;
  margin: 10px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid var(--gold);
}

/* Three-Section Betting Layout */
.betting-top-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Betting Controls Panel (Square under wheel) */
.betting-controls-panel {
  width: 350px;
  height: 368px;
  background: var(--felt-green);
  border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-medium);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 0 30px;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start;
}

/* Unified Betting Board (Combined Table + Racetrack) */
#unified-board.unified-betting-board {
  background: var(--felt-green);
  border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-medium);
  padding: 20px;
  display: block !important;
  position: relative;
  width: 100%;
  min-height: 400px;
}

/* Betting Table Section (Left) - Only apply to non-unified board */
.betting-table-section:not(#unified-board .betting-table-section) {
  grid-column: 1; /* First column in grid */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent overflow */
  width: 100%;
}

/* Ensure betting grid doesn't overflow */
.betting-table-section .betting-grid {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Override betting grid width for unified layout */
#unified-board .betting-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; /* allow shrinking */
  /* Scaling now handled by parent .betting-table-section */
}

#unified-board .roulette-table-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Scale up the betting grid by 10% */
/* Ensure left column can actually shrink and not force wrapping */
.betting-table-section { 
  min-width: 0; 
  transform: scale(1.1);
  transform-origin: top left;
}

/* Racetrack Section (Right) */
#unified-board .racetrack-section {
  position: absolute;
  top: 10px; /* move up */
  left: 110%; /* move further right to eliminate overlap */
  width: 280px; /* smaller width to fit better */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 300px;
  z-index: 999; /* ensure it's on top */
  transform: scale(1.15);
  transform-origin: top right;
}

.betting-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  flex-shrink: 0;
}

.betting-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  width: 100%;
}

.bet-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.bet-input-row input {
  width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
  font-size: 1rem;
  text-align: center;
}

.bet-input-row button {
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 140px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: var(--gold);
  color: var(--black);
}

.bet-input-row button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  background: #ffd700;
}

.bet-input-row button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bet-input-row button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.chip-selector {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  max-width: 300px;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Chip buttons now use unified .btn-chip class from base.css */

/* Unified Game Modal - Embedded in right panel */
.game-modal {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-top: 8px;
  animation: modalSlideIn 0.3s ease-out;
}

.game-modal-content {
  padding: 12px;
  text-align: center;
  color: #fff;
  background: transparent;
}

/* Game Status Section */
.game-status-section {
  display: block;
}

.game-status-section .phase-display {
  font-size: 1rem;
  font-weight: bold;
  color: var(--gold);
  margin-bottom: 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.game-status-section .timer-display {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

/* Bet Results Section */
.bet-results-section {
  display: block;
}

.bet-results-section.hidden {
  display: none;
}

.bet-results-section .winning-number-display {
  margin-bottom: 10px;
  padding: 8px;
  background: var(--felt-green);
  border-radius: 6px;
  border: 1px solid var(--gold);
}

.bet-results-section .result-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 4px;
  font-weight: bold;
}

.bet-results-section .winning-number-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.bet-results-section .all-bets-results {
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.bet-results-section .all-bets-list {
  max-height: 80px;
  overflow-y: auto;
  margin-top: 4px;
}

.bet-results-section .bet-item-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  margin-bottom: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  font-size: 0.8rem;
}

.bet-results-section .bet-item-result.win {
  color: var(--win);
  background: rgba(46, 125, 50, 0.2);
}

.bet-results-section .bet-item-result.loss {
  color: var(--lose);
  background: rgba(198, 40, 40, 0.2);
}

.bet-results-section .bet-outcome,
.bet-results-section .payout-display {
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.bet-results-section .bet-details,
.bet-results-section .payout-amount {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--gold);
}

.bet-results-section .payout-amount.win {
  color: var(--win);
}

.bet-results-section .payout-amount.loss {
  color: var(--lose);
}

.bet-results-section .payout-amount.push {
  color: var(--push);
}

/* Modal Animation */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide modal when not needed */
.game-modal.hidden {
  display: none;
}

/* Responsive modal styles for embedded layout */
@media (max-width: 768px) {
  .game-modal {
    margin-top: 8px;
  }
  
  .game-modal-content {
    padding: 10px;
  }
  
  .game-status-section .timer-display {
    font-size: 1.2rem;
    padding: 6px 10px;
  }
  
  .bet-results-section .winning-number-value {
    font-size: 1.2rem;
  }
  
  .bet-results-section .bet-details,
  .bet-results-section .payout-amount {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .game-modal {
    margin-top: 6px;
  }
  
  .game-modal-content {
    padding: 8px;
  }
  
  .game-status-section .phase-display {
    font-size: 0.9rem;
  }
  
  .game-status-section .timer-display {
    font-size: 1.1rem;
    padding: 5px 8px;
  }
  
  .bet-results-section .winning-number-value {
    font-size: 1.1rem;
  }
  
  .bet-results-section .result-label {
    font-size: 0.7rem;
  }
}

/* Bet Selection Visual Feedback */
.number-cell.selected,
.outside-bet.selected {
  background: var(--cell-selected) !important;
  border: 2px solid var(--gold) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: scale(1.05);
}

.number-cell:hover,
.outside-bet:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.spinning-phase .number-cell,
.spinning-phase .outside-bet {
  cursor: not-allowed;
  opacity: 0.7;
}

.results-phase .number-cell,
.results-phase .outside-bet {
  cursor: not-allowed;
}

/* Game Phase Styles - Moved to layout.css for proper responsive behavior */

/* Timer Styles */
.timer.warning {
  color: #ff6b6b;
  animation: timerBlink 1s infinite;
}

@keyframes timerBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

.timer.critical {
  color: var(--roulette-red);
  animation: timerCritical 0.5s infinite;
}

@keyframes timerCritical {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Betting History */
.bet-history {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 10px;
  background: rgba(0,0,0,0.3);
}

.bet-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #333;
  font-size: 0.9rem;
}

.bet-history-item:last-child {
  border-bottom: none;
}

.bet-history-item.win {
  color: var(--win);
}

.bet-history-item.lose {
  color: var(--lose);
}

/* Betting Board within Unified Interface */
.unified-betting-interface .betting-board {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Racetrack Container Wrapper */
.racetrack-container-wrapper {
  margin-top: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Unified Betting Board Racetrack Styles */
#unified-board .racetrack-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
}

/* Prevent left column from forcing wrap */
#unified-board .betting-table-section { 
  min-width: 0; 
  width: 60%; /* scale down the container to 60% width */
  padding-right: 0px;
} /* scale down the table container */
#unified-board .numbers-grid { min-width: 0; }
#unified-board .main-numbers-section { min-width: 0; }

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.section-header h3 {
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 5px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Racetrack Section - Only apply to non-unified board */
.racetrack-section:not(#unified-board .racetrack-section) {
  padding: 15px;
  background: var(--felt-green);
  border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: 
    0 0 0 2px #b8860b,
    0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 25px 25px;
  background-position: 0 0, 12px 12px;
}

/* Removed yellow line from racetrack section */

@keyframes shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.racetrack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#unified-board .racetrack-oval {
  position: relative;
  width: 250px;
  height: 250px;
  border: 6px solid var(--gold);
  border-radius: 50%;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #2c2c2c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 0 0 2px #b8860b;
  margin: 0 auto;
}

.racetrack-oval::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 12%;
  right: 12%;
  bottom: 12%;
  background: rgba(0,0,0,0.65);
  border: 1px solid #a0a0a0;
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 0px 0px 0px 2px #a0a0a0;
}

.racetrack-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  background: #2c2c2c;
  border: 3px solid #a0a0a0;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center-label {
  color: var(--gold);
  font-size: 0.6rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0;
}

/* Racetrack Numbers - Positioned around the oval perimeter */
.racetrack-number {
  position: absolute;
  width: 20px;
  height: 20px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  margin-top: -10px;
  margin-left: -10px;
}

.racetrack-number.red {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
  border-color: #ef4444;
}

.racetrack-number.black {
  background: linear-gradient(145deg, #1f2937, #111827);
  border-color: #374151;
}

.racetrack-number.green {
  background: linear-gradient(145deg, #059669, #047857);
  border-color: #10b981;
}

.racetrack-number:hover {
  background: rgba(255, 215, 0, 0.3);
  transform: scale(1.2);
  border-color: var(--gold);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  z-index: 4;
}

.racetrack-number.selected {
  background: rgba(255, 215, 0, 0.6);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  transform: scale(1.1);
}

/* Position numbers around the circular perimeter using mathematical positioning */
/* Circle dimensions: 250px diameter, so radius = 125px, moved 20px inward = 105px for better spacing */
/* Using the same mathematical approach as the main roulette wheel */
.racetrack-number:nth-child(2) { transform: rotate(0deg) translateX(105px) rotate(0deg); }     /* 10 */
.racetrack-number:nth-child(3) { transform: rotate(9.73deg) translateX(105px) rotate(-9.73deg); }  /* 23 */
.racetrack-number:nth-child(4) { transform: rotate(19.46deg) translateX(105px) rotate(-19.46deg); } /* 5 */
.racetrack-number:nth-child(5) { transform: rotate(29.19deg) translateX(105px) rotate(-29.19deg); } /* 24 */
.racetrack-number:nth-child(6) { transform: rotate(38.92deg) translateX(105px) rotate(-38.92deg); } /* 16 */
.racetrack-number:nth-child(7) { transform: rotate(48.65deg) translateX(105px) rotate(-48.65deg); } /* 33 */
.racetrack-number:nth-child(8) { transform: rotate(58.38deg) translateX(105px) rotate(-58.38deg); } /* 1 */
.racetrack-number:nth-child(9) { transform: rotate(68.11deg) translateX(105px) rotate(-68.11deg); } /* 20 */
.racetrack-number:nth-child(10) { transform: rotate(77.84deg) translateX(105px) rotate(-77.84deg); } /* 14 */
.racetrack-number:nth-child(11) { transform: rotate(87.57deg) translateX(105px) rotate(-87.57deg); } /* 31 */
.racetrack-number:nth-child(12) { transform: rotate(97.3deg) translateX(105px) rotate(-97.3deg); } /* 9 */
.racetrack-number:nth-child(13) { transform: rotate(107.03deg) translateX(105px) rotate(-107.03deg); } /* 22 */
.racetrack-number:nth-child(14) { transform: rotate(116.76deg) translateX(105px) rotate(-116.76deg); } /* 18 */
.racetrack-number:nth-child(15) { transform: rotate(126.49deg) translateX(105px) rotate(-126.49deg); } /* 29 */
.racetrack-number:nth-child(16) { transform: rotate(136.22deg) translateX(105px) rotate(-136.22deg); } /* 7 */
.racetrack-number:nth-child(17) { transform: rotate(145.95deg) translateX(105px) rotate(-145.95deg); } /* 28 */
.racetrack-number:nth-child(18) { transform: rotate(155.68deg) translateX(105px) rotate(-155.68deg); } /* 12 */
.racetrack-number:nth-child(19) { transform: rotate(165.41deg) translateX(105px) rotate(-165.41deg); } /* 35 */
.racetrack-number:nth-child(20) { transform: rotate(175.14deg) translateX(105px) rotate(-175.14deg); } /* 3 */
.racetrack-number:nth-child(21) { transform: rotate(184.87deg) translateX(105px) rotate(-184.87deg); } /* 26 */
.racetrack-number:nth-child(22) { transform: rotate(194.6deg) translateX(105px) rotate(-194.6deg); } /* 0 */
.racetrack-number:nth-child(23) { transform: rotate(204.33deg) translateX(105px) rotate(-204.33deg); } /* 32 */
.racetrack-number:nth-child(24) { transform: rotate(214.06deg) translateX(105px) rotate(-214.06deg); } /* 15 */
.racetrack-number:nth-child(25) { transform: rotate(223.79deg) translateX(105px) rotate(-223.79deg); } /* 19 */
.racetrack-number:nth-child(26) { transform: rotate(233.52deg) translateX(105px) rotate(-233.52deg); } /* 4 */
.racetrack-number:nth-child(27) { transform: rotate(243.25deg) translateX(105px) rotate(-243.25deg); } /* 21 */
.racetrack-number:nth-child(28) { transform: rotate(252.98deg) translateX(105px) rotate(-252.98deg); } /* 2 */
.racetrack-number:nth-child(29) { transform: rotate(262.71deg) translateX(105px) rotate(-262.71deg); } /* 25 */
.racetrack-number:nth-child(30) { transform: rotate(272.44deg) translateX(105px) rotate(-272.44deg); } /* 17 */
.racetrack-number:nth-child(31) { transform: rotate(282.17deg) translateX(105px) rotate(-282.17deg); } /* 34 */
.racetrack-number:nth-child(32) { transform: rotate(291.9deg) translateX(105px) rotate(-291.9deg); } /* 6 */
.racetrack-number:nth-child(33) { transform: rotate(301.63deg) translateX(105px) rotate(-301.63deg); } /* 27 */
.racetrack-number:nth-child(34) { transform: rotate(311.36deg) translateX(105px) rotate(-311.36deg); } /* 13 */
.racetrack-number:nth-child(35) { transform: rotate(321.09deg) translateX(105px) rotate(-321.09deg); } /* 36 */
.racetrack-number:nth-child(36) { transform: rotate(330.82deg) translateX(105px) rotate(-330.82deg); } /* 11 */
.racetrack-number:nth-child(37) { transform: rotate(340.55deg) translateX(105px) rotate(-340.55deg); } /* 30 */
.racetrack-number:nth-child(38) { transform: rotate(350.28deg) translateX(105px) rotate(-350.28deg); } /* 8 */

/* Call Bet Sections - Left side of racetrack, vertical stack */
.racetrack-call-bets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80px;
  margin-right: 15px;
  flex-shrink: 0;
}

.call-bet-section {
  width: 80px;
  height: 50px;
  background: var(--cell-bg);
  border: 1px solid var(--gold);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.call-bet-section.tier {
  background: var(--roulette-red);
  color: white;
  border-color: #dc143c;
}

.call-bet-section.orphelins {
  background: var(--roulette-black);
  color: white;
  border-color: #333;
}

.call-bet-section.voisins {
  background: var(--roulette-green);
  color: white;
  border-color: #008800;
}

.call-bet-section.zero {
  background: var(--roulette-green);
  color: white;
  border-color: #008800;
}

.call-bet-section.jeu-zero {
  background: var(--roulette-green);
  color: white;
  border-color: #008800;
}

.call-bet-section:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  border-color: var(--gold);
}

.call-bet-section.selected {
  background: var(--cell-selected) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  border-color: var(--gold) !important;
  transform: scale(1.05);
}

/* Call bet icon removed - no longer needed */

.call-bet-label {
  color: inherit;
  font-size: 0.6rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}

.call-bet-payout {
  color: var(--gold);
  font-size: 0.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Tablet responsiveness for combined betting layout */
/* Ensure side-by-side layout for screens wider than 480px */
@media (min-width: 481px) {
  #unified-board.unified-betting-board {
    display: block !important; /* keep our absolute positioning approach */
  }
}

@media (max-width: 1200px) {
  .betting-table-section .betting-grid {
    transform: scale(0.8);
  }
  
  #unified-board .racetrack-container {
    transform: scale(0.8);
  }
}

/* Removed conflicting media query */

@media (max-width: 480px) {
  .betting-controls-panel {
    padding: 15px;
  }
  
  #unified-board.unified-betting-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 15px;
    padding: 15px;
  }
  
  .betting-table-section {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  
  #unified-board .racetrack-section {
    grid-column: 1;
    grid-row: 2;
    min-height: 300px;
    width: 100%;
  }
  
  .racetrack-oval {
    width: 300px;
    height: 300px;
  }
  
  .racetrack-number {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    margin-top: -10px;
    margin-left: -10px;
  }
  
  .racetrack-center {
    width: 60px;
    height: 60px;
  }
  
  .center-label {
    font-size: 0.5rem;
  }
  
  .betting-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .chip-btn {
    width: 35px;
    height: 35px;
    font-size: 0.7rem;
  }
}

/* Mobile responsiveness for racetrack */
@media (max-width: 768px) {
  .racetrack-container-wrapper {
    margin-top: 12px;
    padding: 0 10px;
  }
  
  .racetrack-section {
    padding: 12px;
  }
  
  .section-header h3 {
    font-size: 1.2rem;
  }
  
  .section-subtitle {
    font-size: 0.8rem;
  }
  
  .racetrack-oval {
    width: 300px;
    height: 300px;
  }
  
  .racetrack-number {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    margin-top: -10px;
    margin-left: -10px;
  }
  
  .racetrack-center {
    width: 60px;
    height: 60px;
  }
  
  .center-label {
    font-size: 0.5rem;
  }
  
  /* Adjust number positions for mobile - circular positioning */
  /* Mobile circle: 300px diameter, so radius = 150px, moved 24px inward = 126px (proportional to 32px on 400px) */
  .racetrack-number:nth-child(2) { transform: rotate(0deg) translateX(126px) rotate(0deg); }     /* 10 */
  .racetrack-number:nth-child(3) { transform: rotate(9.73deg) translateX(126px) rotate(-9.73deg); }  /* 23 */
  .racetrack-number:nth-child(4) { transform: rotate(19.46deg) translateX(126px) rotate(-19.46deg); } /* 5 */
  .racetrack-number:nth-child(5) { transform: rotate(29.19deg) translateX(126px) rotate(-29.19deg); } /* 24 */
  .racetrack-number:nth-child(6) { transform: rotate(38.92deg) translateX(126px) rotate(-38.92deg); } /* 16 */
  .racetrack-number:nth-child(7) { transform: rotate(48.65deg) translateX(126px) rotate(-48.65deg); } /* 33 */
  .racetrack-number:nth-child(8) { transform: rotate(58.38deg) translateX(126px) rotate(-58.38deg); } /* 1 */
  .racetrack-number:nth-child(9) { transform: rotate(68.11deg) translateX(126px) rotate(-68.11deg); } /* 20 */
  .racetrack-number:nth-child(10) { transform: rotate(77.84deg) translateX(126px) rotate(-77.84deg); } /* 14 */
  .racetrack-number:nth-child(11) { transform: rotate(87.57deg) translateX(126px) rotate(-87.57deg); } /* 31 */
  .racetrack-number:nth-child(12) { transform: rotate(97.3deg) translateX(126px) rotate(-97.3deg); } /* 9 */
  .racetrack-number:nth-child(13) { transform: rotate(107.03deg) translateX(126px) rotate(-107.03deg); } /* 22 */
  .racetrack-number:nth-child(14) { transform: rotate(116.76deg) translateX(126px) rotate(-116.76deg); } /* 18 */
  .racetrack-number:nth-child(15) { transform: rotate(126.49deg) translateX(126px) rotate(-126.49deg); } /* 29 */
  .racetrack-number:nth-child(16) { transform: rotate(136.22deg) translateX(126px) rotate(-136.22deg); } /* 7 */
  .racetrack-number:nth-child(17) { transform: rotate(145.95deg) translateX(126px) rotate(-145.95deg); } /* 28 */
  .racetrack-number:nth-child(18) { transform: rotate(155.68deg) translateX(126px) rotate(-155.68deg); } /* 12 */
  .racetrack-number:nth-child(19) { transform: rotate(165.41deg) translateX(126px) rotate(-165.41deg); } /* 35 */
  .racetrack-number:nth-child(20) { transform: rotate(175.14deg) translateX(126px) rotate(-175.14deg); } /* 3 */
  .racetrack-number:nth-child(21) { transform: rotate(184.87deg) translateX(126px) rotate(-184.87deg); } /* 26 */
  .racetrack-number:nth-child(22) { transform: rotate(194.6deg) translateX(126px) rotate(-194.6deg); } /* 0 */
  .racetrack-number:nth-child(23) { transform: rotate(204.33deg) translateX(126px) rotate(-204.33deg); } /* 32 */
  .racetrack-number:nth-child(24) { transform: rotate(214.06deg) translateX(126px) rotate(-214.06deg); } /* 15 */
  .racetrack-number:nth-child(25) { transform: rotate(223.79deg) translateX(126px) rotate(-223.79deg); } /* 19 */
  .racetrack-number:nth-child(26) { transform: rotate(233.52deg) translateX(126px) rotate(-233.52deg); } /* 4 */
  .racetrack-number:nth-child(27) { transform: rotate(243.25deg) translateX(126px) rotate(-243.25deg); } /* 21 */
  .racetrack-number:nth-child(28) { transform: rotate(252.98deg) translateX(126px) rotate(-252.98deg); } /* 2 */
  .racetrack-number:nth-child(29) { transform: rotate(262.71deg) translateX(126px) rotate(-262.71deg); } /* 25 */
  .racetrack-number:nth-child(30) { transform: rotate(272.44deg) translateX(126px) rotate(-272.44deg); } /* 17 */
  .racetrack-number:nth-child(31) { transform: rotate(282.17deg) translateX(126px) rotate(-282.17deg); } /* 34 */
  .racetrack-number:nth-child(32) { transform: rotate(291.9deg) translateX(126px) rotate(-291.9deg); } /* 6 */
  .racetrack-number:nth-child(33) { transform: rotate(301.63deg) translateX(126px) rotate(-301.63deg); } /* 27 */
  .racetrack-number:nth-child(34) { transform: rotate(311.36deg) translateX(126px) rotate(-311.36deg); } /* 13 */
  .racetrack-number:nth-child(35) { transform: rotate(321.09deg) translateX(126px) rotate(-321.09deg); } /* 36 */
  .racetrack-number:nth-child(36) { transform: rotate(330.82deg) translateX(126px) rotate(-330.82deg); } /* 11 */
  .racetrack-number:nth-child(37) { transform: rotate(340.55deg) translateX(126px) rotate(-340.55deg); } /* 30 */
  .racetrack-number:nth-child(38) { transform: rotate(350.28deg) translateX(126px) rotate(-350.28deg); } /* 8 */
  
  .racetrack-call-bets {
    max-width: 350px;
    gap: 8px;
  }
  
  .call-bet-section {
    height: 50px;
  }
  
  /* Call bet icon removed */
  
  .call-bet-label {
    font-size: 0.6rem;
  }
  
  .call-bet-payout {
    font-size: 0.5rem;
    padding: 1px 4px;
  }
}

@media (max-width: 480px) {
  .betting-controls-panel {
    padding: 12px;
  }
  
  .unified-betting-board {
    padding: 12px;
    gap: 12px;
  }
  
  .unified-betting-board .racetrack-section {
    min-height: 250px;
  }
  
  .racetrack-oval {
    width: 250px;
    height: 250px;
  }
  
  .racetrack-number {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
    margin-top: -9px;
    margin-left: -9px;
  }
  
  .racetrack-center {
    width: 50px;
    height: 50px;
  }
  
  .center-label {
    font-size: 0.45rem;
  }
  
  .bet-input-row input {
    width: 100px;
    font-size: 0.8rem;
  }
  
  .chip-btn {
    width: 30px;
    height: 30px;
    font-size: 0.6rem;
  }
  
  .racetrack-container-wrapper {
    margin-top: 10px;
    padding: 0 5px;
  }
  
  .racetrack-section {
    padding: 10px;
  }
  
  .racetrack-oval {
    width: 250px;
    height: 250px;
  }
  
  .racetrack-number {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
    margin-top: -9px;
    margin-left: -9px;
  }
  
  .racetrack-center {
    width: 50px;
    height: 50px;
  }
  
  .center-label {
    font-size: 0.45rem;
  }
  
  /* Adjust number positions for small mobile - circular positioning */
  /* Small mobile circle: 250px diameter, so radius = 125px, moved 20px inward = 105px (proportional to 32px on 400px) */
  .racetrack-number:nth-child(2) { transform: rotate(0deg) translateX(105px) rotate(0deg); }     /* 10 */
  .racetrack-number:nth-child(3) { transform: rotate(9.73deg) translateX(105px) rotate(-9.73deg); }  /* 23 */
  .racetrack-number:nth-child(4) { transform: rotate(19.46deg) translateX(105px) rotate(-19.46deg); } /* 5 */
  .racetrack-number:nth-child(5) { transform: rotate(29.19deg) translateX(105px) rotate(-29.19deg); } /* 24 */
  .racetrack-number:nth-child(6) { transform: rotate(38.92deg) translateX(105px) rotate(-38.92deg); } /* 16 */
  .racetrack-number:nth-child(7) { transform: rotate(48.65deg) translateX(105px) rotate(-48.65deg); } /* 33 */
  .racetrack-number:nth-child(8) { transform: rotate(58.38deg) translateX(105px) rotate(-58.38deg); } /* 1 */
  .racetrack-number:nth-child(9) { transform: rotate(68.11deg) translateX(105px) rotate(-68.11deg); } /* 20 */
  .racetrack-number:nth-child(10) { transform: rotate(77.84deg) translateX(105px) rotate(-77.84deg); } /* 14 */
  .racetrack-number:nth-child(11) { transform: rotate(87.57deg) translateX(105px) rotate(-87.57deg); } /* 31 */
  .racetrack-number:nth-child(12) { transform: rotate(97.3deg) translateX(105px) rotate(-97.3deg); } /* 9 */
  .racetrack-number:nth-child(13) { transform: rotate(107.03deg) translateX(105px) rotate(-107.03deg); } /* 22 */
  .racetrack-number:nth-child(14) { transform: rotate(116.76deg) translateX(105px) rotate(-116.76deg); } /* 18 */
  .racetrack-number:nth-child(15) { transform: rotate(126.49deg) translateX(105px) rotate(-126.49deg); } /* 29 */
  .racetrack-number:nth-child(16) { transform: rotate(136.22deg) translateX(105px) rotate(-136.22deg); } /* 7 */
  .racetrack-number:nth-child(17) { transform: rotate(145.95deg) translateX(105px) rotate(-145.95deg); } /* 28 */
  .racetrack-number:nth-child(18) { transform: rotate(155.68deg) translateX(105px) rotate(-155.68deg); } /* 12 */
  .racetrack-number:nth-child(19) { transform: rotate(165.41deg) translateX(105px) rotate(-165.41deg); } /* 35 */
  .racetrack-number:nth-child(20) { transform: rotate(175.14deg) translateX(105px) rotate(-175.14deg); } /* 3 */
  .racetrack-number:nth-child(21) { transform: rotate(184.87deg) translateX(105px) rotate(-184.87deg); } /* 26 */
  .racetrack-number:nth-child(22) { transform: rotate(194.6deg) translateX(105px) rotate(-194.6deg); } /* 0 */
  .racetrack-number:nth-child(23) { transform: rotate(204.33deg) translateX(105px) rotate(-204.33deg); } /* 32 */
  .racetrack-number:nth-child(24) { transform: rotate(214.06deg) translateX(105px) rotate(-214.06deg); } /* 15 */
  .racetrack-number:nth-child(25) { transform: rotate(223.79deg) translateX(105px) rotate(-223.79deg); } /* 19 */
  .racetrack-number:nth-child(26) { transform: rotate(233.52deg) translateX(105px) rotate(-233.52deg); } /* 4 */
  .racetrack-number:nth-child(27) { transform: rotate(243.25deg) translateX(105px) rotate(-243.25deg); } /* 21 */
  .racetrack-number:nth-child(28) { transform: rotate(252.98deg) translateX(105px) rotate(-252.98deg); } /* 2 */
  .racetrack-number:nth-child(29) { transform: rotate(262.71deg) translateX(105px) rotate(-262.71deg); } /* 25 */
  .racetrack-number:nth-child(30) { transform: rotate(272.44deg) translateX(105px) rotate(-272.44deg); } /* 17 */
  .racetrack-number:nth-child(31) { transform: rotate(282.17deg) translateX(105px) rotate(-282.17deg); } /* 34 */
  .racetrack-number:nth-child(32) { transform: rotate(291.9deg) translateX(105px) rotate(-291.9deg); } /* 6 */
  .racetrack-number:nth-child(33) { transform: rotate(301.63deg) translateX(105px) rotate(-301.63deg); } /* 27 */
  .racetrack-number:nth-child(34) { transform: rotate(311.36deg) translateX(105px) rotate(-311.36deg); } /* 13 */
  .racetrack-number:nth-child(35) { transform: rotate(321.09deg) translateX(105px) rotate(-321.09deg); } /* 36 */
  .racetrack-number:nth-child(36) { transform: rotate(330.82deg) translateX(105px) rotate(-330.82deg); } /* 11 */
  .racetrack-number:nth-child(37) { transform: rotate(340.55deg) translateX(105px) rotate(-340.55deg); } /* 30 */
  .racetrack-number:nth-child(38) { transform: rotate(350.28deg) translateX(105px) rotate(-350.28deg); } /* 8 */
  
  .racetrack-call-bets {
    max-width: 280px;
    gap: 6px;
  }
  
  .call-bet-section {
    height: 45px;
  }
  
  /* Call bet icon removed */
  
  .call-bet-label {
    font-size: 0.55rem;
  }
  
  .call-bet-payout {
    font-size: 0.45rem;
  }
}


/* Mobile Responsive - Betting controls styles moved to layout.css */
@media (max-width: 768px) {
  .bet-input-row {
    flex-direction: column;
    gap: 10px;
  }
  
  #bet-amount {
    width: 100%;
    max-width: 200px;
  }
  
  .chip-selector {
    gap: 8px;
  }
  
  .chip-btn {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .bet-label {
    font-size: 0.9rem;
  }
  
  #bet-amount {
    font-size: 1rem;
    padding: 10px;
  }
  
  #place-bet {
    padding: 10px 20px;
    font-size: 1rem;
  }
}