/* Only add minimal styles that don't conflict with existing ones */

/* Fix for horse sprites */
.horse-sprite {
  display: block;
  margin: 0 auto !important;
}

/* Quick bet styling */
.quick-bet {
  width: 100%;
  margin: 8px 0;
}

.quick-bet .bet-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.quick-bet .bet-buttons .bet-btn {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
}

.quick-bet .bet-buttons .bet-btn:hover:not(:disabled) {
  background: #ffffff;
}

.quick-bet .bet-buttons .bet-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.wallet-status {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
  text-align: center;
}

/* Notifications */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #FFD700;
  z-index: 1000;
  max-width: 300px;
  font-size: 14px;
  font-weight: bold;
}

.notification.success {
  color: #00FF88; /* Green text for success */
}

.notification.error {
  color: #FF0000; /* Red text for error */
}

.notification.info {
  color: #FFD700; /* Yellow text for info */
}

.horse-cards-container{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:auto;gap:16px;width:100%;padding:8px;align-items:start;}
.horse-card{display:flex;flex-direction:column;margin-bottom:16px;}
@media (max-width:1400px){.horse-cards-container{grid-template-columns:repeat(4,1fr);max-height:calc(100vh - 200px);overflow-y:auto;}}
@media (max-width:768px){.horse-cards-container{grid-template-columns:repeat(2,1fr);max-height:calc(100vh - 160px);overflow-y:auto;gap:12px;}}

/* prevent game absolute positioning inside grid */
.horse-cards-container .horse-card{position:static !important;width:100%;margin-bottom:16px;}

/* cancel absolute positioning */
.horse-cards-container .horse-card,
.horse-cards-container .horse-sprite{position:static !important;}
.horse-cards-container .horse-card{min-height:360px;margin-bottom:16px;width:100%;}