/* One art plane, one scale. Higher specificity replaces the former crop rules. */
.room-stage.cosmetic-room {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #ead7b6;
}
.cosmetic-room > .cosmetic-room__canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.room-card > .room-stage.cosmetic-room,
.goal-aside .room-stage.cosmetic-room,
.shop-preview .room-stage.cosmetic-room {
  flex: none;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  max-height: none;
}
.shop-preview .room-stage.cosmetic-room {
  max-width: 480px;
  margin-inline: auto;
}
.cosmetic-room image,
.cosmetic-thumbnail image { image-rendering: pixelated; }
.cosmetic-room .cosmetic-cat-model {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cosmetic-cat-breath 5s ease-in-out infinite;
}
@keyframes cosmetic-cat-breath {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.008); }
}
.shop-item .item-thumbnail:has(> .cosmetic-thumbnail) {
  height: 112px;
  border-radius: 9px;
  background: #f5f1e6;
  overflow: hidden;
}
.cosmetic-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cosmetic-thumbnail--neck { padding: 4px 5px 0; }
.cosmetic-thumbnail--mat { padding: 5px 4px 0; }
.cosmetic-thumbnail--window { padding: 3px; }
.cosmetic-description {
  margin-block: 10px 0;
  font-size: 13px;
  line-height: 1.75;
  color: #526454;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 901px) {
  .shop-preview { top: calc(var(--dialog-header-height, 73px) + var(--dialog-feedback-height, 0px)); }
  .shop-preview .room-stage.cosmetic-room { max-width: 360px; }
  .shop-item .item-thumbnail:has(> .cosmetic-thumbnail) { height: 104px; }
}
@media (min-width: 901px) and (max-height: 660px) {
  .shop-preview { position: static; }
}
@media (max-width: 420px) {
  .shop-item .item-thumbnail:has(> .cosmetic-thumbnail) { height: 112px; }
}
@media (max-width: 600px) {
  .shop-catalog .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cosmetic-room .cosmetic-cat-model { animation: none; }
}