.halloween-promotion {
  width: min(520px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 2.5rem;
  overflow-y: auto;
  border: 1px solid #77517d;
  border-radius: 24px;
  background: radial-gradient(ellipse at top, #4c2755, #211429 65%);
  color: #fff5e8;
  text-align: center;
  box-shadow: 0 25px 90px #0008;
}
.halloween-promotion::backdrop { background: #130c1bc9; }
.halloween-promotion-close { position: absolute; top: .6rem; right: .8rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff5e8; font-size: 2rem; line-height: 1; }
.halloween-promotion-art { color: #ffbd7d; font-size: 4.5rem; line-height: 1; margin-bottom: 1rem; }
.halloween-promotion-badge { color: #ffbd7d; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.halloween-promotion h2 { color: #ffad62; font-size: clamp(2.3rem, 7vw, 3.7rem); font-weight: 800; margin-bottom: 1rem; }
.halloween-promotion p { line-height: 1.6; }
.halloween-promotion-deadline { font-size: .85rem; color: #d5c8df; }
.halloween-promotion-cta { display: block; padding: .95rem 1rem; margin-top: 1.5rem; border-radius: 10px; background: #ffad62; color: #211329; font-weight: 700; text-decoration: none; }
.halloween-promotion-cta:hover { background: #ffd4a7; color: #211329; }
.halloween-promotion-later { display: block; margin: 1rem auto 0; padding: .5rem; background: transparent; border: 0; color: #e5d9ed; text-decoration: underline; font-size: .9rem; }
.halloween-promotion :focus-visible { outline: 3px solid #fff5e8; outline-offset: 4px; }
@media (max-width: 480px) { .halloween-promotion { padding: 2.5rem 1.4rem 1.5rem; } }