/* Место будущей карты: рисунок, объяснение и кнопка.

   Пунктирная рамка на этом месте говорила «здесь пусто». Рисунок
   говорит «здесь будет карта»: видно и что это за вещь, и кому она
   достанется, и чем её наполняют. Разница в том, зовёт место к делу
   или просто пустует.

   Всё собрано из наших же кусков — прямоугольник, значки, кружок.
   Картинкой это было бы тяжелее, не красилось бы темой и мылилось
   на плотных экранах. */

.cardnew {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}

/* Название блока — у левого края: это подпись к месту, а не заголовок
   объявления. Всё остальное внутри стоит по центру. */
.cardnew__title {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* Сцена рисунка: карта посередине, искры по краям, свечение под всем
   этим. Высота задана рисунком, а не числом. */
.cardnew__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--sp-6) 0 var(--sp-5);
}

/* Свечение — не тень, а свет из-под карты: тень прижимает предмет
   к плоскости, свет поднимает его над ней. Радиальный градиент шире
   самой карты, чтобы край не читался обводкой. */
.cardnew__art::before {
  content: "";
  position: absolute;
  width: 62cqw;
  height: 34cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-core), var(--glow-edge));
}

/* Сама карта: стекло с тонкой рамкой, пропорции настоящей карты. */
.cardnew__card {
  position: relative;
  width: 38cqw;
  aspect-ratio: 1.586;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cardnew__percent,
.cardnew__who {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.cardnew__percent {
  top: var(--sp-3);
  left: var(--sp-3);
}

.cardnew__percent .icon {
  width: 7.5cqw;
  height: 7.5cqw;
}

/* Силуэт тише знака скидки: он говорит, кому карта достанется,
   а не что на ней написано. */
.cardnew__who {
  top: var(--sp-3);
  right: var(--sp-3);
  color: var(--text-faint);
}

.cardnew__who .icon {
  width: 6cqw;
  height: 6cqw;
}

/* Две полоски вместо текста: на макете карты слова не читают —
   по ним узнают, что там вообще что-то написано. */
.cardnew__lines {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.cardnew__lines i {
  display: block;
  height: 1.2cqw;
  border-radius: 100cqw;
  background: var(--text-faint);
  opacity: .55;
}

.cardnew__lines i:first-child { width: 11cqw; }
.cardnew__lines i:last-child { width: 7cqw; }

/* Жёлтый кружок с плюсом лежит на углу карты: он и есть то дело,
   которого здесь ждут, и потому единственное цветное пятно. */
.cardnew__plus {
  position: absolute;
  right: 26cqw;
  bottom: 8cqw;
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 16px var(--fab-shadow);
}

.cardnew__plus .icon {
  width: 5.5cqw;
  height: 5.5cqw;
  stroke-width: 2.6;
}

/* Искры — приметы нового: мелкие, редкие и только по краям сцены,
   чтобы не спорить с самой картой. */
.cardnew__spark {
  position: absolute;
  color: var(--accent);
  opacity: .8;
}

.cardnew__spark .icon {
  width: 3.2cqw;
  height: 3.2cqw;
}

.cardnew__spark--one { top: 4cqw; right: 22cqw; }
.cardnew__spark--two { bottom: 9cqw; left: 24cqw; opacity: .6; }
.cardnew__spark--three { top: 14cqw; right: 18cqw; opacity: .45; }

.cardnew__lead {
  font-size: var(--fs-md);
  font-weight: 700;
}

.cardnew__note {
  max-width: 74cqw;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-dim);
}

/* Кнопка во всю ширину блока: это единственное дело на экране, где
   карты ещё нет. */
.cardnew .btn { width: 100%; }