/* General styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: #1a202c;
  color: #e2e8f0;
}

.game-container {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background-color: #2d3748;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-top: 4px solid #0066b3; /* Capitec blue border */
}

/* View Transition Styles */
#location { 
  view-transition-name: current-location; 
}

@keyframes slide-from-right { 
  from { transform: translateX(30px); opacity: 0; } 
}

@keyframes slide-to-left { 
  to { transform: translateX(-30px); opacity: 0; } 
}

::view-transition-old(current-location) { 
  animation: 250ms ease-out both slide-to-left; 
}

::view-transition-new(current-location) { 
  animation: 250ms ease-in both slide-from-right; 
}

@supports not (view-transition-name: none) {
  #location { 
    transition: opacity 0.3s ease-in-out; 
  }
}

/* Form input styles */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { 
  -moz-appearance: textfield; 
}

/* Price color indicators */
.price-profit {
  color: #00b140; /* Capitec green */
}

.price-loss {
  color: #fc8181;
}

.price-neutral {
  color: #e2e8f0;
}

.avg-price-display { 
  color: #a0aec0; 
  font-size: 0.875rem; 
}

/* Event indicators */
.event-indicator { 
  font-size: 0.8em; 
  margin-left: 0.25rem; 
  display: inline-block; 
  vertical-align: super; 
  line-height: 1; 
}

.event-surge { 
  color: #f6ad55; 
} 

.event-crash { 
  color: #63b3ed; 
}

/* Action states */
.action-disabled {
  opacity: 0.5;
}

/* Freshness indicators */
.freshness-indicator {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
}

.freshness-dot {
  display: inline-block;
  margin-right: 0.25rem;
}

.freshness-good {
  color: #00b140; /* Capitec green */
  background-color: rgba(0, 177, 64, 0.1);
}

.freshness-medium {
  color: #f6ad55;
  background-color: rgba(246, 173, 85, 0.1);
}

.freshness-bad {
  color: #fc8181;
  background-color: rgba(252, 129, 129, 0.1);
  pointer-events: none;
}

/* Animation for key interactions */
@keyframes pulse-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes slide-in-right {
  0% { transform: translateX(20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-left {
  0% { transform: translateX(-20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animate-pulse-scale {
  animation: pulse-scale 0.3s ease-in-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-slide-in-left {
  animation: slide-in-left 0.3s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

svg {
  color: inherit;
  min-width: 1rem;
  min-height: 1rem;
}