/* =========================================================
   sppoX × Heartz Basketball School skin  [data-skin="heartz"]
   Brand colors:
     HEARTZ RED   #ED0017
     HEARTZ BLUE  #004AAB
     WHITE        #FFFFFF
     BLACK        #000000
   Pop / cute kids direction — BLUE hero (mascot pops), RED final CTA.
   ========================================================= */

[data-skin="heartz"] {
  --bg:        #f4f7fc;
  --bg-2:      #e9f0fb;
  --panel:     #ffffff;
  --panel-2:   #f3f7fd;
  --line:      rgba(0, 74, 171, .18);
  --line-soft: rgba(0, 30, 80, .08);

  --red:        #ED0017;
  --red-deep:   #C70013;
  --red-dark:   #9E000F;
  --blue:       #004AAB;
  --blue-deep:  #003B86;
  --blue-dark:  #002A63;
  /* "platinum" slot = the pop accent that contrasts on the blue hero */
  --platinum:   #ffffff;
  --platinum-2: #d9e4f4;

  --brand:     #ED0017;
  --brand-hi:  #FF2C40;
  --brand-deep:#C70013;
  --accent:    #ED0017;
  --accent-hi: #FF2C40;
  --gold:      #F5A800;
  --silver:    #8b9196;
  --bronze:    #b06a34;
  --lime:      #004AAB;

  --ink:   #0c1430;
  --ink-2: #3a4566;
  --ink-3: #7b86a3;

  --glow-brand:  0 6px 18px rgba(237, 0, 23, .24);
  --glow-accent: 0 8px 22px rgba(237, 0, 23, .32);
  --band: #e9f0fb;

  --display-wt: 900;
}

/* ---------- Stage / column ---------- */
[data-skin="heartz"] .stage { background: #cdd9ee; }
[data-skin="heartz"] .lp {
  background: linear-gradient(180deg, #ffffff, #f4f7fc 42%);
  box-shadow: 0 0 0 1px var(--line-soft), 0 40px 100px rgba(0,20,60,.22);
}
[data-skin="heartz"] .lp::before { opacity: .4; }
[data-skin="heartz"] .hud { color: var(--blue-deep); }

/* section banding — WHITE × light blue */
[data-skin="heartz"] .lp > section:not(.hero):not(.final) { background: #ffffff; }
[data-skin="heartz"] .lp > section:not(.hero):not(.final):nth-of-type(even) { background: #e9f0fb; }
[data-skin="heartz"] .sec-idx::before { background: linear-gradient(90deg, var(--red) 0, var(--red) 34px, rgba(0,74,171,.14) 34px, rgba(0,74,171,.14) 100%); }

/* ---------- Cards ---------- */
[data-skin="heartz"] .cut { background: var(--panel); box-shadow: 0 3px 12px rgba(0,30,80,.08), inset 0 0 0 1px var(--line); }
[data-skin="heartz"] .cut::before { display: none; }

/* ---------- Buttons ---------- */
[data-skin="heartz"] .btn-cta { color: #fff; box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.3); }
[data-skin="heartz"] .btn-brand { color: #fff; background: linear-gradient(180deg, var(--brand-hi), var(--red)); box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.3); }
[data-skin="heartz"] .btn-ghost { color: var(--blue-deep); background: #fff; border: 1px solid var(--line); }

/* ---------- Topbar ---------- */
[data-skin="heartz"] .topbar {
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
[data-skin="heartz"] .topbar .jets-logo { height: 30px; width: auto; }
[data-skin="heartz"] .topbar .cobrand { display: flex; align-items: center; gap: 8px; }
[data-skin="heartz"] .topbar .club-tag { border-color: var(--blue); color: var(--blue-deep); }

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

/* =========================================================
   HERO  [BLUE bg → the red-heart mascot pops]
   ========================================================= */
[data-skin="heartz"] .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #1565d6, transparent 60%),
    linear-gradient(180deg, var(--blue), var(--blue-deep));
  margin-bottom: 2px;
}
/* mascot as a soft full-bleed brand watermark (top-right) */
[data-skin="heartz"] .hero-watermark {
  position: absolute; top: -6%; right: -10%; width: 78%; height: 78%; z-index: 0; pointer-events: none;
  background: url("../assets/heartz/mascot-dribble.png") no-repeat top right / contain;
  opacity: .2;
}
[data-skin="heartz"] .hero > *:not(.hero-watermark) { position: relative; z-index: 1; }
[data-skin="heartz"] .hero .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; }
[data-skin="heartz"] .hero .eyebrow::before { background: var(--red); box-shadow: 0 0 10px rgba(237,0,23,.6); }
[data-skin="heartz"] .hero .tag { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); color: #fff; }
[data-skin="heartz"] .hero .tag b { color: #fff; }
[data-skin="heartz"] .hero .tag.hot { background: var(--red); border-color: rgba(255,255,255,.5); color: #fff; }
[data-skin="heartz"] .hero h1 { color: #fff; font-size: clamp(27px, 7.6vw, 35px); }
[data-skin="heartz"] .hero-catch { color: #fff; }
[data-skin="heartz"] .hero-catch .catch-hl { color: #fff; background: var(--red); padding: 0 .2em; border-radius: 6px; }
/* big main catch — playful multi-color text on blue */
[data-skin="heartz"] .hero-bigcatch { color: #fff; }
[data-skin="heartz"] .hero-bigcatch .catch-hl {
  background: none; padding: 0; box-shadow: none; border-radius: 0;
  color: #ffd21a;
  background-image: linear-gradient(96deg, #ffe14d 0%, #ff8ac4 26%, #ff5a5a 50%, #ffd24d 74%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 16px rgba(255, 255, 255, .3);
  font-size: 1.16em;
}
[data-skin="heartz"] .hero h1 .hl1 { position: relative; display: inline-block; white-space: nowrap; margin-top: 6px; }
[data-skin="heartz"] .hero h1 .fes { font-size: 1.5em; padding: 3px 15px 7px; }
[data-skin="heartz"] .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="heartz"] .hero h1 .fes {
  background: #fff; color: var(--red);
  box-shadow: 0 5px 0 var(--red-deep); transform: skewX(-4deg);
}
[data-skin="heartz"] .hero h1 .cy { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
[data-skin="heartz"] .hero .sub { color: rgba(255,255,255,.9); }
[data-skin="heartz"] .hero .hero-note { color: rgba(255,255,255,.74); }
/* white info cards on blue */
[data-skin="heartz"] .hero-info .info-cell { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
[data-skin="heartz"] .hero-info .info-cell::before { display: none; }
[data-skin="heartz"] .hero .info-cell .k { color: var(--ink-3); }
[data-skin="heartz"] .hero .info-cell .v { color: var(--ink); }
[data-skin="heartz"] .hero .info-cell .v em,
[data-skin="heartz"] .hero .info-cell .v .free { color: var(--red); }
/* hero CTA = white button, red text, red 3D edge */
[data-skin="heartz"] .hero-cta .btn-cta {
  background: #fff;
  color: var(--red);
  box-shadow: 0 6px 0 var(--red-deep), 0 12px 26px rgba(0,0,0,.28);
  animation: none;
}
[data-skin="heartz"] .hero-cta .btn-cta:hover { filter: brightness(1.02); }
[data-skin="heartz"] .hud-chip .v { color: #fff; }
[data-skin="heartz"] .hud-chip.rank .v { color: #FFD24D; }

/* =========================================================
   GAME → LAUNCH
   ========================================================= */
[data-skin="heartz"] .game-sec { background: linear-gradient(180deg, transparent, rgba(0,74,171,.05), transparent); }
[data-skin="heartz"] .xp-hook-k { color: #fff; }
[data-skin="heartz"] .xp-score .num { color: #FF4D5E; text-shadow: 0 0 24px rgba(237,0,23,.5); }
[data-skin="heartz"] .xp-score small { color: rgba(255,255,255,.82); }
[data-skin="heartz"] .xp-rank { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
[data-skin="heartz"] .xp-rank b { color: #6FB0FF; }
[data-skin="heartz"] .xp-rank span { color: rgba(255,255,255,.55); }
[data-skin="heartz"] .sensor-badge { color: #fff; background: rgba(237,0,23,.9); border-color: rgba(255,255,255,.4); }

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

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

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

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

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

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

/* =========================================================
   FINAL CTA  [RED bg]
   ========================================================= */
[data-skin="heartz"] .final {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #ff3346, transparent 60%),
    linear-gradient(180deg, var(--red), var(--red-deep));
}
[data-skin="heartz"] .final-watermark {
  position: absolute; bottom: -90px; right: -120px; width: 420px; height: 420px; z-index: 0; pointer-events: none;
  background: url("../assets/heartz/mascot-shoot.png") no-repeat center / contain;
  opacity: .12;
  filter: brightness(0) invert(1);
}
[data-skin="heartz"] .final > *:not(.final-watermark) { position: relative; z-index: 1; }
[data-skin="heartz"] .final .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; }
[data-skin="heartz"] .final .eyebrow::before { background: #fff; box-shadow: none; }
[data-skin="heartz"] .final h2 { color: #fff; }
[data-skin="heartz"] .final h2 .cy { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
[data-skin="heartz"] .final p { color: rgba(255,255,255,.88); }
[data-skin="heartz"] .final .btn-cta {
  background: #fff; color: var(--red);
  box-shadow: 0 6px 0 var(--red-dark), 0 12px 28px rgba(0,0,0,.32); animation: none;
}
[data-skin="heartz"] .final .trust .t { border-color: rgba(255,255,255,.42); color: rgba(255,255,255,.84); }

/* =================== footer =================== */
[data-skin="heartz"] .lp-foot { background: #fff; border-top: 1px solid var(--line); }
[data-skin="heartz"] .lp-foot .foot-jets { height: auto; width: min(70%, 280px); margin: 0 auto 14px; }
[data-skin="heartz"] .lp-foot .links { color: var(--ink-2); }
[data-skin="heartz"] .lp-foot .links a:hover { color: var(--red); }
[data-skin="heartz"] .lp-foot .cp { color: var(--ink-3); }
[data-skin="heartz"] .lp-foot .cobrand-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }

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

/* coach video tag */
[data-skin="heartz"] .coach-video .vtag { color: #fff; }

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