html:has(.tarot-draw-modal),
body:has(.tarot-draw-modal) { overflow: hidden; }

.tarot-draw-modal {
  box-sizing: border-box;
  width: min(calc(100vw - 20px), 520px);
  height: calc(100dvh - 28px);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 12px;
}

.tarot-draw-section {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tarot-draw-top { justify-content: flex-start; padding-top: 8px; box-sizing: border-box; }
.tarot-draw-top .eyebrow { margin: 0 28px 7px; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.tarot-draw-top h2 { margin: 0 0 clamp(6px, 1.5dvh, 14px); font-size: 22px; line-height: 1.05; white-space: nowrap; }
.tarot-draw-middle { justify-content: flex-start; padding-top: 7px; box-sizing: border-box; }
.tarot-draw-bottom { justify-content: flex-end; }
.tarot-draw-bottom .tarot-hint { margin: 0 0 4px; font-size: 10px; line-height: 1.1; }

.tarot-draw-slot-row { width: 100%; min-height: 0; display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.tarot-five-top .tarot-slot { width: min(calc((100% - 12px) / 3), clamp(76px, 10.5dvh, 95px)); min-width: 0; }
.tarot-five-middle .tarot-slot { width: min(calc((100% - 6px) / 2), clamp(82px, 13.5dvh, 112px)); min-width: 0; }
.tarot-flex-slots .tarot-slot { width: calc((100% - 12px) / 3); max-width: 100px; min-width: 0; }
.tarot-flex-slots.layout-1 .tarot-slot { width: 100px; }
.tarot-five-top .tarot-slot-image,
.tarot-five-top .tarot-slot-empty,
.tarot-five-middle .tarot-slot-image,
.tarot-five-middle .tarot-slot-empty,
.tarot-flex-slots .tarot-slot-image,
.tarot-flex-slots .tarot-slot-empty { width: 100%; height: auto; aspect-ratio: 300 / 527; }

.tarot-draw-modal .tarot-slot .tarot-position { min-height: 18px; max-height: 20px; overflow: hidden; margin: 0 0 1px; font-size: 8px; line-height: 1.1; white-space: nowrap; }
.tarot-draw-modal .tarot-slot strong { display: block; height: 18px; margin-top: 3px; overflow: hidden; font-size: 8px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
.tarot-draw-modal .tarot-slot small { display: block; height: 10px; font-size: 7px; line-height: 1.1; white-space: nowrap; }
.tarot-slot-empty { display: grid; place-items: center; border: 1px solid #806fa655; border-radius: 10px; background: #ffffff04; color: #a996cc66; box-shadow: inset 0 0 0 1px #ffffff08; }

.tarot-draw-bottom .tarot-picker { width: 100%; height: 100%; min-height: 0; flex: 0 0 auto; padding: 0; overflow: hidden; background: transparent; border: 0; box-shadow: none; }
.tarot-draw-bottom .tarot-picker-track { width: 100%; height: 100%; min-height: 0; padding: 0; gap: 8px; display: flex; align-items: flex-end; justify-content: flex-start; overflow-x: auto; background: transparent; }
.tarot-draw-bottom .tarot-carousel-card { flex: 0 0 calc((100% - 16px) / 3); min-width: calc((100% - 16px) / 3); height: auto; }
.tarot-draw-bottom .tarot-card-flip { width: 100%; height: auto; aspect-ratio: 300 / 527; }
.tarot-draw-modal .tarot-card-face img,
.tarot-draw-modal .tarot-slot-image img { width: 100%; height: 100%; object-fit: contain; }

/* На коротком экране iPhone SE верхняя треть получает компактную типографику,
   чтобы верхний ряд целиком помещался без обрезания. */
@media (max-height: 700px) {
  .tarot-draw-top { padding-top: 4px; }
  .tarot-draw-top .eyebrow { margin-bottom: 4px; font-size: 8px; }
  .tarot-draw-top h2 { margin-bottom: 3px; font-size: 20px; }
  .tarot-five-top .tarot-slot { width: min(calc((100% - 12px) / 3), 67px); }
  .tarot-five-middle .tarot-slot { width: min(calc((100% - 6px) / 2), 78px); }
  .tarot-draw-modal .tarot-slot .tarot-position { min-height: 15px; max-height: 16px; font-size: 7px; }
  .tarot-draw-modal .tarot-slot strong { height: 15px; margin-top: 2px; font-size: 7px; }
  .tarot-draw-modal .tarot-slot small { height: 9px; font-size: 6px; }
}