.city-skin-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(200, 163, 60, .48);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(50, 49, 31, .94), rgba(13, 22, 17, .96));
  color: #f1e8c3;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.city-skin-entry:active { transform: scale(.99); }
.city-skin-entry > img {
  width: 76px;
  height: 62px;
  object-fit: cover;
  border: 1px solid rgba(218, 184, 82, .55);
  border-radius: 8px;
  background: #090d0d;
  flex: 0 0 auto;
}
.city-skin-entry > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.city-skin-entry b { color: #f3d96d; font-size: 14px; }
.city-skin-entry small { margin-top: 3px; color: #9baa9f; font-size: 11px; }
.city-skin-entry i { color: #d2ad45; font-size: 24px; font-style: normal; }
.city-skin-page { padding-bottom: 8px; }
.city-skin-default {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(91, 114, 93, .6);
  border-radius: 12px;
  background: #101914;
  color: #e4ede6;
  text-align: left;
  font: inherit;
}
.city-skin-default:not(:disabled) { cursor: pointer; }
.city-skin-default.active { border-color: #e0bd4d; box-shadow: 0 0 0 1px rgba(224, 189, 77, .2) inset; }
.city-skin-default > img { width: 72px; height: 58px; object-fit: contain; border-radius: 8px; background: #060a08; }
.city-skin-default > span { display: flex; flex-direction: column; }
.city-skin-default b { font-size: 14px; }
.city-skin-default small { margin-top: 3px; color: #a9b5ac; font-size: 11px; }
.city-skin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 9px; padding: 3px; border: 1px solid rgba(76, 99, 80, .65); border-radius: 10px; background: rgba(4, 10, 7, .62); }
.city-skin-tabs button { min-width: 0; min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: #a9b8ad; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.city-skin-tabs button.active { background: linear-gradient(180deg, #e3c65d, #b78b17); color: #11140f; box-shadow: 0 3px 9px rgba(0, 0, 0, .28); }
.city-skin-current { margin: 0 0 9px; padding: 7px 10px; border-radius: 8px; background: rgba(5, 10, 7, .55); color: #aab8ae; font-size: 11px; }
.city-skin-current b { color: #efd367; }
.city-skin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 11px; }
.city-skin-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding: 0 0 8px;
  border: 1px solid rgba(88, 103, 88, .62);
  border-radius: 11px;
  background: linear-gradient(160deg, #172019, #0b100d);
  color: #e9eee9;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.city-skin-card:active:not(:disabled) { transform: scale(.985); }
.city-skin-card.active { border-color: #e2bd49; box-shadow: 0 0 12px rgba(225, 184, 53, .22); }
.city-skin-card.owned:not(.active) { border-color: rgba(91, 165, 118, .7); }
.city-skin-card > img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; background: #060909; }
.city-skin-no { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 2px 6px; border: 1px solid #d8ae38; border-radius: 6px; background: rgba(3, 6, 5, .88); color: #f2d466; font-size: 11px; font-weight: 900; }
.city-skin-name { overflow: hidden; padding: 7px 8px 2px; color: #f3ead0; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.city-skin-state { display: flex; align-items: center; gap: 3px; min-height: 18px; padding: 0 8px; color: #e4c353; font-size: 11px; }
.city-skin-state.lack { color: #ca8172; }
.city-skin-state img { width: 15px; height: 15px; object-fit: contain; }
.city-skin-card:disabled { opacity: 1; cursor: default; }
.city-skin-empty { margin: 0 0 11px; padding: 32px 12px; border: 1px dashed rgba(88, 103, 88, .58); border-radius: 10px; color: #91a096; text-align: center; font-size: 12px; }
.city-skin-page > #city-skin-back { width: 100%; }
@media (max-width: 360px) {
  .city-skin-grid { gap: 7px; }
  .city-skin-name { font-size: 12px; }
  .city-skin-state { padding: 0 6px; font-size: 10px; }
}

/* Premium map presentation: each artwork has its own visual center and footprint. */
#map .m-cell[data-city-skin="qixi_magpie_bridge"] .m-detail.is-city { left: -29px; bottom: 18px; width: 158px; }
#map .m-cell[data-city-skin="qixi_shared_umbrella"] .m-detail.is-city { left: -28px; bottom: 14px; width: 156px; }
#map .m-cell[data-city-skin="high_sky_citadel"] .m-detail.is-city { left: -36px; bottom: 10px; width: 172px; }