@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Quicksand:wght@400;700&display=swap');

body {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  background: repeating-linear-gradient(
    135deg,
    #f9e7ef,
    #f9e7ef 40px,
    #f7f3e9 40px,
    #f7f3e9 80px
  );
  margin: 0;
  padding: 0;
  color: #7a5c4b;
}

#currency-bar {
  background: #fff6fa;
  color: #b48bbd;
  font-size: 1.3em;
  padding: 16px 32px;
  border-bottom: 2px solid #e7b6c9;
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  box-shadow: 0 2px 8px #e7b6c933;
  border-radius: 18px 18px 0 0;
  margin-bottom: 0;
  text-align: left;
}

#game-container {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.panel, .ui-panel, #store-panel, .store-panel-modal, .inventory-panel, #room-area {
  background: #fff6fa;
  border-radius: 18px;
  box-shadow: 0 4px 16px #e7b6c933;
  border: 2px solid #e7b6c9;
  padding: 18px 24px;
}

h1, h2, h3, h4, h5, h6, label, #room-select, #bg-selector {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #b48bbd;
  font-weight: 700;
}

button, .add-to-room-btn, .sell-btn {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #7a5c4b;
  font-weight: bold;
}

.house-image {
  display: block;
  margin: 0 auto;
  width: 90px;
  height: 90px;
  object-fit: cover;
  background: transparent;
  border-radius: 14px;
  box-shadow: none;
  padding: 0;
}

/* Remove any serif font usage from other selectors */
#currency-bar, .store-panel-modal h3, .inventory-panel h3 {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #b48bbd;
}

#store-panel h2, #room-area h2, .store-panel-modal h3, .inventory-panel h3 {
  margin-top: 0;
  color: #b48bbd;
  font-size: 2em;
  letter-spacing: 1px;
}

#store-items, .inventory-items, .store-items-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.store-item, .store-item-modal, .inventory-item {
  background: #fff;
  border-radius: 14px;
  border: 2px solid #e7b6c9;
  margin: 8px 0;
  padding: 10px 16px;
  box-shadow: 0 2px 8px #e7b6c933;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: box-shadow 0.2s, transform 0.1s;
}
.store-item:hover, .store-item-modal:hover, .inventory-item:hover {
  box-shadow: 0 6px 24px #e7b6c955;
  transform: scale(1.03);
}

.store-item img, .store-item .emoji, .store-item-modal .emoji, .inventory-item .emoji {
  width: 72px;
  height: 72px;
  font-size: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
}

#room-area {
  background: #fff6fa;
  border-radius: 18px;
  border: 2px solid #e7b6c9;
  padding: 24px;
  width: 700px;
  min-height: 700px;
  box-shadow: 0 4px 16px #e7b6c933;
}

#room {
  position: relative;
  width: 600px;
  height: 600px;
  background: #f7f3e9;
  border: 2.5px dashed #b48bbd;
  border-radius: 16px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 2px 12px #e7b6c922;
}

.room-item {
  position: absolute;
  cursor: move;
  transition: box-shadow 0.2s, transform 0.1s;
}
.room-item img, .room-item .emoji {
  width: 120px;
  height: 120px;
  font-size: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#add-room-btn, #inventory-btn, #neigh-btn, #close-inventory, #close-store, .add-to-room-btn, .sell-btn {
  background: #f3e1f7;
  border-radius: 12px;
  border: 2px solid #d1b3e0;
  color: #7a5c4b;
  font-weight: bold;
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  box-shadow: 0 2px 8px #e7b6c933;
  padding: 10px 18px;
  font-size: 1em;
  margin: 0 6px 0 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#add-room-btn:hover, #inventory-btn:hover, #neigh-btn:hover, #close-inventory:hover, #close-store:hover, .add-to-room-btn:hover, .sell-btn:hover {
  background: #e7b6c9;
  transform: scale(1.05);
}

#room-select, #bg-selector {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  font-size: 1em;
  border-radius: 8px;
  border: 1.5px solid #e7b6c9;
  background: #f7f3e9;
  color: #7a5c4b;
  margin-left: 10px;
  padding: 4px 10px;
}

.price {
  background: #e7f7e6;
  border-radius: 8px;
  padding: 2px 8px;
  color: #4b7a5c;
  font-weight: bold;
  margin-left: auto;
  margin-top: 0;
  font-size: 1em;
}

#inventory-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(80, 60, 30, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.inventory-panel {
  min-width: 340px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inventory-item {
  width: 220px;
  min-height: 72px;
  font-size: 1.2em;
  position: relative;
  margin-bottom: 0;
  box-sizing: border-box;
}
.inventory-item .inventory-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  margin-left: 18px;
  width: auto;
  justify-content: flex-start;
  align-items: flex-start;
}

.add-to-room-btn, .sell-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  padding: 0;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#store-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(80, 60, 30, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.store-panel-modal {
  min-width: 340px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.store-items-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.store-item-modal {
  background: #fff;
  border-radius: 14px;
  border: 2px solid #e7b6c9;
  margin: 8px 0;
  padding: 10px 16px;
  box-shadow: 0 2px 8px #e7b6c933;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: box-shadow 0.2s, transform 0.1s;
}
.store-item-modal:hover {
  box-shadow: 0 6px 24px #e7b6c955;
  transform: scale(1.03);
}

.store-item-modal .price {
  margin-left: auto;
  background: #e7f7e6;
  border-radius: 8px;
  padding: 2px 8px;
  color: #4b7a5c;
  font-weight: bold;
  font-size: 1em;
}

#close-store {
  margin-top: 10px;
}

.room-title {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #b48bbd;
  font-weight: 700;
  font-size: 2em;
  text-align: center;
  margin: 0 auto 18px auto;
  padding: 0 12px;
  white-space: normal;
  word-break: break-word;
  max-width: 90%;
  overflow-wrap: break-word;
}

.chores-panel {
  background: #fff6fa;
  border: 2px solid #e7b6c9;
  border-radius: 18px;
  box-shadow: 0 4px 16px #e7b6c933;
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #7a5c4b;
  font-size: 1.1em;
  text-align: center;
  margin: 0 auto 18px auto;
  max-width: 600px;
  padding: 18px 32px;
}

#coins {
  font-family: 'Nunito', 'Quicksand', Arial, sans-serif;
  color: #b48bbd;
  font-weight: 700;
  font-size: inherit;
}