/* ═══════════════════════════════════════════
   MODAL  (single definition — no duplicates)
════════════════════════════════════════════ */
.modal {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  inset: 0;
  min-height: 100dvh;
  padding: 8em 10px 10em;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  font-size: 70%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

@media (max-width: 1023px) { .modal { font-size: 100%; } }

.modal.is--active { opacity: 1; visibility: visible; }

/* ── Container ───────────────────────────────────── */
.modal__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

/* ── Logo ────────────────────────────────────────── */
.modal__logo {
  position: relative;
  z-index: var(--z-modal-item);
  display: block;
  width: 54em;
  max-width: 100%;
  margin-bottom: 0;
  animation: logo-sway 1s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 1023px) { .modal__logo { width: 70em; } }

/* ── Decorative section ──────────────────────────── */
.modal__decor {
  position: relative;
  margin-bottom: -15em;
}
@media (max-width: 1023px) { .modal__decor { margin-bottom: 0; } }

.modal__logo-decoration {
  position: absolute;
  z-index: 1;
  top: 0; left: 50%;
  transform: translate(-50%, 0);
  width: 67em;
  animation: logo-deco-pulse 1.2s ease-in-out infinite alternate;
  will-change: transform;
}

.modal__character {
  position: relative;
  z-index: 2;
  width: 225em;
  margin-top: -33em;
  transform: translateX(5%);
  will-change: transform;
}
@media (max-width: 1023px) {
  .modal__character {
    margin-top: 5em;
    transform: translateX(8%) scale(2.2);
    margin-bottom: 18em;
  }
}

/* ── Content block ───────────────────────────────── */
.modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  padding: 8em;
  aspect-ratio: 480/176;
  max-width: 111em;
  margin: 0 0 5em;
  z-index: 10;
  will-change: transform;
}
@media (max-width: 1023px) { .modal__content { min-width: 110em; } }

.modal__content::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  background-image: url(../../assets/images/ui/modal-background.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Win badge ───────────────────────────────────── */
.modal__win { position: absolute; will-change: transform; }

.modal.is--active .modal__win {
  width: 50em;
  top: 0; left: 50%;
  transform: translate(-50%, -60%);
}
.modal.is--active .modal__win img {
  animation: modal-win-pulse 1.6s ease-in-out infinite alternate;
}

/* ── Title ───────────────────────────────────────── */
.modal__title {
  position: relative;
  z-index: var(--z-modal-item);
  font-family: var(--font-display);
  font-size: 6em;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  margin-bottom: .75em;
  color: var(--color-white);
  text-shadow: var(--text-stroke-orange);
  -webkit-font-smoothing: antialiased;
}

/* ── Value ───────────────────────────────────────── */
.modal__value {
  position: relative;
  z-index: var(--z-modal-item);
  font-family: var(--font-display);
  font-size: 9.6em;
  font-weight: 900;
  font-style: italic;
  color: var(--color-orange);
  text-shadow: var(--text-stroke-dark);
  -webkit-font-smoothing: antialiased;
}

/* ── CTA button area ─────────────────────────────── */
.modal__cta {
  position: relative;
  z-index: var(--z-modal-item);
  width: fit-content;
  margin: 0 auto;
  font-size: 1.45em;
}
@media (max-width: 1023px) { .modal__cta { font-size: 1.25em; } }
@media (max-width: 1023px) and (max-height: 741px) { .modal__cta { font-size: 1.15em; } }

/* Effects inside modal */
.modal__effects {
  position: absolute;
  top: 50%; left: 50%;
  pointer-events: none;
}