/* =====================================================================
   UPSTART POKER × GGPoker LP
   画像を縦に並べる構成。本体画像は幅750px基準のため max-width で中央寄せ。
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --lp-width: 750px;   /* 素材の基準幅 */
  --bg: #0a0a0f;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.lp {
  max-width: var(--lp-width);
  margin: 0 auto;
  background: var(--bg);
}

/* 画像セクション：隙間なく縦に積む */
.lp-section {
  display: block;
  line-height: 0;          /* 画像下の余白を消す */
}

.lp-section img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================== CTA =========================== */
.cta-link {
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.cta-link:hover { transform: translateY(-2px); }
.cta-link:active { transform: translateY(0); }

.cta-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CTA を対象セクション画像の上に重ねる ===== */
.overlay-section { position: relative; }

.cta-overlay {
  position: absolute;
  left: 50%;
  width: 88%;                  /* 画像幅に対するボタン幅 */
  max-width: 660px;
  transform: translate(-50%, -50%);   /* 中心を left/top に合わせる */
  z-index: 2;
  line-height: 0;
  transition: transform .15s ease;
}
.cta-overlay:hover { transform: translate(-50%, -50%) translateY(-2px); }
.cta-overlay .cta-link { display: block; width: 100%; }

/* SignUp CTA直下の注意書き（ボタン位置に影響させないよう absolute でぶら下げる） */
/* セレクタを2クラスにして .lp-section img の width:100% より優先させる */
.cta-overlay .cta-note {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  /* scaleY: 横幅は保ったまま縦だけ少し詰める（文字の若干の縦潰れは許容） */
  transform: translateX(-50%) scaleY(0.9);
  transform-origin: top center;
  width: 100%;  /* 視認性重視でボタンと同幅まで拡大 */
  pointer-events: none;
}

/* FVセクション：画像の下に黒帯を足し、CTA+注意書きを黒背景上に置く */
/* %paddingは幅基準なので画像と同じ比率でスケールする（750px時 ≒ 260px） */
.fv-section {
  padding-bottom: 34.7%;
  background: #000;
}

/* 各CTAの縦位置（対象画像の下部余白に合わせる・ローカルで微調整） */
.cta-overlay--fv1    { top: 87.9%; }  /* FV上画像(836×1257)+黒帯の帯内にボタン+注意書きをセンタリング */
.cta-overlay--fv2    { top: 84.5%; } /* section-08 「FREE」下の暗帯にボタン+注意書きを収める（s09見出しとの被り回避） */
.cta-overlay--fv3    { top: 89%; }   /* section-10 下部 */
.cta-overlay--submit { top: 49%; }   /* section-13 フォーム枠内（入力欄の下） */

/* ===== 価格表(section-12)に CTA を重ねる ===== */
.pricing-section {
  position: relative;
}

.price-cta {
  position: absolute;
  z-index: 2;
  transition: transform .15s ease, opacity .15s ease;
}
.price-cta:hover { transform: translateY(-2px); }
.price-cta img { display: block; width: 100%; height: auto; }

/* 単品 $50 ×3：各価格の真下（赤/紫/ゴールド） */
/* 列中心 18.3% / 50% / 82%、ボタン帯 top ≈ 39.7%（750×1208基準） */
.price-cta--p1,
.price-cta--p2,
.price-cta--p3 {
  top: 42.5%;                 /* 白い余白のど真ん中あたり */
  width: 30%;                 /* トリム版素材基準。旧37%(余白込み)より可視ボタンは約1.45倍 */
  transform: translate(-50%, -50%);  /* 中心を top/left に合わせる */
}
.price-cta--p1 { left: 18.3%; }
.price-cta--p2 { left: 50%; }
.price-cta--p3 { left: 81.7%; }
.price-cta--p1:hover,
.price-cta--p2:hover,
.price-cta--p3:hover { transform: translate(-50%, -50%) translateY(-2px); }

/* 3点セット $100：$100 の真下 */
/* 静止画trim版はGIF版より上余白が少ないため top を下げて可視位置を維持 */
.price-cta--bundle {
  top: 86.7%;
  left: 50%;
  width: 76%;
  transform: translateX(-50%);
}
.price-cta--bundle:hover { transform: translateX(-50%) translateY(-2px); }

/* ===== CTAアニメーション（GIF代替） ===== */
/* 1周期1回のシンプルなバウンス。ストローク（拡大幅）を大きめに取る */
.cta-animated img {
  animation: cta-pulse 3.6s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes cta-pulse {
  0%, 100% { transform: scale(0.94); filter: drop-shadow(0 0 0 rgba(255, 200, 90, 0)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255, 200, 90, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-animated img,
  .sticky-cta.cta-animated img { animation: none; }
}

/* SUBMITはアニメーションなしで、下方向の影を落として据わりを良くする */
.cta-overlay--submit img {
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6));
}

/* リンク未設定（config が空）の CTA は無効表示 */
.cta-link.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}
/* オーバーレイ型FV-CTAはリンク未設定でも常に不透明で見せる（この規則が後勝ちする位置に置く） */
.cta-overlay--fv1 .cta-link.is-disabled,
.cta-overlay--fv2 .cta-link.is-disabled,
.cta-overlay--fv3 .cta-link.is-disabled { opacity: 1; }
/* pointer-events:none は .cta-link.is-disabled 側で維持（飛び先未設定のため無効のまま） */

/* ===== 追従CTA（FVの最初のCTA通過後〜WAITセクション手前まで表示） ===== */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 12px;
  width: min(88%, 560px);
  z-index: 10;
  line-height: 0;
  /* 非表示時は画面下に隠す。表示切り替えは main.js が .is-visible で行う */
  transform: translateX(-50%) translateY(130%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .cta-link { display: block; width: 100%; }
.sticky-cta img { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)); }

/* 他CTAと同じバウンスを適用。cta-pulse はfilterごと上書きするため、
   据わり用の黒影を含めた専用keyframesを使う */
.sticky-cta.cta-animated img { animation-name: cta-pulse-sticky; }
@keyframes cta-pulse-sticky {
  0%, 100% {
    transform: scale(0.94);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 0 rgba(255, 200, 90, 0));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(255, 200, 90, 0.45));
  }
}

/* =========================== フォーム =========================== */
/* section-13 の画像にHTML入力欄を重ねる */
.form-section {
  position: relative;
}

/* 入力欄を消した背景画像の上に、ラベル+input を HTML で重ねる */
.claim-form-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* 余白部分はクリックを画像へ通す */
}

.claim-form-overlay .field {
  position: absolute;
  left: 14.5%;
  width: 70%;
  pointer-events: auto;
}
/* ラベルの縦位置（750×1346基準） */
.field--username { top: 22%; }
.field--email    { top: 32%; }

.claim-form-overlay label {
  display: block;
  color: #fff;
  font-size: clamp(15px, 3.4vw, 22px);
  font-weight: 700;
  margin-bottom: 4%;
}

.claim-form-overlay input {
  display: block;
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;         /* iOS のズーム防止 */
  line-height: 1;
  padding: 0 14px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.claim-form-overlay input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.claim-form-overlay input:focus {
  border-color: #e23b3b;
  background: rgba(255, 255, 255, 0.07);
}

/* =========================== メッセージ =========================== */
/* フォーム画像内、SUBMITボタンの直下に重ねる（枠内の余白に収める） */
.form-message {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
  z-index: 3;
}
.form-message:empty { display: none; }   /* 未表示時は隙間を作らない */
.form-message.is-error   { color: #ff6b6b; }
.form-message.is-success { color: #5ad17a; }

/* =========================== 注意書き =========================== */
.disclaimer {
  padding: 4px 16px 16px;
}
.disclaimer img {
  max-width: 480px;
  margin: 0 auto;
}