/* =========================================================
   sppoX × 千葉ジェッツ — CHIBA JETS skin  [data-skin="jets"]
   Brand colors (厳守):
     CHALLENGING RED  #F0001E  (PANTONE 199C)
     RISING PLATINUM  #DEE1E1  (PANTONE 643C)
   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="jets"] {
  --bg:        #eef0f0;
  --bg-2:      #e4e7e7;
  --panel:     #ffffff;
  --panel-2:   #f5f7f7;
  --line:      rgba(240, 0, 30, .20);
  --line-soft: rgba(13, 14, 17, .08);

  --red:        #F0001E;
  --red-deep:   #c1001a;
  --red-dark:   #7d0011;
  --platinum:   #DEE1E1;
  --platinum-2: #c2c8c8;

  --brand:     #F0001E;
  --brand-hi:  #ff2236;
  --brand-deep:#c1001a;
  --accent:    #F0001E;
  --accent-hi: #ff2236;
  --gold:      #c79a2b;
  --silver:    #8b9196;
  --bronze:    #b06a34;
  --lime:      #F0001E;

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

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

  --display-wt: 900;
}

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

/* section banding — official team colors: WHITE × RISING PLATINUM (#DEE1E1) */
[data-skin="jets"] .lp > section:not(.hero):not(.final) { background: #ffffff; }
[data-skin="jets"] .lp > section:not(.hero):not(.final):nth-of-type(even) { background: #DEE1E1; }
/* red chapter divider stays as the CHALLENGING RED accent */
[data-skin="jets"] .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="jets"] .cut { background: var(--panel); box-shadow: 0 3px 12px rgba(13,14,17,.07), inset 0 0 0 1px var(--line); }
[data-skin="jets"] .cut::before { display: none; }

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

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

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

/* =========================================================
   HERO  [1位 platinum logo × RED bg]
   ========================================================= */
[data-skin="jets"] .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #ff2236, transparent 60%),
    linear-gradient(180deg, var(--red), var(--red-deep));
  margin-bottom: 2px;
}
/* logo embedded as a large background watermark */
[data-skin="jets"] .hero-watermark {
  position: absolute; top: -60px; right: -120px; width: 440px; height: 440px; z-index: 0; pointer-events: none;
  background: url("../assets/jets/emblem-platinum.png") no-repeat center / contain;
  opacity: .16;
}
[data-skin="jets"] .hero > *:not(.hero-watermark) { position: relative; z-index: 1; }
[data-skin="jets"] .hero .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
[data-skin="jets"] .hero .eyebrow::before { background: var(--platinum); box-shadow: none; }
[data-skin="jets"] .hero .tag { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; }
[data-skin="jets"] .hero .tag b { color: var(--platinum); }
[data-skin="jets"] .hero .tag.hot { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.42); color: #fff; }
[data-skin="jets"] .hero h1 { color: #fff; font-size: clamp(27px, 7.6vw, 35px); }
/* hero catchphrase on red: white base + platinum highlight chip */
[data-skin="jets"] .hero-catch { color: #fff; }
[data-skin="jets"] .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="jets"] .hero-bigcatch { color: #fff; }
[data-skin="jets"] .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="jets"] .hero h1 .hl1 { position: relative; display: inline-block; white-space: nowrap; margin-top: 6px; }
[data-skin="jets"] .hero h1 .fes { font-size: 1.5em; padding: 3px 15px 7px; }
[data-skin="jets"] .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="jets"] .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="jets"] .hero h1 .cy { color: var(--platinum); text-shadow: 0 2px 10px rgba(0,0,0,.25); }
[data-skin="jets"] .hero .sub { color: rgba(255,255,255,.88); }
[data-skin="jets"] .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="jets"] .hero-info .info-cell {
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
[data-skin="jets"] .hero-info .info-cell::before { display: none; }
[data-skin="jets"] .hero .info-cell .k { color: var(--ink-3); }
[data-skin="jets"] .hero .info-cell .v { color: var(--ink); }
[data-skin="jets"] .hero .info-cell .v em,
[data-skin="jets"] .hero .info-cell .v .free { color: var(--red); }
/* hero CTA = platinum button w/ red text on red bg */
[data-skin="jets"] .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="jets"] .hero-cta .btn-cta:hover { filter: brightness(1.02); }
/* HUD chips over video: keep dark, red/platinum numerals */
[data-skin="jets"] .hud-chip .v { color: var(--platinum); }
[data-skin="jets"] .hud-chip.rank .v { color: #ff6b7d; }

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

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

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

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

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

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

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

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

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

/* =================== pricing =================== */
[data-skin="jets"] .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="jets"] .price-was { color: var(--ink-3); }
[data-skin="jets"] .price-now { color: var(--red); }
[data-skin="jets"] .price-now small { border-color: var(--red); color: var(--red); }
[data-skin="jets"] .price-row small { border-color: var(--ink); color: var(--ink); }
[data-skin="jets"] .price-trial em { color: var(--red); }
[data-skin="jets"] .price-ribbon { background: var(--red); }

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

/* special-challenge badge cards — clearer frame on the light section bg */
[data-skin="jets"] .spbadge {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--sp, var(--accent)) 92%, transparent);
  box-shadow:
    0 12px 30px rgba(13,14,17,.28),
    0 0 0 3px rgba(255,255,255,.92),
    inset 0 0 26px color-mix(in srgb, var(--sp, var(--accent)) 14%, transparent);
}