:root {
  --primary: #6c5ce7;
  --secondary: #a29bfe;
  --dark: #2d3436;
  --light: #ffffff;  /* Changed to pure white */
  --danger: #d63031;
  --success: #00b894;
  --warning: #fdcb6e;
}

html, body {
  margin:0; padding:0; height:100%;
  background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
  color:var(--light);
  font-family:'Press Start 2P', cursive; 
  font-size:12px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Added shadow to make white text more readable */
}

/* Force common elements with black text to be white */
p, span, div, label, input, textarea, select, option, td, th, li, a {
  color: var(--light) !important;
}

/* Bootstrap and form elements */
.form-control, .form-select, .form-check-label, .btn {
  color: var(--light) !important;
}

/* Table elements */
table, tbody, thead, tr, td, th {
  color: var(--light) !important;
}

/* List elements */
ul, ol, li {
  color: var(--light) !important;
}

/* Bank and stash house specific elements */
.text-muted, .small {
  color: var(--light) !important;
}

#bank-balance, #cash-on-hand, #bank-services {
  color: var(--light) !important;
}

#stash-house-status, #stash-house-actions, #stash-inventory {
  color: var(--light) !important;
}

#clinic-services {
  color: var(--light) !important;
}

/* Bootstrap utility classes override - but preserve profit/loss colors in inventory */
.text-info, .text-warning, .text-primary, .text-secondary {
  color: var(--light) !important;
}

/* Preserve profit/loss colors in inventory */
#inventory-list .text-success {
  color: var(--success) !important;
}

#inventory-list .text-danger {
  color: var(--danger) !important;
}

/* For other contexts, make these white */
.text-success:not(#inventory-list .text-success) {
  color: var(--light) !important;
}

.text-danger:not(#inventory-list .text-danger) {
  color: var(--light) !important;
}

/* Only main game UI should have hidden overflow */
#game-ui {
  overflow: hidden;
}

/* Intro Screen */
#intro-screen {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:1000;
  animation: fadeIn 0.5s ease-out;
}

#intro-screen h1 {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(108, 92, 231, 0.7);
  margin-bottom: 2rem;
  font-size: 2.5rem;
  animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {
  0% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(108, 92, 231, 0.7);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 20px rgba(108, 92, 231, 0.9), 0 0 30px rgba(108, 92, 231, 0.6);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(108, 92, 231, 0.7);
  }
}

#intro-screen input {
  background: rgba(255,255,255,0.1) !important;
  color: var(--light) !important;
  border: 2px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-size: 1rem !important;
  transition: all 0.3s ease;
}

#intro-screen input:focus {
  box-shadow: 0 0 10px var(--primary);
}

#intro-screen label {
  color: var(--secondary);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

#avatar-selection {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

#intro-screen img {
  width: 9rem; /* Increased from 6rem to 9rem */
  height: 9rem; /* Increased from 6rem to 9rem */
  border: 4px solid transparent; /* Increased border thickness */
  border-radius: 10px; /* Increased border radius */
  cursor: pointer;
  transition: all 0.3s ease;
  image-rendering: pixelated;
}

#intro-screen img:hover {
  border-color: var(--primary);
}

#intro-screen img.selected {
  border-color: var(--success);
  box-shadow: 0 0 15px var(--success);
}

/* Removed previous backstory styles as they're now inline in the HTML */

#backstory-screen-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--light);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#btn-start {
  background: var(--primary);
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 8px;
  margin-top: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#btn-start:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(108, 92, 231, 0.3);
}

/* Header & Footer */
header.header, footer.footer {
  position:fixed; 
  left:0; 
  right:0; 
  height:110px; /* Increased from 80px to 110px to fit even larger avatar */
  background: rgba(30, 30, 46, 0.9);
  display:flex; 
  align-items:center; 
  padding:0 20px; 
  z-index:100;
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

header.header { 
  top:0; 
  border-bottom: 1px solid rgba(108, 92, 231, 0.3);
}

footer.footer { 
  bottom:0; 
  height: auto;
  min-height: 80px;
  padding: 10px 20px;
  justify-content:space-between;
  border-top: 1px solid rgba(108, 92, 231, 0.3);
}

/* Main UI */
#game-ui {
  /* Hidden until the game starts (game.js flips this to flex). Layout is
     normal document flow now -- see chicago.css. */
  display:none;
}







/* Mobile optimization - DISABLED to maintain layout */
@media (max-width: 768px) {
  /* Keep original desktop layout for consistency */
}
  
  footer.footer button, 
  footer.footer select {
    margin: 5px;
    flex-grow: 1;
    min-width: 120px;
  }
}

.card, 
.card-body,
.list-group,
.card-header { 
  background: #404040 !important; 
  background-color: #404040 !important;
  border: none !important; 
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Force all Bootstrap card variants to be dark */
.card-default,
.card-light,
.card-white,
.bg-white,
.bg-light,
h3,
h3.card-title {
  background: #404040 !important; 
  background-color: #404040 !important;
}

/* Ensure the entire card body area is dark */
.card .card-body,
.card .card-body *,
.card h3 {
  background: #404040 !important; 
  background-color: #404040 !important;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.card-title {
  color: #ffffff !important;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 8px;
  margin-bottom: 12px;
  background: #404040 !important;
  background-color: #404040 !important;
}

.list-group-item {
  background: #404040 !important;
  background-color: #404040 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.2);
  font-size: 0.8rem;
  padding: 10px 15px;
}

/* Styling for drug names in the market */
.drug-name, 
.portfolio-label {
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  color: #ffffff;
  letter-spacing: 0.5px;
}

.portfolio-value {
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}

/* Enhancement for inventory items display */
#inventory-list .list-group-item,
#location-display,
#cash-display {
  font-size: 1.1rem !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
  letter-spacing: 0.5px;
}

#inventory-list .list-group-item strong {
  font-weight: bold;
  color: #ffffff;
}

/* Additional styling for the whole portfolio section */
#location-display {
  color: #a29bfe !important;
  font-weight: bold;
}

#cash-display {
  color: #00b894 !important;
  font-weight: bold;
}

/* Two-column portfolio card styling */
.card-subtitle {
  color: var(--primary) !important;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(108, 92, 231, 0.3);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.card-title {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.5);
}

.trade-row { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:8px; 
  font-size:0.8rem;
  padding: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  color: var(--light); /* Explicitly set text color to white */
}

.trade-row span { 
  flex:1; 
  text-align:left; 
  margin:0 8px;
  color: var(--light); /* Explicitly set text color to white */
}

.btn {
  font-size: 0.7rem !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.btn:hover {
  transform: translateY(-2px) !important;
}

.btn:active {
  transform: translateY(0) !important;
}

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
}

.btn-info {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--dark) !important;
}

.progress {
  height: 10px !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,0.1) !important;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Health bar specific styling */
#health-bar {
  background-color: var(--danger) !important;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  box-shadow: 0 0 8px rgba(214, 48, 49, 0.7);
  border-right: 1px solid rgba(0,0,0,0.2);
}

#player-avatar {
  width: 90px; /* Increased from 60px to 90px */
  height: 90px; /* Increased from 60px to 90px */
  border: 3px solid var(--primary); /* Increased border thickness */
  border-radius: 10px; /* Increased border radius */
  object-fit: contain;
  background-color: rgba(0,0,0,0.3);
  image-rendering: pixelated;
  margin-right: 8px; /* Increased margin */
}

#loc-select {
  background: rgba(50, 50, 70, 0.9) !important; /* Darker background so text is visible */
  color: var(--light) !important;
  border: 2px solid var(--secondary) !important;
  min-width: 10rem; 
  font-size: 0.7rem;
  border-radius: 6px !important;
}

/* Style dropdown options */
#loc-select option {
  background-color: rgba(50, 50, 70, 0.95) !important;
  color: white !important;
  padding: 8px !important;
}

#loc-select option:hover, 
#loc-select option:focus, 
#loc-select option:active, 
#loc-select option:checked {
  background-color: var(--primary) !important;
  color: white !important;
}

/* Next Month button sizing to preserve ad space */
#btn-next {
  width: auto !important;
  min-width: 120px !important;
  max-width: 150px !important;
  font-size: 0.8rem !important;
  padding: 8px 12px !important;
  flex-shrink: 0;
}

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes healthPulse {
  0% { opacity: 0.7; box-shadow: 0 0 5px rgba(255, 0, 0, 0.7); }
  50% { opacity: 1; box-shadow: 0 0 15px rgba(255, 0, 0, 1); }
  100% { opacity: 0.7; box-shadow: 0 0 5px rgba(255, 0, 0, 0.7); }
}

.pulse {
  animation: pulse 2s infinite;
}

#health-bar.pulse {
  animation: healthPulse 1s infinite;
}

/* Scrollbar styling for WebKit browsers */
.flex-main::-webkit-scrollbar {
  width: 8px;
}

.flex-main::-webkit-scrollbar-track {
  background: rgba(40, 40, 60, 0.8);
  border-radius: 10px;
}

.flex-main::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.flex-main::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Responsive - Keep clean desktop layout */
@media (max-width: 768px) {
  .content {
    display: flex;
    gap: 15px;
  }
  .flex-main {
    flex: 3;
  }
  .flex-ad {
    flex: 1;
  }
}

/* Game intro buttons */
.intro-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.intro-buttons .btn {
  font-size: 0.8rem;
  padding: 8px 15px;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.intro-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.intro-buttons .btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Form controls in options modal */
.form-check-input:checked {
  background-color: var(--warning);
  border-color: var(--warning);
}

.form-check-label {
  color: var(--light);
  font-size: 0.9rem;
}

/* High Score Screen */
#high-score-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.glow-text {
  color: var(--warning);
  text-shadow: 0 0 10px rgba(253, 203, 110, 0.7);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {
  0% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(253, 203, 110, 0.7);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 20px rgba(253, 203, 110, 0.9), 0 0 30px rgba(253, 203, 110, 0.6);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(253, 203, 110, 0.7);
  }
}

.high-score-table-container {
  width: 90%;
  max-width: 900px;
  background-color: rgba(40, 40, 60, 0.9);
  border-radius: 15px;
  border: 3px solid var(--warning);
  padding: 20px;
  box-shadow: 0 0 30px rgba(253, 203, 110, 0.3);
  margin-bottom: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

.high-score-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.high-score-table th {
  background-color: rgba(253, 203, 110, 0.2);
  color: var(--warning);
  padding: 15px 10px;
  font-size: 0.8rem;
  text-align: center;
  border-bottom: 2px solid var(--warning);
}

.high-score-table td {
  padding: 12px 10px;
  font-size: 0.8rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--light);
}

.high-score-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.05);
}

.high-score-table .top-score td {
  background-color: rgba(253, 203, 110, 0.1);
  color: var(--warning);
  font-weight: bold;
}

.avatar-thumbnail {
  width: 40px;
  height: 40px;
  border: 2px solid var(--secondary);
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.3);
  image-rendering: pixelated;
}

/* Create alternating rows for better readability */
.high-score-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Responsive high scores table */
@media (max-width: 768px) {
  .high-score-table-container {
    padding: 10px;
  }
  
  .high-score-table th, 
  .high-score-table td {
    padding: 8px 5px;
    font-size: 0.7rem;
  }
  
  .avatar-thumbnail {
    width: 30px;
    height: 30px;
  }
  
  .glow-text {
    font-size: 1.8rem;
  }
}