/* ======================
   landing-pop.css
   public/index.php（トップページ）専用 — 絵本調POP
   ====================== */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap');

/* ---------- Force Light Theme + Paper base ----------
   ベタ塗り廃止の基盤:
   全ページ共通のクリーム色ペーパー地に、
   プラス記号＆ドットをパステルで散らした絵本風テクスチャを敷く。
---------- */
body {
  background: #fff8f0 !important;
  color: #3a2d50 !important;
  overflow-x: hidden;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%23ff6aa6' fill-opacity='0.09'><path d='M24 14h4v14h-4z'/><path d='M20 18h12v4h-12z'/></g><g fill='%23a56cff' fill-opacity='0.08'><path d='M112 78h4v14h-4z'/><path d='M108 82h12v4h-12z'/></g><g fill='%233fd1a3' fill-opacity='0.08'><path d='M72 140h4v14h-4z'/><path d='M68 144h12v4h-12z'/></g><g fill='%23f5c95c' fill-opacity='0.10'><path d='M150 120h3v11h-3z'/><path d='M146.5 124h10v3h-10z'/></g><circle cx='150' cy='30' r='2.5' fill='%23ff6aa6' fill-opacity='0.13'/><circle cx='30' cy='100' r='2' fill='%23f5c95c' fill-opacity='0.14'/><circle cx='130' cy='160' r='2.2' fill='%23a56cff' fill-opacity='0.12'/><circle cx='90' cy='30' r='1.6' fill='%234fb3f0' fill-opacity='0.13'/><circle cx='50' cy='60' r='1.4' fill='%233fd1a3' fill-opacity='0.14'/></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
  background-attachment: fixed;
}

/* LOADER の CSS は index.php 側で $pageStyle にインライン埋め込み
   （外部CSS読み込み前に描画可能にするため）*/

/* ローダー表示中は上部のロゴ・ナビを隠す */
body:has(#lp3-loader:not(.is-done)) .site-logo,
body:has(#lp3-loader:not(.is-done)) .nav-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* --- Landing2: サイトロゴ（左上）— ナビとデザイン統一 --- */
.site-logo {
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  color: #3a2d50 !important;
  -webkit-text-fill-color: currentColor !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff);
  z-index: 101 !important;
}
.site-logo::before {
  content: '';
  width: 36px; height: 46px;
  flex-shrink: 0;
  background: url('/img/logo-small.webp') center/contain no-repeat;
  transition: transform 0.4s var(--bounce);
}
a.site-logo:hover { background: transparent !important; }
a.site-logo:hover::before { transform: rotate(-8deg); transition: transform 0.4s var(--bounce); }
/* --- Landing2: ハンバーガー廃止、ナビを右上に常時展開 --- */
.hamburger,
.nav-overlay { display: none !important; }
.nav-panel {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 40px);
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff);
  z-index: 100 !important;
}
/* トップページリンクは非表示 */
.nav-panel-link[href="/"] { display: none !important; }
.nav-panel-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: #3a2d50 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  transition: color 0.2s !important;
}
.nav-panel-link::before {
  content: '';
  width: 14px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none'><path d='M1.5 3.6875L4.38 6.5L9.5 1.5' stroke='%23ff6aa6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.nav-panel-link:hover { color: var(--pop-pink-d) !important; background: transparent !important; }
/* ランディングの横並びナビではカテゴリ仕切りを表示しない（base.css の dropdown 時のみ表示） */
.nav-panel-divider { display: none !important; }
.footer { background: transparent !important; }
.footer-copyright {
  color: #5a4a70 !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  opacity: 0.45 !important;
}

/* .main を全幅に */
.main {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
}

/* ---------- Scope Variables ---------- */
.lp3 {
  --pop-pink:   #ffb8d6;
  --pop-pink-l: #fff0f6;
  --pop-pink-d: #ff6aa6;
  --pop-mint:   #b8ffe0;
  --pop-mint-l: #e8fff4;
  --pop-mint-d: #3fd1a3;
  --pop-lemon:  #fff4b8;
  --pop-lemon-l:#fffbe0;
  --pop-lemon-d:#f5c95c;
  --pop-lav:    #d4b8ff;
  --pop-lav-l:  #f3e9ff;
  --pop-lav-d:  #a56cff;
  --pop-peach:  #ffd4b8;
  --pop-peach-l:#fff0e4;
  --pop-sky:    #b8e6ff;
  --pop-sky-l:  #e4f4ff;
  --pop-sky-d:  #4fb3f0;
  --mj-green:   #3a9e5c;

  --ink:       #3a2d50;
  --ink-sub:   #715c88;
  --ink-light: #b0a3c2;

  --paper:     #fff8f0;          /* ページ地色 (body) */
  --card:      #ffffff;          /* カード面: ペーパー地より明るい純白で輪郭を立たせる */
  --card-edge: rgba(58,45,80,0.10); /* border-radius 系カードの細いエッジ線 */
  --border:    rgba(58,45,80,0.10);

  --shadow:    0 2px 14px rgba(58,45,80,0.08);
  --shadow-hi: 0 6px 22px rgba(255,106,166,0.22);

  --radius-lg: 28px;
  --radius:    18px;
  --radius-sm: 12px;

  --jp: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --mono: 'M PLUS Rounded 1c', 'Inter', 'Noto Sans JP', sans-serif;

  --notch: 20px;
  --bounce: cubic-bezier(0.19, 1.74, 0.47, 0.62);

  /* カード共通シャドウ — 白紙地の上で「輪郭 + 立体感」を両立:
     1. 1px のハロー = 疑似アウトライン（clip-path に追従）
     2. 0.5px のダークエッジ = クリスプな輪郭強化
     3. 中距離の影 = 接地感
     4. 遠距離のピンク影 = 浮遊感 */
  --card-shadow:
    drop-shadow(0 0 0.5px rgba(58,45,80,0.55))
    drop-shadow(0 0 1.2px rgba(58,45,80,0.35))
    drop-shadow(0 4px 8px rgba(58,45,80,0.10))
    drop-shadow(0 16px 28px rgba(255,106,166,0.16));
  --card-shadow-hi:
    drop-shadow(0 0 0.5px rgba(58,45,80,0.70))
    drop-shadow(0 0 1.4px rgba(58,45,80,0.45))
    drop-shadow(0 6px 12px rgba(58,45,80,0.18))
    drop-shadow(0 22px 36px rgba(255,106,166,0.22));

  /* ---- Type scale（Minor Third 1.2 ベース）---- */
  --fs-2xs:  0.72rem;                          /* 微細: 単位small、score-unit */
  --fs-xs:   0.82rem;                          /* caption: stat-label, chip, date */
  --fs-sm:   0.9rem;                           /* secondary body: archive, meta */
  --fs-base: 1rem;                             /* body / button */
  --fs-md:   1.15rem;                          /* emphasized body, sub-title */
  --fs-lg:   1.4rem;                           /* card title, subhead */
  --fs-xl:   1.8rem;                           /* highlighted number */
  --fs-2xl:  clamp(2rem, 3.5vw, 2.5rem);       /* section heading */
  --fs-3xl:  clamp(2.4rem, 5vw, 3.4rem);       /* champion name, stat num */
  --fs-4xl:  clamp(2.8rem, 7.5vw, 4.4rem);     /* hero title */

  font-size: var(--fs-base);
  line-height: 1.6;

  color: var(--ink);
  font-family: var(--jp);
  position: relative;
}
.lp3 a { text-decoration: none; color: inherit; }
.lp3 img { display: block; }

/* ==========================
   BAND (full-width section)
   ========================== */
.lp3-band {
  position: relative;
  width: 100%;
  padding: 120px 0 140px;
  overflow: hidden;
  isolation: isolate;
}
.lp3-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ============================
   Band backgrounds — ベタ塗りを廃止し、
   角にソフトなラジアルグラデーションを配置する手法に変更。
   ペーパー地のプラス/ドット模様が透けて見えることで「紙の上に色が乗った」表情になる。
   ============================ */

.lp3-band::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  /* 各バンドの上下を滑らかにフェード → 隣接セクションとの間にくっきりした
     色境界が出ないようにし、紙地と馴染ませる */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Hero のみ: 桜庭園の背景画像 + 半透明クリーム幕（可読性確保）
   下端は mask-image で徐々にフェードさせ、ペーパー地と滑らかに馴染ませる。 */
.band-hero {
  padding-top: 112px;
  padding-bottom: 160px;
}
.band-hero::after {
  background-image:
    linear-gradient(180deg, rgba(255,248,240,0.55) 0%, rgba(255,248,240,0.35) 45%, rgba(255,248,240,0.80) 90%, #fff8f0 100%),
    url('/img/sakura-hero.webp');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.6) 82%, rgba(0,0,0,0.2) 94%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.6) 82%, rgba(0,0,0,0.2) 94%, transparent 100%);
}
@media (max-width: 960px) {
  .band-hero::after {
    background-image:
      linear-gradient(180deg, rgba(255,248,240,0.55) 0%, rgba(255,248,240,0.35) 45%, rgba(255,248,240,0.80) 90%, #fff8f0 100%),
      url('/img/sakura-hero-1200.webp');
  }
}
@media (max-width: 720px) {
  .band-hero::after {
    background-image:
      linear-gradient(180deg, rgba(255,248,240,0.55) 0%, rgba(255,248,240,0.35) 45%, rgba(255,248,240,0.80) 90%, #fff8f0 100%),
      url('/img/sakura-hero-720.webp');
  }
}

/* 各セクションの色味: 2つのラジアルグラデーションを左上・右下（or 逆）に配置
   ペーパー地はそのまま透過するので、ベタ塗りにならない */
.band-live::after {
  background:
    radial-gradient(ellipse 95% 75% at 10% 0%,    rgba(255,111,136,0.30), transparent 65%),
    radial-gradient(ellipse 85% 65% at 100% 100%, rgba(255,184,214,0.36), transparent 60%);
}
.band-champion::after {
  background:
    radial-gradient(ellipse 90% 70% at 92% 5%,  rgba(255,122,101,0.28), transparent 65%),
    radial-gradient(ellipse 85% 65% at 5% 100%, rgba(255,183,170,0.32), transparent 60%);
}
.band-series::after {
  background:
    radial-gradient(ellipse 95% 75% at 100% 5%, rgba(232,181,74,0.28), transparent 65%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(255,240,205,0.40), transparent 60%);
}
.band-vault::after {
  background:
    radial-gradient(ellipse 90% 70% at 5% 5%,     rgba(168,185,96,0.26), transparent 65%),
    radial-gradient(ellipse 85% 65% at 100% 100%, rgba(237,244,204,0.42), transparent 60%);
}
.band-roster::after {
  background:
    radial-gradient(ellipse 95% 75% at 100% 0%, rgba(91,184,138,0.26), transparent 65%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(212,239,222,0.40), transparent 60%);
}
.band-archive::after {
  background:
    radial-gradient(ellipse 90% 70% at 10% 5%,    rgba(90,154,197,0.26), transparent 65%),
    radial-gradient(ellipse 85% 65% at 100% 100%, rgba(200,228,238,0.42), transparent 60%);
}
.band-spotlight::after {
  background:
    radial-gradient(ellipse 95% 75% at 100% 5%, rgba(141,111,199,0.26), transparent 65%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(213,201,238,0.44), transparent 60%);
}

/* ==========================
   SECTION DIVIDER
   隣接セクション間に配置する「区切り装飾」。
   あくまで区切り線なので、キャラは小さめ・控えめに。
   3体固定（left / center / right）で横並び。
   ========================== */
.lp3-section-divider {
  position: relative;
  width: 100%;
  height: 72px;
  margin: -28px 0; /* 前後セクションに軽く食い込ませる */
  display: block;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}
.lp3-divider-char {
  position: absolute;
  bottom: 50%;
  width: 40px;
  height: 40px;
  transform-origin: 50% 100%;
  opacity: 0.62;
  filter: drop-shadow(0 3px 6px rgba(58,45,80,0.14));
  will-change: transform;
}
.lp3-divider-char.is-left   { left: calc(50% - 84px); }
.lp3-divider-char.is-center { left: calc(50% - 20px); }
.lp3-divider-char.is-right  { left: calc(50% + 44px); }

/* アニメ割当 — 各キャラに付与された anim-lp3XXX クラスで切替 */
.anim-lp3Fuwafuwa  { animation: lp3Fuwafuwa 4.4s ease-in-out infinite; }
.anim-lp3Norinori  { animation: lp3Norinori 2.6s ease-in-out infinite; }
.anim-lp3Gunyon    { animation: lp3Gunyon 3.0s cubic-bezier(0.35,0.9,0.4,1) infinite; }
.anim-lp3Pyon      { animation: lp3Pyon 2.8s cubic-bezier(0.35,1.2,0.55,1) infinite; }
.anim-lp3Indicator { animation: lp3Indicator 3.6s cubic-bezier(0.5,1.6,0.6,1) infinite; }
.anim-lp3Yoisho    { animation: lp3Yoisho 3.4s cubic-bezier(0.4,0.9,0.45,1) infinite; }

/* ---- 9種モーション keyframes（yui540.com 参考 / ゆったり動作）---- */

/* インジケーター — 振り子的にお辞儀して戻る */
@keyframes lp3Indicator {
  0%   { transform: rotate(-18deg) scaleY(0.92); }
  15%  { transform: rotate(-28deg) scaleY(0.9); }
  45%  { transform: rotate(8deg) scaleY(1.1); }
  62%  { transform: rotate(-6deg) scaleY(0.95); }
  76%  { transform: rotate(2deg) scaleY(1.05); }
  88%  { transform: rotate(-3deg) scaleY(1); }
  100% { transform: rotate(-18deg) scaleY(0.92); }
}

/* ぐにょん — スクワッシュ&ストレッチ */
@keyframes lp3Gunyon {
  0%, 100% { transform: scale(1, 1); }
  25%  { transform: scale(1.22, 0.78); }
  50%  { transform: scale(0.85, 1.22); }
  75%  { transform: scale(1.06, 0.94); }
}

/* よいしょよいしょ — しゃがんで持ち上げる */
@keyframes lp3Yoisho {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25%  { transform: translateY(10px) scale(1.12, 0.85); }
  55%  { transform: translateY(-22px) scale(0.92, 1.12); }
  75%  { transform: translateY(4px) scale(1.04, 0.96); }
}

/* ピョンピョン — ジャンプ+着地スクワッシュ */
@keyframes lp3Pyon {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(4px) scale(1.15, 0.85); }
  32% { transform: translateY(-38px) scale(0.9, 1.12); }
  52% { transform: translateY(0) scale(1.24, 0.76); }
  62% { transform: translateY(-8px) scale(0.96, 1.04); }
  78% { transform: translateY(0) scale(1.02, 0.98); }
}

/* ノリノリ — リズミカルに上下しつつ左右に回転 */
@keyframes lp3Norinori {
  0%   { transform: translateY(0) rotate(-8deg) scale(1, 1); }
  20%  { transform: translateY(-8px) rotate(-8deg) scale(1, 1.08); }
  35%  { transform: translateY(0) rotate(8deg) scale(1.08, 0.92); }
  55%  { transform: translateY(-8px) rotate(8deg) scale(1, 1.08); }
  70%  { transform: translateY(0) rotate(-8deg) scale(1.08, 0.92); }
  100% { transform: translateY(0) rotate(-8deg) scale(1, 1); }
}

/* コツン — 落ちて接地→反動→次の落下 */
@keyframes lp3Kotsun {
  0%   { transform: translateY(-26px) rotate(-6deg) scale(1, 1); }
  38%  { transform: translateY(0) rotate(0deg) scale(1.22, 0.78); }
  50%  { transform: translateY(-10px) rotate(4deg) scale(0.95, 1.05); }
  62%  { transform: translateY(0) rotate(-3deg) scale(1.06, 0.94); }
  74%  { transform: translateY(0) rotate(1deg) scale(1, 1); }
  86%  { transform: translateY(-16px) rotate(-5deg); }
  100% { transform: translateY(-26px) rotate(-6deg) scale(1, 1); }
}

/* フワフワ — ゆったり浮遊 */
@keyframes lp3Fuwafuwa {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25%  { transform: translateY(-10px) rotate(1deg); }
  50%  { transform: translateY(-16px) rotate(-1deg); }
  75%  { transform: translateY(-6px) rotate(2deg); }
}

/* クルクル — ゆっくり一回転（間欠） */
@keyframes lp3Kurukuru {
  0%, 25%  { transform: rotate(0deg) scale(1); }
  35%      { transform: rotate(0deg) scale(1.08, 0.92); }
  45%      { transform: rotate(120deg) scale(1); }
  60%      { transform: rotate(240deg) scale(1); }
  72%      { transform: rotate(360deg) scale(1.05, 0.95); }
  82%, 100%{ transform: rotate(360deg) scale(1); }
}

/* ペコリ — 深いお辞儀 */
@keyframes lp3Pekori {
  0%, 20%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
  35%           { transform: translateY(6px) rotate(-14deg) scaleY(0.9); }
  50%           { transform: translateY(6px) rotate(-14deg) scaleY(0.9); }
  65%           { transform: translateY(0) rotate(2deg) scaleY(1.02); }
  78%           { transform: translateY(0) rotate(0deg) scaleY(1); }
}


/* ==========================
   HEADINGS
   ========================== */
.lp3-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jp);
  font-size: var(--fs-xs); font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--pop-pink-d);
}
.lp3-eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: var(--pop-pink-d);
  border-radius: 2px;
}
.lp3-heading {
  font-size: var(--fs-2xl);
  font-weight: 900; color: var(--ink);
  margin: 10px 0 40px;
  letter-spacing: 0.02em;
  position: relative;
  display: inline-block;
  line-height: 1.25;
}
.lp3-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: -12px;
  width: 72px; height: 5px;
  border-radius: 3px;
  background: var(--pop-pink-d);
}
/* Heading 下線色 = 各バンド固有色のダーク版（新グラデーションに合わせて更新） */
.band-live .lp3-heading::after      { background: #ff6f88; } /* rose */
.band-champion .lp3-heading::after  { background: #ff7a65; } /* coral */
.band-series .lp3-heading::after    { background: #e8b54a; } /* peach-yellow */
.band-vault .lp3-heading::after     { background: #a8b960; } /* sage-yellow */
.band-roster .lp3-heading::after    { background: #5bb88a; } /* mint */
.band-archive .lp3-heading::after   { background: #5a9ac5; } /* sky */
.band-spotlight .lp3-heading::after { background: #8d6fc7; } /* lilac */

/* Reveal */
.lp3-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
.lp3-reveal.lp3-in { opacity: 1; transform: translateY(0); }

/* ==========================
   HERO
   ========================== */
.lp3-hero {
  text-align: center;
  position: relative;
}
.lp3-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs); font-weight: 900;
  letter-spacing: 0.3em;
  padding: 8px 22px;
  background: var(--pop-pink-d);
  color: #fff8f0;
  outline: 4px solid var(--pop-pink);
  border-radius: 999px;
  margin-bottom: 26px;
}
.lp3-hero-title {
  font-size: var(--fs-4xl);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 28px;
  color: var(--ink);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 3;
  /* 背景画像上でも読めるよう白ハローを強化 */
  text-shadow: 0 2px 0 #fff, 0 0 16px rgba(255,255,255,0.9), 0 4px 22px rgba(255,255,255,0.7);
}
.lp3-hero-sub {
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 0 auto 48px;
  line-height: 2;
  font-weight: 600;
  position: relative;
  z-index: 3;
  text-shadow: 0 0 10px rgba(255,255,255,0.9);
}

.lp3-hero-actions {
  margin-top: 0;
  display: flex; justify-content: center; gap: 18px;
  flex-wrap: wrap;
  position: relative; z-index: 3;
}


/* ==========================
   BUTTONS — 参考サイト風: 二重アウトライン + バウンスpadding
   ========================== */
.lp3-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--jp);
  font-size: var(--fs-base); font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 0.3s var(--bounce),
              background-color 0.2s, color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  white-space: nowrap;
}
/* アクセシビリティ: キーボードフォーカス時のリング
   装飾リングは box-shadow で描画しているので outline を focus 用に解放 */
.lp3-btn:focus-visible {
  outline: 3px solid var(--pop-pink-d);
  outline-offset: 5px;
}
.lp3-btn:disabled,
.lp3-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.lp3-btn-primary {
  background: var(--pop-pink-d);
  color: #fff8f0;
  box-shadow: 0 0 0 4px var(--pop-pink);
}
.lp3-btn-primary:hover {
  background: #e8538f;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--pop-pink),
              0 6px 14px rgba(255,106,166,0.28);
}
.lp3-btn-secondary {
  background: var(--card);
  color: var(--pop-lav-d);
  box-shadow: 0 0 0 4px var(--pop-lav);
}
.lp3-btn-secondary:hover {
  background: var(--pop-lav-l);
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--pop-lav),
              0 6px 14px rgba(165,108,255,0.22);
}
.lp3-btn-ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--pop-pink);
}
.lp3-btn-ghost:hover {
  background: var(--pop-pink-l);
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--pop-pink),
              0 5px 12px rgba(255,106,166,0.22);
}
.lp3-btn-sm { padding: 8px 18px; font-size: var(--fs-sm); }
.lp3-btn-arrow::after {
  content: '';
  width: 10px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6h10M7 2l4 4-4 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6h10M7 2l4 4-4 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
  transition: transform 0.6s var(--bounce);
}
.lp3-btn-arrow:hover::after { transform: translateX(4px); }

/* ==========================
   CARD BASE — 全カード共通ビジュアル
   .lp3-card を付けた全要素（stat / live-card / live-empty / champion /
   vault-cell / champion-row / series-tile / roster-card / archive-row /
   spotlight）に統一して適用。
   各カードクラスは content 側の padding / grid / flex のみを担当。

   左端アクセント: 各セクション固有色を --card-accent で受け取り、
   上→下に向かって徐々に透明化する縦ストライプを 4px で描画。
   （セクションごとの色は band-* ルールで指定）
   ========================== */
.lp3-card {
  position: relative;
  background:
    linear-gradient(to bottom, var(--card-accent, var(--pop-pink-d)) 0%, transparent 45%)
      left / 4px 100% no-repeat,
    var(--card);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  filter: var(--card-shadow);
  transition: transform 0.6s var(--bounce), filter 0.3s;
}
.lp3-card:hover {
  transform: translateY(-4px);
  filter: var(--card-shadow-hi);
}

/* セクションごとのカードアクセント色 — heading 下線と対応 */
.band-live      { --card-accent: #ff6f88; }
.band-champion  { --card-accent: #ff7a65; }
.band-series    { --card-accent: #e8b54a; }
.band-vault     { --card-accent: #a8b960; }
.band-roster    { --card-accent: #5bb88a; }
.band-archive   { --card-accent: #5a9ac5; }
.band-spotlight { --card-accent: #8d6fc7; }

/* ==========================
   STATS
   ========================== */
.lp3-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
/* stats は大会シリーズセクションの下部に統合配置 */
.lp3-series + .lp3-stats { margin-top: 40px; }
.lp3-stat {
  padding: 28px 22px;
  text-align: center;
}
a.lp3-stat { cursor: pointer; }
a.lp3-stat:hover .lp3-stat-num { color: var(--pop-pink-d); }
.lp3-stat-num {
  font-family: var(--mono);
  font-size: var(--fs-3xl); font-weight: 900;
  line-height: 1;
  color: var(--pop-pink-d);
  font-variant-numeric: tabular-nums;
}
.lp3-stat-label {
  font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-sub);
  margin-top: 10px;
  letter-spacing: 0.08em;
  font-family: var(--jp);
}

/* ==========================
   LIVE band
   ========================== */
.lp3-live-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 8px 4px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.lp3-live-scroller::-webkit-scrollbar { display: none; }
.lp3-live-scroller.is-dragging { cursor: grabbing; }
.lp3-live-scroller.is-dragging a { pointer-events: none; }

.lp3-live-card {
  flex: 0 0 min(92vw, 380px);
  padding: 26px;
}
.lp3-live-pulse {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--pop-pink-d);
  padding: 5px 12px;
  background: var(--pop-pink-l);
  border-radius: 999px;
  margin-bottom: 14px;
}
.lp3-live-pulse::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pop-pink-d);
  box-shadow: 0 0 12px rgba(255,106,166,0.9);
  animation: lp3Blink 1.1s ease-in-out infinite;
}
.lp3-live-name {
  font-weight: 900; font-size: var(--fs-md);
  color: var(--ink); margin-bottom: 10px; line-height: 1.4;
}
.lp3-live-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lp3-chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 800;
  padding: 4px 14px;
  background: var(--card);
  border: 1.5px solid var(--pop-lav);
  border-radius: 999px;
  color: var(--pop-lav-d);
}
.lp3-chip.is-pink { border-color: var(--pop-pink); color: var(--pop-pink-d); background: var(--pop-pink-l); }
.lp3-chip.is-mint { border-color: var(--pop-mint-d); color: var(--pop-mint-d); background: var(--pop-mint-l); }
.lp3-chip.is-lemon { border-color: var(--pop-lemon-d); color: #a88013; background: var(--pop-lemon-l); }

.lp3-live-progress {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 18px;
  background: var(--pop-pink-l);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.lp3-live-progress-round {
  font-family: var(--mono);
  font-weight: 900; font-size: var(--fs-xl);
  color: var(--pop-lav-d);
  line-height: 1;
}
.lp3-live-progress-sub {
  font-family: var(--jp);
  font-size: var(--fs-2xs); font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-sub);
}
.lp3-live-alive { font-size: var(--fs-sm); color: var(--ink-sub); }
.lp3-live-alive strong { color: var(--ink); font-weight: 900; font-size: 1rem; }

.lp3-live-top {
  margin-top: 14px; padding-top: 14px;
  border-top: 2px dashed rgba(255,184,214,0.6);
  display: flex; flex-direction: column; gap: 8px;
}
.lp3-live-top-row {
  display: grid; grid-template-columns: 24px 32px 1fr auto;
  align-items: center; gap: 10px;
}
.lp3-live-top-rank {
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-sm); color: var(--ink-light);
}
.lp3-live-top-row:first-child .lp3-live-top-rank { color: var(--pop-lemon-d); font-size: 1rem; }
.lp3-live-top-icon {
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--pop-pink);
}
.lp3-live-top-name {
  font-weight: 700; color: var(--ink); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-live-top-pt {
  font-family: var(--mono); font-weight: 900;
  color: var(--pop-pink-d);
  font-variant-numeric: tabular-nums;
}

.lp3-live-empty {
  padding: 48px 28px;
  text-align: center;
  color: var(--ink-sub);
}
.lp3-live-empty strong {
  display: block; color: var(--ink); font-size: var(--fs-md);
  margin-bottom: 12px; font-weight: 900;
}
.lp3-live-empty-sub {
  font-size: var(--fs-xs); color: var(--ink-sub);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ==========================
   CHAMPION SPOTLIGHT — 他カードと統一感を持たせたコンパクトサイズ
   ========================== */
.lp3-champion {
  padding: 22px 22px;
}
.lp3-champion::before {
  content: '♕';
  position: absolute; top: -8px; right: 14px;
  font-family: serif;
  font-size: 3.6rem;
  opacity: 0.10;
  transform: rotate(-14deg);
  color: var(--pop-pink-d);
  pointer-events: none;
}
.lp3-champion-grid {
  display: grid;
  grid-template-columns: minmax(84px, 104px) 1fr;
  gap: 18px; align-items: center;
  position: relative; z-index: 1;
}
.lp3-champion-avatar {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pop-pink);
  padding: 5px;
  outline: 4px solid var(--pop-pink-l);
  outline-offset: 4px;
  box-shadow:
    0 0 0 2px #fff,
    0 4px 12px rgba(255,106,166,0.18);
  margin: 4px;
  transform: scale(0.82) rotate(-8deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 1.6, 0.4, 1), opacity 0.5s ease;
}
.lp3-reveal.lp3-in .lp3-champion-avatar {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lp3-champion-avatar { transform: none; opacity: 1; transition: none; }
}
.lp3-champion-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}
.lp3-champion-body { min-width: 0; }
.lp3-champion-tournament-line {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-sub);
}
.lp3-champion-tournament {
  font-weight: 800; color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.lp3-champion-date {
  font-family: var(--mono);
  font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
/* 名前 + score を同じ行に配置して右の空きを活用、縦長解消 */
.lp3-champion-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lp3-champion-name {
  font-size: var(--fs-lg);
  font-weight: 900; color: var(--ink);
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp3-champion-score {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex-shrink: 0;
}
.lp3-champion-score-num {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 900; line-height: 1;
  color: var(--pop-pink-d);
  font-variant-numeric: tabular-nums;
}
.lp3-champion-score-unit {
  font-family: var(--mono);
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--ink-sub);
  letter-spacing: 0.08em;
}
.lp3-champion-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================
   VAULT
   ========================== */
.lp3-vault {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.lp3-vault-cell {
  padding: 26px;
}
.lp3-vault-cell.is-wide { grid-column: span 6; }
.lp3-vault-cell.is-half { grid-column: span 6; }
.lp3-vault-title {
  font-weight: 900; font-size: var(--fs-md);
  color: var(--ink); margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.lp3-vault-sub {
  font-size: var(--fs-xs); color: var(--ink-sub);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.lp3-champion-list { display: flex; flex-direction: column; gap: 12px; }
.lp3-champion-row {
  display: grid; grid-template-columns: 44px 48px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
}
.lp3-rank {
  font-size: var(--fs-xl);
  line-height: 1;
  text-align: center;
}

.lp3-avatar {
  width: 48px; height: 48px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(255,106,166,0.25);
}
.lp3-avatar-ph {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pop-pink), var(--pop-lav));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 900; text-align: center;
  line-height: 1.1;
}
.lp3-champion-name-text {
  font-weight: 800; color: var(--ink);
  font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-champion-count {
  font-family: var(--mono); font-weight: 900;
  color: var(--pop-pink-d); font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
.lp3-champion-count small {
  font-size: var(--fs-2xs); color: var(--ink-sub);
  font-weight: 700; margin-left: 4px;
}

.lp3-record {
  display: flex; align-items: center; gap: 16px;
}
.lp3-record .lp3-avatar { width: 60px; height: 60px; border-width: 3px; }
.lp3-record-num {
  font-family: var(--mono);
  font-size: var(--fs-3xl); font-weight: 900;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--pop-pink-d);
}
.lp3-record-num small {
  font-size: var(--fs-2xs); color: var(--ink-sub);
  font-weight: 800; margin-left: 4px;
  letter-spacing: 0.14em;
}
.lp3-record-info { min-width: 0; }
.lp3-record-name {
  font-weight: 900; color: var(--ink); font-size: 1rem;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-record-sub { font-size: var(--fs-xs); color: var(--ink-sub); }

.lp3-vault-empty {
  text-align: center; color: var(--ink-light);
  font-size: var(--fs-sm); padding: 20px 0;
}

/* ==========================
   SERIES
   ========================== */
.lp3-series {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lp3-series-tile {
  padding: 30px 24px;
}
.lp3-series-tile::before {
  content: attr(data-code);
  position: absolute;
  top: -18px; right: -8px;
  font-family: var(--mono);
  font-size: 6.5rem; font-weight: 900;
  color: var(--pop-pink);
  opacity: 0.32;
  letter-spacing: -0.08em;
  line-height: 1;
  pointer-events: none;
  transform: rotate(-8deg);
  transition: transform 0.5s var(--bounce), opacity 0.3s;
}
.lp3-series-tile:hover::before {
  transform: rotate(-4deg) scale(1.08);
  opacity: 0.45;
}
.lp3-series-tile:nth-child(2)::before { color: var(--pop-lav); }
.lp3-series-tile:nth-child(3)::before { color: var(--pop-mint-d); }
.lp3-series-tile:nth-child(4)::before { color: var(--pop-lemon-d); }
.lp3-series-tile:nth-child(5)::before { color: var(--pop-sky-d); }
.lp3-series-count {
  font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--pop-pink-d);
}
.lp3-series-label {
  font-size: var(--fs-lg); font-weight: 900;
  color: var(--ink); margin: 8px 0 16px;
  line-height: 1.25;
}
.lp3-series-latest-title {
  font-family: var(--jp);
  font-size: var(--fs-2xs); font-weight: 800;
  letter-spacing: 0.06em; color: var(--ink-light);
  margin-bottom: 4px;
}
.lp3-series-latest-name {
  font-size: var(--fs-sm); color: var(--ink); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 10px; line-height: 1.45;
}
.lp3-series-status {
  font-size: var(--fs-sm); color: var(--ink-sub); font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px;
}
.lp3-series-tile.is-empty { opacity: 0.5; }
.lp3-series-empty-note { font-size: var(--fs-xs); color: var(--ink-light); }

/* ==========================
   ROSTER
   ========================== */
.lp3-roster-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 4px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.lp3-roster-scroller::-webkit-scrollbar { display: none; }
.lp3-roster-scroller.is-dragging { cursor: grabbing; }
.lp3-roster-scroller.is-dragging a { pointer-events: none; }

/* ---- Scroller Navigation (prev/next + dots) ---- */
/* scroller + 左右矢印を内包するラッパー。
   PC では frame に左右 padding を設けて矢印をその padding 内に配置し、
   カード上に一切被らないようにする（Apple/Shopify 流外側配置）。 */
.lp3-scroller-frame {
  position: relative;
  overflow: visible;
}
@media (min-width: 769px) {
  .lp3-scroller-frame {
    padding-left: 48px;
    padding-right: 48px;
  }
}
.lp3-scroller-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
.lp3-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(58,45,80,0.12);
  transition: opacity 0.2s, transform 0.2s var(--bounce), background 0.2s, color 0.2s;
}
.lp3-nav-btn.lp3-nav-prev { left: 6px; }
.lp3-nav-btn.lp3-nav-next { right: 6px; }
.lp3-nav-btn svg { width: 16px; height: 16px; display: block; }
.lp3-nav-btn:hover:not(:disabled) {
  opacity: 1;
  background: var(--pop-pink-d);
  color: #fff8f0;
  transform: translateY(-50%) scale(1.08);
}
.lp3-nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.lp3-nav-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--pop-pink-d);
  outline-offset: 3px;
}
/* スマホは矢印を隠して drag/swipe + ドットのみに */
@media (max-width: 768px) {
  .lp3-nav-btn { display: none; }
}

.lp3-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.lp3-dots.is-compact { gap: 8px; }
.lp3-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(58,45,80,0.18);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--bounce);
}
.lp3-dots.is-compact .lp3-dot { width: 7px; height: 7px; }
.lp3-dot:hover { background: var(--pop-pink); }
.lp3-dot.is-active {
  background: var(--pop-pink-d);
  transform: scale(1.35);
}
.lp3-dot:focus-visible {
  outline: 2px solid var(--pop-pink-d);
  outline-offset: 3px;
}

.lp3-roster-card {
  flex: 0 0 210px;
  padding: 24px 18px;
  text-align: center;
  /* 縦幅を揃える（優勝有/無で高さが変わらないように） */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp3-roster-avatar {
  width: 100px; height: 100px;
  border-radius: 50%; object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 2px 10px rgba(58,45,80,0.12);
  margin: 4px auto 14px;
}
.lp3-roster-avatar-ph {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pop-pink), var(--pop-lav));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--fs-xs);
  margin: 4px auto 14px;
  border: 4px solid #fff;
  box-shadow: 0 6px 14px rgba(255,106,166,0.25);
}
.lp3-roster-name {
  font-weight: 900; color: var(--ink); font-size: 1rem;
  margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-roster-badges {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 10px;
  min-height: 60px; /* 優勝バッジ有無に関わらず同じ高さを確保 */
  justify-content: flex-start;
}
.lp3-roster-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pop-pink-l);
  color: var(--pop-pink-d);
  font-size: var(--fs-xs); font-weight: 800;
  white-space: nowrap;
}
.lp3-roster-badge.is-ghost {
  background: #fff;
  color: var(--ink-sub);
  border: 1px solid rgba(58,45,80,0.12);
}
.lp3-roster-best {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  border-top: 1px dashed rgba(58,45,80,0.12);
}
.lp3-roster-best-label {
  font-size: var(--fs-2xs); color: var(--ink-sub); font-weight: 700;
  letter-spacing: 0.04em;
}
.lp3-roster-best-num {
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp3-roster-best-num.is-na {
  color: var(--ink-light);
  font-weight: 700;
}
.lp3-roster-best-num small {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--ink-sub); margin-left: 2px;
}

/* ==========================
   ARCHIVE
   ========================== */
.lp3-archive-grid {
  display: grid; gap: 12px;
}
.lp3-archive-row {
  display: grid;
  grid-template-columns: 100px 1fr 130px 120px 90px;
  gap: 16px; align-items: center;
  padding: 16px 22px;
}
.lp3-archive-date {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--ink-sub); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lp3-archive-name {
  font-weight: 800; color: var(--ink); font-size: var(--fs-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-archive-event {
  font-family: var(--mono); font-size: var(--fs-2xs);
  font-weight: 900;
  color: var(--pop-lav-d);
  text-align: center;
  padding: 4px 10px;
  background: var(--pop-lav-l);
  border-radius: 999px;
  white-space: nowrap;
}
.lp3-archive-winner {
  font-size: var(--fs-sm); color: var(--ink-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp3-archive-winner strong { color: var(--pop-pink-d); font-weight: 900; }
.lp3-archive-status {
  font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 900;
  padding: 4px 10px; border-radius: 999px;
  text-align: center; white-space: nowrap;
  letter-spacing: 0.12em;
}
.lp3-archive-status.preparing { background: #ffd88a; color: #5a4210; }
.lp3-archive-status.active {
  background: var(--pop-pink-d); color: #fff8f0;
  box-shadow: 0 0 0 3px var(--pop-pink-l);
}
.lp3-archive-status.completed { background: rgba(58,45,80,0.10); color: #3a2d50; }

/* ==========================
   SPOTLIGHT (Interview)
   ========================== */
.lp3-spotlight-list {
  display: flex; flex-direction: column; gap: 14px;
}
.lp3-spotlight {
  padding: 22px 22px;
}
.lp3-spotlight-grid {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  position: relative;
}
.lp3-spotlight-avatar {
  width: 64px; height: 64px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 3px 10px rgba(255,106,166,0.22);
  flex-shrink: 0;
}
.lp3-spotlight-body {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
}
.lp3-spotlight-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-bottom: 2px;
}
.lp3-spotlight-meta .lp3-chip { flex-shrink: 0; }
.lp3-spotlight-tournament {
  font-size: var(--fs-sm); color: var(--ink); font-weight: 700;
  line-height: 1.4;
}
.lp3-spotlight-name {
  font-size: var(--fs-lg);
  font-weight: 900; color: var(--ink);
  margin: 0; line-height: 1.2;
}

/* ==========================
   CTA
   ========================== */
/* ==========================
   ANIMATIONS
   ========================== */
@keyframes lp3Blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.75); }
}

/* ==========================
   RESPONSIVE
   ========================== */
@media (max-width: 960px) {
  .lp3-band { padding: 88px 0 104px; }
  .band-hero { padding-top: 128px; padding-bottom: 120px; }
  .lp3-vault-cell.is-wide,
  .lp3-vault-cell.is-half { grid-column: span 12; }
  .lp3-champion { padding: 20px 18px; }
  .lp3-champion-grid { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .lp3-champion-avatar { max-width: 96px; margin: 0 auto; }
  .lp3-champion-meta { justify-content: center; }
  .lp3-champion-actions { justify-content: center; }
  .lp3-archive-row { grid-template-columns: 90px 1fr 90px; padding: 12px 16px; }
  .lp3-archive-event, .lp3-archive-winner { display: none; }
  .lp3-spotlight { padding: 20px 18px; }
  .lp3-spotlight-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
    text-align: center;
  }
  .lp3-spotlight-body { align-items: center; }
  .lp3-spotlight-meta { justify-content: center; }
  /* Section divider: タブレット */
  .lp3-section-divider { height: 62px; margin: -22px 0; }
  .lp3-divider-char { width: 36px; height: 36px; }
  .lp3-divider-char.is-left   { left: calc(50% - 72px); }
  .lp3-divider-char.is-center { left: calc(50% - 18px); }
  .lp3-divider-char.is-right  { left: calc(50% + 36px); }
  /* ロゴ・ナビ: タブレットサイズ（site-logo と top を揃える） */
  .site-logo { top: 14px !important; left: 14px !important; font-size: 1.05rem !important; gap: 8px !important; }
  .site-logo::before { width: 30px; height: 38px; }
  .nav-panel {
    top: 14px !important;
    right: 12px !important;
    gap: 4px !important;
    align-items: center;
    max-width: calc(100% - 180px);
  }
  .nav-panel-link { padding: 6px 10px !important; font-size: 0.88rem !important; }
  .nav-panel-link::before { width: 11px; height: 8px; }
}
@media (max-width: 560px) {
  .lp3-band { padding: 72px 0 88px; }
  .lp3-inner { padding: 0 16px; }
  .band-hero { padding-top: 120px; padding-bottom: 100px; }
  /* Section divider: スマホ */
  .lp3-section-divider { height: 54px; margin: -20px 0; }
  .lp3-divider-char { width: 30px; height: 30px; }
  .lp3-divider-char.is-left   { left: calc(50% - 58px); }
  .lp3-divider-char.is-center { left: calc(50% - 15px); }
  .lp3-divider-char.is-right  { left: calc(50% + 28px); }
  .lp3-hero-sub { font-size: var(--fs-base); line-height: 1.8; }
  .lp3-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lp3-stat { padding: 20px 14px; --notch: 14px; }
  .lp3-stat-num { font-size: var(--fs-2xl); }
  .lp3-live-card { padding: 22px 20px; --notch: 14px; }
  .lp3-champion { padding: 18px 14px; }
  .lp3-champion-score-num { font-size: var(--fs-xl); }
  .lp3-vault-cell { padding: 22px 18px; --notch: 14px; }
  .lp3-champion-row { grid-template-columns: 36px 42px 1fr auto; gap: 10px; padding: 10px 12px; }
  .lp3-roster-card { flex-basis: 170px; padding: 20px 14px; --notch: 14px; }
  .lp3-roster-avatar { width: 78px; height: 78px; }
  .lp3-roster-avatar-ph { width: 78px; height: 78px; }
  .lp3-series-tile { padding: 24px 20px; --notch: 14px; }
  /* ボタン: SPコンパクト */
  .lp3-btn { padding: 11px 22px; font-size: var(--fs-sm); }
  /* アーカイブ: コンパクトレイアウト */
  .lp3-archive-row { grid-template-columns: 80px 1fr 70px; gap: 10px; padding: 10px 12px; font-size: var(--fs-sm); }
  .lp3-archive-date { font-size: var(--fs-xs); }
  .lp3-archive-name { font-size: var(--fs-sm); }
  /* ヒーローアクション: 縦並び */
  .lp3-hero-actions { flex-direction: column; align-items: stretch; max-width: 280px; margin: 36px auto 0; }
  /* ロゴ: SPコンパクト */
  .site-logo { top: 12px !important; left: 12px !important; font-size: 0.92rem !important; gap: 6px !important; }
  .site-logo::before { width: 26px; height: 32px; }
  /* ナビ: site-logo と同段揃え */
  .nav-panel {
    top: 12px !important;
    right: 8px !important;
    align-items: center;
    max-width: calc(100% - 150px);
  }
  .nav-panel-link { padding: 5px 10px !important; font-size: 0.82rem !important; }
  .nav-panel-link::before { width: 10px; height: 7px; }
}
@media (max-width: 380px) {
  .lp3-hero-title { font-size: var(--fs-2xl); }
  .lp3-stats { gap: 10px; }
  .lp3-stat { padding: 16px 10px; }
  .lp3-stat-num { font-size: var(--fs-xl); }
  /* Section divider: 極小スマホ */
  .lp3-section-divider { height: 48px; margin: -18px 0; }
  .lp3-divider-char { width: 26px; height: 26px; }
  .lp3-divider-char.is-left   { left: calc(50% - 50px); }
  .lp3-divider-char.is-center { left: calc(50% - 13px); }
  .lp3-divider-char.is-right  { left: calc(50% + 24px); }
  /* ロゴ: 極小 */
  .site-logo { font-size: 0.82rem !important; }
  .site-logo::before { width: 22px; height: 28px; }
  /* ナビ: 極小幅でも site-logo と同段維持 */
  .nav-panel { gap: 2px !important; max-width: calc(100% - 130px); }
  .nav-panel-link { padding: 4px 8px !important; font-size: 0.74rem !important; gap: 4px !important; }
  .nav-panel-link::before { width: 9px; height: 6px; }
}

/* ==========================
   Reduced Motion
   ========================== */
@media (prefers-reduced-motion: reduce) {
  .lp3 *,
  .lp3-band {
    animation: none !important;
  }
  .lp3-reveal { opacity: 1 !important; transform: none !important; }
  .lp3 * { transition-duration: 0.01ms !important; }
}