@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600&family=Quantico:wght@400;700&display=swap');

.os-fit-text {
  font-size: min(var(--fit-cap, 14) * 1cqw, var(--fit-budget, 163) * 1cqw / var(--len, 10));
}

.os-gold-text {
    font-family: "Quantico", "Impact", "Arial Black", sans-serif;
    font-weight: 700;
    line-height: 1;
    background-color: #f6f2e6;
    background-image:
      radial-gradient(rgba(201, 155, 20, 0.85) 20%, transparent 22%),
      radial-gradient(rgba(235, 195, 70, 0.6) 20%, transparent 22%);
    background-size: 6px 6px, 8px 8px;
    background-position: 0 0, 3px 4px;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px #cf9f1e;
    filter: drop-shadow(0 0 8px rgba(207, 159, 30, 0.6)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7));
    white-space: nowrap;
}

/*
 * Canvas model (aligned with new-account-opening-bonus):
 * - Sections are full-bleed (backgrounds reach the viewport edges via cover).
 * - Composition height / type scale lock to a 1920px design width.
 * - Overlays stay inside that proportional stage — no horizontal stretch.
 *
 * --os-vw ≡ 1vw when viewport <= 1920; freezes above that.
 */
.one-shot-lp {
  --os-canvas: 1920px;
  --os-full: min(100vw, var(--os-canvas));
  --os-vw: calc(var(--os-full) / 100);
  --os-stage-inset: max(0px, (100vw - var(--os-full)) / 2);
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
  position: relative;
}

body {
  background: #000;
  overflow-x: hidden;
}

/* Full-bleed section shells (bonus-style). */
.one-shot-lp .fv__img,
.one-shot-lp .section_two_background,
.one-shot-lp .tkt_xpost {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* Floating CTAs stay canvas-sized and centered. */
.one-shot-lp .os-float-btns__main {
  max-width: var(--os-canvas) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ── Image-driven sections (FV / howto / lineup): 1920×1100 art ── */
.one-shot-lp .fv__img:not(.notes__section) {
  height: calc(var(--os-full) * 1500 / 1920) !important;
  position: relative !important;
  overflow: hidden !important;
}

.one-shot-lp .fv__img.fv__img--hero {
  height: calc(var(--os-full) * 0.42) !important;
}

.one-shot-lp .fv__img:not(.notes__section) > .fv__bgi {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.one-shot-lp .fv__img:not(.notes__section) > .fv__bgi img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: none !important;
}

/* Content stage: % widths resolve against the 1920 canvas, not 100vw. */
.one-shot-lp .fv__main-wrapper {
  width: calc(var(--os-full) * 0.75) !important;
  max-width: calc(var(--os-full) * 0.75) !important;
}

.one-shot-lp .pc .fv_lineup-one-w {
  width: calc(var(--os-full) * 0.70) !important;
}
.one-shot-lp .pc .fv_lineup-two-w {
  width: calc(var(--os-full) * 0.63) !important;
}
.one-shot-lp .pc .fv_lineup-three-w {
  width: min(calc(var(--os-full) * 0.75), 750px) !important;
}

/* Lineup: content-driven height AND layout. The heading/paragraph/board
 * are stacked in normal document flow (flex column) instead of computed
 * absolute % offsets — the browser spaces them from each element's real
 * rendered size, so nothing can overlap or leave a mystery gap no matter
 * how tall any of the three images actually are.
 */
.one-shot-lp .pc .fv__img.fv__img--lineup {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: calc(var(--os-full) * 0.03) !important;
  padding-bottom: calc(var(--os-full) * 0.05) !important;
  gap: calc(var(--os-full) * 0.018) !important;
}
.one-shot-lp .fv__img--lineup .fv_lineup-one-w,
.one-shot-lp .fv__img--lineup .fv_lineup-two-w,
.one-shot-lp .fv__img--lineup .fv_lineup-three-w {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.one-shot-lp .fv_howto-one-w {
  width: calc(var(--os-full) * 0.37) !important;
}
.one-shot-lp .fv_howto-two-w {
  left: var(--os-stage-inset) !important;
  width: calc(var(--os-full) * 0.35) !important;
}
.one-shot-lp .fv_howto-three-w {
  right: var(--os-stage-inset) !important;
  width: calc(var(--os-full) * 0.43) !important;
}
.one-shot-lp .fv_howto-four-w {
  width: min(calc(var(--os-full) * 0.70), 750px) !important;
}

/* HowTo: content-driven height so the tall 3-step board is never clipped
 * by the shared fv__img fixed-height + overflow:hidden shell. Side
 * characters stay absolute decoration behind the board. */
.one-shot-lp .pc .fv__img.fv__img--howto {
  height: auto !important;
  min-height: calc(var(--os-full) * 1500 / 1920);
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: calc(var(--os-full) * 0.02) !important;
  padding-bottom: calc(var(--os-full) * 0.06) !important;
  gap: calc(var(--os-full) * 0.012) !important;
}
.one-shot-lp .fv__img--howto .fv_howto-one-w,
.one-shot-lp .fv__img--howto .fv_howto-text,
.one-shot-lp .fv__img--howto .fv_howto-four-w {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  z-index: 2;
}
.one-shot-lp .fv__img--howto .fv_howto-four-w {
  width: min(calc(var(--os-full) * 0.70), 750px) !important;
  max-width: 750px !important;
}
.one-shot-lp .fv__img--howto .fv_howto-four-w .fv__main {
  width: 100%;
  height: auto;
  display: block;
}
.one-shot-lp .fv__img--howto .fv_howto-two-w,
.one-shot-lp .fv__img--howto .fv_howto-three-w {
  z-index: 1;
  pointer-events: none;
}

/* ── Title section: same cover model (art is 1920-wide) ── */
.one-shot-lp .section_two_background {
  height: calc(var(--os-full) * 1100 / 1920) !important;
  position: relative !important;
  overflow: hidden !important;
}

.one-shot-lp .section_two_background > .section_two_background__bgi {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: none !important;
  margin: 0 !important;
}

.one-shot-lp .jp_pc_title_header {
  width: calc(var(--os-full) * 0.55) !important;
}
.one-shot-lp .jp_pc_title_paragraph {
  width: calc(var(--os-full) * 0.48) !important;
}
.one-shot-lp .jp_pc_title_header_2 {
  width: calc(var(--os-full) * 0.59) !important;
}

/* ── Notes: content-driven height; BG covers the full bleed ── */
.one-shot-lp .notes__section {
  position: relative !important;
  overflow: hidden !important;
}

.one-shot-lp .notes__section > .fv__bgi {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.one-shot-lp .notes__section > .fv__bgi img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: none !important;
}

.one-shot-lp .notes__section .notes_content {
  width: min(70%, 1100px) !important;
  max-width: min(1100px, calc(var(--os-full) * 0.70)) !important;
}

.one-shot-lp .notes_caution {
  width: min(65%, 900px) !important;
  max-width: min(900px, calc(var(--os-full) * 0.65)) !important;
}

/*
 * Ticket: section stays full-bleed so its own background (from the
 * blade page_style) can repeat across the viewport. Cap only the
 * inner .pc content column to the canvas.
 */
.one-shot-lp .tkt_xpost .pc {
  width: 100%;
  max-width: var(--os-full);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * Prize / winning desktop: content stage stays at canvas width;
 * ::after paints a full-bleed cover BG to the viewport edges.
 * SP backgrounds on the elements themselves are left alone.
 */
@media (min-width: 768px) {
  .one-shot-lp .prize {
    width: var(--os-full) !important;
    margin-left: calc(var(--os-full) / -2 + 50%) !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .one-shot-lp .prize::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    background: #000 var(--prize-bgi) center top / cover no-repeat;
  }

  .one-shot-lp .winning_wrap {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: #000;
    overflow: visible;
  }

  .one-shot-lp .winning {
    width: var(--os-full) !important;
    max-width: var(--os-canvas) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: none !important;
    /* winning.css's base `padding: 10%` resolves against .winning_wrap
     * (uncapped 100vw), not against this now-capped box — at deep zoom-out
     * that padding keeps growing while this box is frozen, squeezing h1/
     * boards into a shrinking content area (the ::before/::after pseudo
     * layers are unaffected since absolutely positioned children size
     * against the padding box, not the squeezed content box). Pin it to
     * --os-full so it freezes together with everything else. */
    padding: calc(var(--os-full) * 0.10) !important;
  }

  .one-shot-lp .winning::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -2;
    pointer-events: none;
    background: #000 var(--win-bgi) center top / cover no-repeat;
  }

  /* Pig overlay stays on the content stage (not 100vw). */
  .one-shot-lp .winning::before {
    width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    height: calc(var(--os-full) * 1042 / 2100) !important;
    z-index: -1 !important;
  }
}