/* =========================================================
   sppoX × 千葉ジェッツ — KAWASAKI BRAVE THUNDERS skin  [data-skin="thunders"]
   Brand colors (厳守):
     BRAVE RED  #8F0038  (PANTONE 208C)
     VICTORY GOLD  #F4ECDD  (PANTONE 871C)
   Logo usage priority:
     1位 platinum logo × RED bg      → hero / final CTA
     2位 red logo × white/light bg   → topbar / body
     3位 platinum logo × black/dark  → court / footer
   ========================================================= */

[data-skin="thunders"] {
  --bg:        #f3efe8;
  --bg-2:      #ece6db;
  --panel:     #ffffff;
  --panel-2:   #f5f7f7;
  --line:      rgba(143, 0, 56, .20);
  --line-soft: rgba(13, 14, 17, .08);

  --red:        #8F0038;
  --red-deep:   #6D002B;
  --red-dark:   #4A001D;
  --platinum:   #B68F27;
  --platinum-2: #9A7820;

  --brand:     #8F0038;
  --brand-hi:  #B51A52;
  --brand-deep:#6D002B;
  --accent:    #8F0038;
  --accent-hi: #B51A52;
  --gold:      #B68F27;
  --silver:    #8b9196;
  --bronze:    #b06a34;
  --lime:      #8F0038;

  --ink:   #0d0e11;
  --ink-2: #44484d;
  --ink-3: #828890;

  --glow-brand:  0 6px 18px rgba(143, 0, 56, .22);
  --glow-accent: 0 8px 22px rgba(143, 0, 56, .30);
  --band: #F4ECDD;

  --display-wt: 900;
}

/* ---------- Stage / column (light) ---------- */
[data-skin="thunders"] .stage { background: #d8d2c6; }
[data-skin="thunders"] .lp {
  background: linear-gradient(180deg, #ffffff, #f3efe8 42%);
  box-shadow: 0 0 0 1px var(--line-soft), 0 40px 100px rgba(30,15,20,.22);
}
[data-skin="thunders"] .lp::before { opacity: .4; }   /* faint dark grid on light */
[data-skin="thunders"] .hud { color: var(--red-deep); }

/* section banding — official team colors: WHITE × VICTORY GOLD (#F4ECDD) */
[data-skin="thunders"] .lp > section:not(.hero):not(.final) { background: #ffffff; }
[data-skin="thunders"] .lp > section:not(.hero):not(.final):nth-of-type(even) { background: #F4ECDD; }
/* red chapter divider stays as the BRAVE RED accent */
[data-skin="thunders"] .sec-idx::before { background: linear-gradient(90deg, var(--red) 0, var(--red) 34px, rgba(13,14,17,.1) 34px, rgba(13,14,17,.1) 100%); }

/* ---------- Angular cards: use element fill (the ::before panel does not
   composite over this skin's backgrounds), with a hairline red edge ---------- */
[data-skin="thunders"] .cut { background: var(--panel); box-shadow: 0 3px 12px rgba(13,14,17,.07), inset 0 0 0 1px var(--line); }
[data-skin="thunders"] .cut::before { display: none; }

/* ---------- Buttons ---------- */
[data-skin="thunders"] .btn-cta { color: #fff; box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.3); }
[data-skin="thunders"] .btn-brand { color: #fff; box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.3); }
[data-skin="thunders"] .btn-ghost { color: var(--ink); background: #fff; border: 1px solid var(--line); }

/* ---------- Topbar  [2位 red logo on white] ---------- */
[data-skin="thunders"] .topbar {
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
[data-skin="thunders"] .topbar .jets-logo { height: 38px; width: auto; }
[data-skin="thunders"] .topbar .sppox-mini { height: 14px; width: auto; opacity: .9; }
[data-skin="thunders"] .topbar .cobrand { display: flex; align-items: center; gap: 8px; }
[data-skin="thunders"] .topbar .cobrand .x { color: var(--ink-3); font-family: var(--hud); font-weight: 700; font-size: 12px; }
[data-skin="thunders"] .topbar .club-tag { border-color: var(--red); color: var(--red-deep); }

/* ---------- Sticky bottom CTA ---------- */
[data-skin="thunders"] .bottom-cta { background: linear-gradient(180deg, rgba(238,240,240,0), #f3efe8 38%, #f3efe8); }
[data-skin="thunders"] .bottom-cta .meta .k { color: var(--ink-3); }
[data-skin="thunders"] .bottom-cta .meta .v { color: var(--red); }

/* =========================================================
   HERO  [1位 platinum logo × RED bg]
   ========================================================= */
[data-skin="thunders"] .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #B51A52, transparent 60%),
    linear-gradient(180deg, var(--red), var(--red-deep));
  margin-bottom: 2px;
}
/* logo embedded as a large background watermark */
[data-skin="thunders"] .hero-watermark {
  position: absolute; top: -60px; right: -120px; width: 440px; height: 440px; z-index: 0; pointer-events: none;
  background: url("../assets/thunders/emblem.png") no-repeat center / contain;
  opacity: .16;
}
[data-skin="thunders"] .hero > *:not(.hero-watermark) { position: relative; z-index: 1; }
[data-skin="thunders"] .hero .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
[data-skin="thunders"] .hero .eyebrow::before { background: var(--platinum); box-shadow: none; }
[data-skin="thunders"] .hero .tag { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; }
[data-skin="thunders"] .hero .tag b { color: var(--platinum); }
[data-skin="thunders"] .hero .tag.hot { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.42); color: #fff; }
[data-skin="thunders"] .hero h1 { color: #fff; font-size: clamp(27px, 7.6vw, 35px); }
/* hero catchphrase on red: white base + platinum highlight chip */
[data-skin="thunders"] .hero-catch { color: #fff; }
[data-skin="thunders"] .hero-catch .catch-hl { color: var(--red-deep); background: var(--platinum); padding: 0 .2em; border-radius: 6px; }
/* big main catch on red hero — vivid playful text color, no chip */
[data-skin="thunders"] .hero-bigcatch { color: #fff; }
[data-skin="thunders"] .hero-bigcatch .catch-hl {
  background: none; padding: 0; box-shadow: none; border-radius: 0;
  color: #ffd21a;
  background-image: linear-gradient(96deg, #ffe14d 0%, #7CF6A0 22%, #59E6FF 42%, #C98CFF 62%, #FF8AC4 82%, #FFD24D 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 16px rgba(255, 255, 255, .35);
  font-size: 1.16em;
}
[data-skin="thunders"] .hero h1 .hl1 { position: relative; display: inline-block; white-space: nowrap; margin-top: 6px; }
[data-skin="thunders"] .hero h1 .fes { font-size: 1.5em; padding: 3px 15px 7px; }
[data-skin="thunders"] .hero h1 .nw {
  position: absolute; top: -15px; right: -12px;
  font-size: .42em; line-height: 1;
  background: var(--red); color: #fff;
  border: 2px solid #fff; border-radius: 999px;
  padding: 6px 12px; transform: rotate(-5deg);
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
}
[data-skin="thunders"] .hero h1 .fes {
  background: var(--platinum); color: var(--red-deep);
  box-shadow: 0 5px 0 rgba(0,0,0,.18); transform: skewX(-4deg);
}
[data-skin="thunders"] .hero h1 .cy { color: var(--platinum); text-shadow: 0 2px 10px rgba(0,0,0,.25); }
[data-skin="thunders"] .hero .sub { color: rgba(255,255,255,.88); }
[data-skin="thunders"] .hero .hero-note { color: rgba(255,255,255,.72); }
/* white info cards on red — element bg (::before panel doesn't composite over the red hero) */
[data-skin="thunders"] .hero-info .info-cell {
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
[data-skin="thunders"] .hero-info .info-cell::before { display: none; }
[data-skin="thunders"] .hero .info-cell .k { color: var(--ink-3); }
[data-skin="thunders"] .hero .info-cell .v { color: var(--ink); }
[data-skin="thunders"] .hero .info-cell .v em,
[data-skin="thunders"] .hero .info-cell .v .free { color: var(--red); }
/* hero CTA = platinum button w/ red text on red bg */
[data-skin="thunders"] .hero-cta .btn-cta {
  background: linear-gradient(180deg, #fff, var(--platinum));
  color: var(--red-deep);
  box-shadow: 0 6px 0 var(--platinum-2), 0 12px 26px rgba(0,0,0,.28);
  animation: none;
}
[data-skin="thunders"] .hero-cta .btn-cta:hover { filter: brightness(1.02); }
/* HUD chips over video: keep dark, red/platinum numerals */
[data-skin="thunders"] .hud-chip .v { color: var(--platinum); }
[data-skin="thunders"] .hud-chip.rank .v { color: #D65B86; }

/* =========================================================
   GAME → LAUNCH  [dark court → platinum/red]
   ========================================================= */
[data-skin="thunders"] .game-sec { background: linear-gradient(180deg, transparent, rgba(143,0,56,.05), transparent); }
/* dark experience stage → light text */
[data-skin="thunders"] .xp-hook-k { color: #fff; }
[data-skin="thunders"] .xp-score .num { color: #D65B86; text-shadow: 0 0 24px rgba(143,0,56,.5); }
[data-skin="thunders"] .xp-score small { color: rgba(255,255,255,.82); }
[data-skin="thunders"] .xp-rank { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
[data-skin="thunders"] .xp-rank b { color: var(--platinum); }
[data-skin="thunders"] .xp-rank span { color: rgba(255,255,255,.55); }
[data-skin="thunders"] .sensor-badge { color: #fff; background: rgba(143,0,56,.9); border-color: rgba(255,255,255,.4); }

/* =================== FES banner =================== */
[data-skin="thunders"] .fes-banner { background: radial-gradient(120% 100% at 50% 0%, rgba(143,0,56,.12), transparent 66%), var(--panel); }
[data-skin="thunders"] .fes-banner .vs { color: var(--red-deep); }
[data-skin="thunders"] .fes-banner h2 .out { -webkit-text-stroke: 1.5px var(--red); }
[data-skin="thunders"] .prize.p1 { background: linear-gradient(100deg, rgba(143,0,56,.08), transparent); border-color: rgba(143,0,56,.4); }
[data-skin="thunders"] .prize.p1 .medal { color: var(--gold); }

/* =================== growth loop =================== */
[data-skin="thunders"] .slash-bg::after { background: linear-gradient(115deg, transparent 40%, rgba(143,0,56,.05) 40%, rgba(143,0,56,.05) 52%, transparent 52%); }
[data-skin="thunders"] .loop-result { background: radial-gradient(100% 100% at 50% 0%, rgba(143,0,56,.08), transparent), var(--panel); }
[data-skin="thunders"] .loop-result .v .lime { color: var(--red); }

/* =================== unlock (club) =================== */
[data-skin="thunders"] .unlock .lock-badge.unlocked { background: linear-gradient(100deg, var(--red), var(--red-hi, var(--brand-hi))); color: #fff; }
[data-skin="thunders"] .unlock .club-k { color: var(--red-deep); }
[data-skin="thunders"] .unlock .feat::before { color: var(--red); }
[data-skin="thunders"] .unlock .club-logo-ph { background: #fff; border: 1px solid var(--line); }
[data-skin="thunders"] .swap-note { color: var(--ink-3); }

/* =================== AI =================== */
[data-skin="thunders"] .ai-sec { background: radial-gradient(120% 60% at 50% 0%, rgba(143,0,56,.05), transparent); }
[data-skin="thunders"] .ai-step .ic { background: rgba(143,0,56,.07); border-color: var(--line); color: var(--red); }
[data-skin="thunders"] .ai-menu .head .badge { background: var(--red); color: #fff; }
[data-skin="thunders"] .ai-task.done .chk { background: var(--red); border-color: var(--red); color: #fff; }

/* =================== parents =================== */
[data-skin="thunders"] .parent-sec { background: var(--bg-2); }
[data-skin="thunders"] .preason .ic { background: linear-gradient(150deg, var(--brand-hi), var(--red)); border: none; color: #fff; box-shadow: var(--glow-brand); }
[data-skin="thunders"] .review .stars { color: var(--gold); }
[data-skin="thunders"] .review .rv-head { color: var(--red-deep); }
[data-skin="thunders"] .review .rtag { color: var(--red-deep); border-color: var(--line); }

/* =================== steps =================== */
[data-skin="thunders"] .step .marker .dot { color: var(--red); }
[data-skin="thunders"] .step.is-last .marker .dot { color: #fff; }
[data-skin="thunders"] .step.is-last .txt h4 { color: var(--red); }
[data-skin="thunders"] .goal-badge { color: var(--red); border-color: var(--red); }

/* =========================================================
   FINAL CTA  [1位 platinum logo × RED bg]
   ========================================================= */
[data-skin="thunders"] .final {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #B51A52, transparent 60%),
    linear-gradient(180deg, var(--red), var(--red-deep));
}
[data-skin="thunders"] .final-watermark {
  position: absolute; bottom: -90px; right: -120px; width: 420px; height: 420px; z-index: 0; pointer-events: none;
  background: url("../assets/thunders/emblem.png") no-repeat center / contain;
  opacity: .13;
}
[data-skin="thunders"] .final > *:not(.final-watermark) { position: relative; z-index: 1; }
[data-skin="thunders"] .final .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
[data-skin="thunders"] .final .eyebrow::before { background: var(--platinum); box-shadow: none; }
[data-skin="thunders"] .final h2 { color: #fff; }
[data-skin="thunders"] .final h2 .cy { color: var(--platinum); text-shadow: 0 2px 10px rgba(0,0,0,.25); }
[data-skin="thunders"] .final p { color: rgba(255,255,255,.86); }
[data-skin="thunders"] .final .btn-cta {
  background: linear-gradient(180deg, #fff, var(--platinum)); color: var(--red-deep);
  box-shadow: 0 6px 0 var(--platinum-2), 0 12px 28px rgba(0,0,0,.32); animation: none;
}
[data-skin="thunders"] .final .trust .t { border-color: rgba(255,255,255,.42); color: rgba(255,255,255,.82); }

/* =================== footer  [3位 platinum × dark] =================== */
[data-skin="thunders"] .lp-foot { background: #fff; border-top: 1px solid var(--line); }
[data-skin="thunders"] .lp-foot .foot-jets { height: 42px; width: auto; margin: 0 auto 14px; }
[data-skin="thunders"] .lp-foot .links { color: var(--ink-2); }
[data-skin="thunders"] .lp-foot .links a:hover { color: var(--red); }
[data-skin="thunders"] .lp-foot .cp { color: var(--ink-3); }
[data-skin="thunders"] .lp-foot .cobrand-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
[data-skin="thunders"] .lp-foot .cobrand-foot .x { color: rgba(255,255,255,.4); font-family: var(--hud); font-size: 12px; }
[data-skin="thunders"] .lp-foot .cobrand-foot .sppox-mini { height: 16px; opacity: .85; }

/* =================== pricing =================== */
[data-skin="thunders"] .price-card { background: #fff; border: none; box-shadow: 0 12px 36px rgba(13,14,17,.12), inset 0 0 0 1px var(--line); }
[data-skin="thunders"] .price-was { color: var(--ink-3); }
[data-skin="thunders"] .price-now { color: var(--red); }
[data-skin="thunders"] .price-now small { border-color: var(--red); color: var(--red); }
[data-skin="thunders"] .price-row small { border-color: var(--ink); color: var(--ink); }
[data-skin="thunders"] .price-trial em { color: var(--red); }
[data-skin="thunders"] .price-ribbon { background: var(--red); }


/* ---- Thunders watermark: the lightning bolt as a big full-bleed white mark ---- */
[data-skin="thunders"] .hero-watermark,
[data-skin="thunders"] .final-watermark {
  filter: brightness(0) invert(1);
  width: 118%; height: 118%;
  background-size: contain;
  background-position: center;
  transform: rotate(-4deg);
}
[data-skin="thunders"] .hero-watermark  { top: -9%;  right: -9%; left: -9%; opacity: .12; }
[data-skin="thunders"] .final-watermark { bottom: -9%; right: -9%; left: -9%; top: -9%; opacity: .10; }
/* topbar / footer wordmark sizing (full-width horizontal lockup) */
[data-skin="thunders"] .topbar .jets-logo { height: 26px; width: auto; }
[data-skin="thunders"] .lp-foot .foot-jets { height: auto; width: min(78%, 320px); }

/* coach video tag — white text on brand red */
[data-skin="thunders"] .coach-video .vtag { color: #fff; }

/* AI TRY: 白背景のループノード内で番号バッジを視認できるように */
[data-skin="thunders"] .loop-step .node .n { color: #fff; border: 1.5px solid #fff; }