/* Пустое место под карту: карты ещё нет, а место для неё уже есть.
   Пунктир, а не сплошная рамка — так рисуют то, чего пока не завели:
   очертания есть, содержимого нет. Пропорции и скругление те же, что
   у настоящей карты, — когда она появится, ничего не сдвинется.

   Нажимается вся целиком: цель здесь не значок, а само место. */
.cardslot {
  width: 100%;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: none;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.cardslot__say {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cardslot__mark {
  display: grid;
  place-items: center;
}

.cardslot__mark .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

.cardslot:active {
  background: var(--surface);
  border-color: var(--text-faint);
  color: var(--text-dim);
}

@media (hover: hover) {
  .cardslot:hover {
    background: var(--surface);
    border-color: var(--text-faint);
    color: var(--text-dim);
  }
}