1.upgrade-shop {
  2  background-color: white;
  3  border-radius: 8px;
  4  padding: 15px;
  5  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  6  flex: 1;
  7}
  8
  9.upgrade-shop h2 {
 10  font-size: 22px;
 11  margin-bottom: 15px;
 12  color: #333;
 13  border-bottom: 2px solid #eee;
 14  padding-bottom: 10px;
 15}
 16
 17.upgrades-list {
 18  display: flex;
 19  flex-direction: column;
 20  gap: 10px;
 21  max-height: 500px;
 22  overflow-y: auto;
 23  padding-right: 5px;
 24}
 25
 26.upgrade-item {
 27  display: flex;
 28  padding: 12px;
 29  border-radius: 6px;
 30  transition: background-color 0.2s, transform 0.1s;
 31  border: 1px solid #ddd;
 32  gap: 12px;
 33  cursor: pointer;
 34}
 35
 36.upgrade-item:hover {
 37  background-color: #f5f5f5;
 38}
 39
 40.can-afford {
 41  border-left: 4px solid #27ae60;
 42}
 43
 44.can-afford:hover {
 45  transform: translateX(2px);
 46}
 47
 48.cannot-afford {
 49  opacity: 0.7;
 50  cursor: not-allowed;
 51  border-left: 4px solid #e74c3c;
 52}
 53
 54.maxed-out {
 55  border-left: 4px solid #f39c12;
 56  background-color: #ffefd5;
 57}
 58
 59.upgrade-icon {
 60  font-size: 24px;
 61  display: flex;
 62  align-items: center;
 63  justify-content: center;
 64  min-width: 40px;
 65}
 66
 67.upgrade-info {
 68  flex: 1;
 69}
 70
 71.upgrade-info h3 {
 72  font-size: 16px;
 73  margin-bottom: 3px;
 74}
 75
 76.upgrade-info p {
 77  font-size: 14px;
 78  color: #666;
 79  margin-bottom: 5px;
 80}
 81
 82.upgrade-value {
 83  font-weight: bold;
 84  color: #2980b9 !important;
 85}
 86
 87.upgrade-cost {
 88  font-weight: bold;
 89  color: #e67e22 !important;
 90}
 91
 92.max-level {
 93  font-weight: bold;
 94  color: #f39c12 !important;
 95}
 96
 97/* Mobile optimization */
 98@media (max-width: 768px) {
 99  .upgrade-item {
100    padding: 10px;
101  }
102  
103  .upgrade-icon {
104    font-size: 20px;
105    min-width: 30px;
106  }
107  
108  .upgrade-info h3 {
109    font-size: 14px;
110  }
111  
112  .upgrade-info p {
113    font-size: 12px;
114  }
115}