.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;
  /* 3D raised tile surface lighting */
  background-image: linear-gradient(
    150deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 35%,
    transparent 65%,
    rgba(0,0,0,0.05) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 1px 0 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transition: box-shadow 0.15s ease;
}

.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;
  /* 3D bevel on color band */
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.1) 35%,
    transparent 60%,
    rgba(0,0,0,0.2) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}

/* 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-color: #f0e0d0; }
.space.prop-LIGHT_BLUE { background-color: #e8f4fa; }
.space.prop-PINK       { background-color: #fae8ef; }
.space.prop-ORANGE     { background-color: #fff0db; }
.space.prop-RED        { background-color: #fde0e0; }
.space.prop-YELLOW     { background-color: #fdf8e0; }
.space.prop-GREEN      { background-color: #e0f0e0; }
.space.prop-DARK_BLUE  { background-color: #e0e0f5; }

/* House indicators — 3D building shapes */
.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;
}

/* 3D house — pentagon silhouette with roof */
.house {
  width: 9px;
  height: 9px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.25) 0%, transparent 50%),
    linear-gradient(180deg,
      #b03a2e 0%, #b03a2e 36%,
      #27ae60 36%, #1e8449 100%
    );
  clip-path: polygon(50% 0%, 100% 36%, 100% 100%, 0 100%, 0 36%);
  box-shadow:
    1px 0 0 rgba(0,0,0,0.3),
    0 1px 0 rgba(0,0,0,0.2),
    2px 2px 4px rgba(0,0,0,0.45);
  border: none;
  flex-shrink: 0;
}

/* 3D hotel — taller building silhouette */
.hotel {
  width: 11px;
  height: 11px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.25) 0%, transparent 45%),
    linear-gradient(180deg,
      #7b241c 0%, #7b241c 26%,
      #e74c3c 26%, #cb4335 100%
    );
  clip-path: polygon(50% 0%, 100% 26%, 100% 100%, 0 100%, 0 26%);
  box-shadow:
    2px 0 0 rgba(0,0,0,0.3),
    0 2px 0 rgba(0,0,0,0.2),
    3px 3px 5px rgba(0,0,0,0.5);
  border: none;
  flex-shrink: 0;
}

/* Ownership indicator — 3D inset ring */
.space.owned {
  box-shadow:
    inset 0 0 0 2px var(--owner-color),
    inset 0 0 6px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* 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;
}