@import url('ragnarok-prelander.css');

.variant-one {
  --cta-left: 17.5%;
  --cta-top: 55.5%;
  --cta-width: 65%;
  --cta-height: 20.5%;
}

.variant-one .creative { animation: none; transform: none; }
.variant-one::before { animation: none; opacity: 0; }
.variant-one .game-logo { position: absolute; z-index: 2; top: 4.2%; left: 50%; width: 23%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 4px 8px rgba(4, 26, 97, .72)); }
.variant-one .hook { position: absolute; z-index: 2; top: 31%; left: 50%; width: 67%; margin: 0; transform: translateX(-50%); color: #fff7d7; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.85rem, 1.75vw, 2.1rem); font-weight: 700; letter-spacing: .12em; line-height: 1.08; text-align: center; text-shadow: 0 2px 7px rgba(0, 19, 74, .95); }
.variant-one .hook strong { display: inline-block; margin-top: .14em; color: #ffd866; font-size: 1.1em; text-shadow: 0 2px 7px rgba(93, 39, 0, .95); }
.variant-one .cta { display: block; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-decoration: none; animation: cta-button-flash 1.15s ease-in-out infinite; }
.variant-one .cta::before, .variant-one .cta::after { display: none; }
.variant-one .cta-art { display: block; width: 100%; height: 100%; object-fit: contain; }

@keyframes cta-button-flash {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  48%, 58% { filter: brightness(1.32) saturate(1.14); transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .variant-one .cta { animation: none; }
}

.security-check[hidden] { display: none; }
.security-check { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(0, 9, 32, .76); backdrop-filter: blur(7px); }
.security-check__panel { position: relative; width: min(100%, 25rem); padding: 2rem; border: 1px solid rgba(168, 205, 255, .6); border-radius: 1rem; background: linear-gradient(160deg, #102d62, #061530); box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .55); color: #f7fbff; text-align: center; }
.security-check__eyebrow { margin: 0 0 .5rem; color: #9bc8ff; font: 700 .75rem/1.2 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.security-check h1 { margin: 0; font: 700 clamp(1.35rem, 4vw, 1.8rem)/1.15 system-ui, sans-serif; }
.security-check p:not(.security-check__eyebrow) { margin: .8rem 0 1.25rem; color: #d7e6fa; font: 400 .95rem/1.5 system-ui, sans-serif; }
#turnstile-widget { display: grid; min-height: 65px; place-items: center; }
.security-check__status { min-height: 1.5em; margin: .75rem 0 0 !important; color: #ffd777 !important; }
.security-check__close, .security-check__cancel { border: 0; color: #fff; font: 600 .9rem/1 system-ui, sans-serif; cursor: pointer; }
.security-check__close { position: absolute; top: .7rem; right: .8rem; width: 2rem; height: 2rem; border-radius: 50%; background: transparent; font-size: 1.6rem; }
.security-check__close:hover, .security-check__close:focus-visible { background: rgba(255, 255, 255, .14); }
.security-check__cancel { margin-top: .5rem; padding: .75rem 1rem; border: 1px solid rgba(194, 220, 255, .65); border-radius: .5rem; background: rgba(255, 255, 255, .06); }
.security-check__cancel:hover, .security-check__cancel:focus-visible { background: rgba(255, 255, 255, .16); }