.space {
  border: 1px solid #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-size: 8px;
  text-align: center;
  padding: 2px;
  position: relative;
  background: #fff;
  overflow: hidden;
  color: #333;
  line-height: 1.2;
}

.space.corner {
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
}

.space-name {
  font-weight: 600;
  margin-bottom: 1px;
  word-wrap: break-word;
  max-width: 100%;
}

.space-price {
  font-size: 7px;
  color: #666;
}

/* Color bands */
.color-band {
  position: absolute;
  z-index: 1;
}

/* Bottom row: band on top */
.space.side-bottom .color-band {
  top: 0; left: 0; right: 0; height: 18px;
}
.space.side-bottom { padding-top: 20px; }

/* Top row: band on bottom */
.space.side-top .color-band {
  bottom: 0; left: 0; right: 0; height: 18px;
}
.space.side-top { padding-bottom: 20px; }

/* Left column: band on right */
.space.side-left .color-band {
  top: 0; bottom: 0; right: 0; width: 18px;
}
.space.side-left { padding-right: 20px; }

/* Right column: band on left */
.space.side-right .color-band {
  top: 0; bottom: 0; left: 0; width: 18px;
}
.space.side-right { padding-left: 20px; }

/* Property colors */
.color-BROWN      { background-color: #8B4513 !important; }
.color-LIGHT_BLUE { background-color: #87CEEB !important; }
.color-PINK       { background-color: #DB7093 !important; }
.color-ORANGE     { background-color: #FF8C00 !important; }
.color-RED        { background-color: #FF0000 !important; }
.color-YELLOW     { background-color: #FFD700 !important; }
.color-GREEN      { background-color: #228B22 !important; }
.color-DARK_BLUE  { background-color: #00008B !important; }

/* Property background tints */
.space.prop-BROWN      { background: #f0e0d0; }
.space.prop-LIGHT_BLUE { background: #e8f4fa; }
.space.prop-PINK       { background: #fae8ef; }
.space.prop-ORANGE     { background: #fff0db; }
.space.prop-RED        { background: #fde0e0; }
.space.prop-YELLOW     { background: #fdf8e0; }
.space.prop-GREEN      { background: #e0f0e0; }
.space.prop-DARK_BLUE  { background: #e0e0f5; }

/* House indicators */
.houses-container {
  position: absolute;
  display: flex;
  gap: 1px;
  z-index: 2;
}

.space.side-bottom .houses-container {
  top: 2px; left: 50%; transform: translateX(-50%);
  flex-direction: row;
}

.space.side-top .houses-container {
  bottom: 2px; left: 50%; transform: translateX(-50%);
  flex-direction: row;
}

.space.side-left .houses-container {
  right: 2px; top: 50%; transform: translateY(-50%);
  flex-direction: column;
}

.space.side-right .houses-container {
  left: 2px; top: 50%; transform: translateY(-50%);
  flex-direction: column;
}

.house {
  width: 8px;
  height: 8px;
  background: #2ecc71;
  border: 1px solid #1a9c4e;
}

.hotel {
  width: 10px;
  height: 10px;
  background: #e74c3c;
  border: 1px solid #a93226;
}

/* Ownership indicator */
.space.owned {
  box-shadow: inset 0 0 0 2px var(--owner-color);
}

/* Mortgaged indicator */
.space.mortgaged {
  opacity: 0.5;
}

.space.mortgaged::after {
  content: 'M';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 900;
  color: rgba(231, 76, 60, 0.7);
  z-index: 3;
}

/* Special space icons */
.space-icon {
  font-size: 16px;
  margin-bottom: 2px;
}

.corner .space-icon {
  font-size: 20px;
}