/* Item Slots: an item's sprite and combined card bonus up top, then one same-sized row per
   rolled card slot below -- filled or empty alike. Mini card previews share card-view-
   modal.css's own frame-sizing convention (--card-width scaled by the same --card-space-x/y
   room every tier reserves for Crystal's full-bleed art): the box is always measured by the
   card's own 703:998 frame, at a smaller width, never by a tighter crop that would cut a
   full-art card's edges off. */

#item-slots-modal {
  --card-width: 48px;
  --card-space-x: 1.75;
  --card-space-y: 2.1;
  --row-height: calc(var(--card-width) * var(--card-space-y));
  width: 620px;
}

.item-slots-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
  margin-bottom: 10px;
}

.item-slots-sprite {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #1c1c1c;
  border: 1px solid #444;
  border-radius: 4px;
}

.item-slots-sprite canvas {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.item-slots-bonus {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #7fe07f;
  overflow-wrap: anywhere;
}

.item-slots-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(var(--row-height) * 3 + 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Every row -- filled or empty -- is exactly the same size, set by the same frame the mini
   card preview itself is measured by. */
.item-slots-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--row-height);
  flex: 0 0 var(--row-height);
}

.item-slots-card-preview {
  flex: 0 0 calc(var(--card-width) * var(--card-space-x));
  width: calc(var(--card-width) * var(--card-space-x));
  height: var(--row-height);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}

.item-slots-card-preview retebra-card {
  width: var(--card-width);
  height: calc(var(--card-width) * 998 / 703);
  display: block;
}

.item-slots-card-preview-empty {
  background: #1c1c1c;
  border: 1px dashed #444;
  border-radius: 6%;
}

.item-slots-card-preview-empty::before {
  content: "";
  width: var(--card-width);
  height: calc(var(--card-width) * 998 / 703);
  border: 1px solid #333;
  border-radius: 6%;
  box-sizing: border-box;
}

.item-slots-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #ddd;
  overflow-wrap: anywhere;
}

.item-slots-card-name.item-slots-empty {
  color: #7a7a7a;
  font-style: italic;
}

.item-slots-card-name[data-tier="bronze"] { color: #cd8032; }
.item-slots-card-name[data-tier="silver"] { color: #c6c6d0; }
.item-slots-card-name[data-tier="gold"] { color: #f0c33c; }
.item-slots-card-name[data-tier="platinum"] { color: #7fe8e0; }
.item-slots-card-name[data-tier="crystal"] { color: #d38ef0; }

body.mobile-layout #item-slots-modal {
  --card-width: clamp(36px, calc((var(--mobile-vh) - 260px) / var(--card-space-y)), 48px);
  width: 340px;
}