/* =========================================================
   sppoX — クラブ専用LP / esports court HUD system
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Chakra+Petch:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=M+PLUS+1:wght@500;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=Mochiy+Pop+One&family=Reggae+One&family=RocknRoll+One&family=Yusei+Magic&family=DotGothic16&display=swap');

/* ---------- Theme tokens ---------- */
:root {
  --bg:        #060912;
  --bg-2:      #0a0f1f;
  --panel:     #0e1530;
  --panel-2:   #121a3a;
  --line:      rgba(74, 214, 240, 0.22);
  --line-soft: rgba(120, 150, 210, 0.14);

  --brand:     #1ec8de;   /* sppoX cyan */
  --brand-hi:  #3ee7f4;
  --accent:    #ff6a1a;   /* basketball energy / CTA */
  --accent-hi: #ff8a3d;
  --gold:      #ffce3a;
  --silver:    #cdd8ec;
  --bronze:    #e0843a;
  --lime:      #b6f24a;

  --ink:       #eaf2ff;
  --ink-2:     #aebbdd;
  --ink-3:     #6f7ca6;

  --glow-brand: 0 0 24px rgba(40, 214, 240, 0.45);
  --glow-accent: 0 0 28px rgba(255, 106, 26, 0.5);

  --display:    'Zen Kaku Gothic New', system-ui, sans-serif;
  --display-wt: 700;
  --hud:        'Chakra Petch', 'Noto Sans JP', monospace;
  --body:       'Noto Sans JP', system-ui, sans-serif;

  --col: 460px;        /* mobile LP column width */
  --pad: 20px;
}

/* Color theme variants (Tweak) */
[data-theme="sunset"] {
  --bg: #100712; --bg-2: #190a18; --panel: #1f0c1f; --panel-2: #2a1029;
  --line: rgba(255, 90, 140, 0.24);
  --brand: #ff5aa0; --brand-hi: #ff86bd; --accent: #ff7a1a; --accent-hi: #ffa04d;
  --glow-brand: 0 0 24px rgba(255,90,160,.45); --glow-accent: 0 0 28px rgba(255,122,26,.5);
}
[data-theme="electric"] {
  --bg: #07091c; --bg-2: #0b0f2b; --panel: #11163a; --panel-2: #161d4c;
  --line: rgba(120, 130, 255, 0.26);
  --brand: #5b7bff; --brand-hi: #87a0ff; --accent: #b14bff; --accent-hi: #c878ff;
  --gold: #ffd84a;
  --glow-brand: 0 0 24px rgba(91,123,255,.5); --glow-accent: 0 0 28px rgba(177,75,255,.5);
}
[data-theme="arena"] {
  --bg: #e9edf7; --bg-2: #dfe5f3; --panel: #ffffff; --panel-2: #f2f5fc;
  --line: rgba(20, 90, 150, 0.18); --line-soft: rgba(20,60,120,.1);
  --brand: #0a93ad; --brand-hi: #0fb6d4; --accent: #f25410; --accent-hi: #ff6a1a;
  --ink: #0c1430; --ink-2: #41507a; --ink-3: #7a87ad;
  --glow-brand: 0 0 20px rgba(15,150,180,.3);
  --glow-brand: 0 0 20px rgba(15,150,180,.3); --glow-accent: 0 0 22px rgba(242,84,16,.32);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Stage (ambient bg behind mobile column) ---------- */
.stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(40,180,220,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(255,106,26,.06), transparent 60%),
    var(--bg);
}

/* ---------- LP column ---------- */
.lp {
  width: 100%;
  max-width: var(--col);
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(30,200,222,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-soft), 0 40px 120px rgba(0,0,0,.6);
  padding-bottom: 92px; /* room for sticky bottom CTA */
}

/* court grid texture overlay */
.lp::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.lp > * { position: relative; z-index: 1; }

section { padding: 44px var(--pad); position: relative; }

/* ---------- Alternating section bands (clear section breaks) ---------- */
:root { --band: color-mix(in srgb, var(--brand) 9%, var(--bg)); }
.lp > section:not(.hero):not(.final) { background: var(--bg); }
.lp > section:not(.hero):not(.final):nth-of-type(even) { background: var(--band); }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--display); font-weight: var(--display-wt); line-height: 1.04; letter-spacing: .01em; }

/* ---------- Heading font patterns (Tweak) ---------- */
[data-font="clean"]    { --display: 'Zen Kaku Gothic New', system-ui, sans-serif; --display-wt: 700; }
[data-font="modern"]   { --display: 'M PLUS 1', system-ui, sans-serif;          --display-wt: 700; }
[data-font="standard"] { --display: 'Noto Sans JP', system-ui, sans-serif;       --display-wt: 900; }
[data-font="impact"]   { --display: 'Dela Gothic One', system-ui, sans-serif;    --display-wt: 400; letter-spacing: 0; }
[data-font="pop"]      { --display: 'Mochiy Pop One', system-ui, sans-serif;     --display-wt: 400; letter-spacing: 0; }
[data-font="reggae"]   { --display: 'Reggae One', system-ui, sans-serif;         --display-wt: 400; letter-spacing: 0; }
[data-font="rocknroll"]{ --display: 'RocknRoll One', system-ui, sans-serif;      --display-wt: 400; letter-spacing: 0; }
[data-font="yusei"]    { --display: 'Yusei Magic', system-ui, sans-serif;        --display-wt: 400; letter-spacing: 0; }
[data-font="pixel"]    { --display: 'DotGothic16', system-ui, sans-serif;        --display-wt: 400; letter-spacing: 0; }
.hud {
  font-family: var(--hud); font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: 11px; color: var(--brand);
}
.num { font-family: var(--hud); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lead { color: var(--ink-2); font-size: 15px; }
.muted { color: var(--ink-3); }

/* eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hud); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--brand);
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: rgba(30,200,222,.06);
  border-radius: 4px;
  margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--brand); box-shadow: var(--glow-brand); border-radius: 1px; transform: rotate(45deg); }

.sec-title { font-family: var(--display); font-weight: var(--display-wt); font-size: clamp(24px, 7.4vw, 30px); line-height: 1.12; margin-bottom: 10px; }
.sec-sub { color: var(--ink-2); font-size: 14.5px; max-width: 38ch; }
.slash-bg[data-screen-label="Why"] .sec-sub,
.ai-sec[data-screen-label="AI"] .sec-sub,
section[data-screen-label="Coach"] .sec-sub,
.pricing[data-screen-label="Pricing"] .sec-sub { max-width: 100%; }

/* ---------- Angular "cut corner" frame ---------- */
.cut {
  position: relative;
  --c: 14px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  background: var(--line);
}
.cut::before {
  content: ''; position: absolute; inset: 1.4px;
  --c: 13px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  background: var(--panel);
  z-index: 0;
}
.cut > * { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: var(--display-wt); font-size: 16px;
  padding: 16px 22px;
  --c: 12px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  width: 100%;
}
.btn .arrow { font-family: var(--hud); transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(2px) scale(.99); }

.btn-cta {
  color: #1a0a00;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-cta:hover { filter: brightness(1.06); box-shadow: 0 0 40px rgba(255,106,26,.7), inset 0 1px 0 rgba(255,255,255,.4); }

.btn-brand {
  color: #021016;
  background: linear-gradient(100deg, var(--brand), var(--brand-hi));
  box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-ghost {
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.btn-sm { font-size: 12.5px; padding: 10px 14px; width: auto; --c: 8px; }

/* ---------- Image placeholders ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(40,200,222,.07) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  overflow: hidden;
  border-radius: 6px;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--hud); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  text-align: center; padding: 6px 10px; line-height: 1.5;
  border: 1px dashed var(--line); border-radius: 4px;
  background: rgba(6,9,18,.4);
}
.ph.cut { border: none; }
.ph.cut::after { } /* keep label */

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 11px var(--pad);
  background: linear-gradient(180deg, rgba(6,9,18,.92), rgba(6,9,18,.66));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .logo { height: 22px; width: auto; filter: drop-shadow(0 0 10px rgba(40,200,222,.35)); }
.topbar .club-tag {
  font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); border: 1px solid var(--line); padding: 4px 7px; border-radius: 3px;
}
.topbar .spacer { flex: 1; }

/* ---------- Sticky bottom CTA ---------- */
.bottom-cta {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--col); z-index: 50;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(6,9,18,0), rgba(6,9,18,.86) 32%, var(--bg));
  display: flex; align-items: center; gap: 12px;
}
.bottom-cta .meta { flex: 0 0 auto; }
.bottom-cta .meta .k { font-family: var(--hud); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.bottom-cta .meta .v { font-family: var(--display); font-weight: var(--display-wt); font-size: 13px; color: var(--brand); }
.bottom-cta .btn { flex: 1; }

/* glow pulse */
@keyframes pulse-glow { 0%,100% { box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.4);} 50% { box-shadow: 0 0 44px rgba(255,106,26,.8), inset 0 1px 0 rgba(255,255,255,.4);} }
.pulse { animation: pulse-glow 2.4s ease-in-out infinite; }

/* ---------- Divider / section index ---------- */
.sec-head { margin-bottom: 22px; padding-top: 26px; position: relative; }
.sec-head::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) 34px, var(--line-soft) 34px, var(--line-soft) 100%);
  border-radius: 2px;
}
.sec-idx { display: none; }
.sec-head .eyebrow { display: none; }
.sec-idx-OLD {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--hud); font-weight: 700; font-size: 11px; letter-spacing: .2em; color: var(--ink-3);
  padding-top: 18px; margin-bottom: 14px;
}
/* full-width chapter divider line above the index */
.sec-idx::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) 34px, var(--line-soft) 34px, var(--line-soft) 100%);
  border-radius: 2px;
}
.sec-idx b { color: var(--accent); font-size: 13px; }
/* extra breathing room between stacked sections */
section { padding-top: 50px; }

/* diagonal energy slash bg */
.slash-bg::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 40%, rgba(255,106,26,.05) 40%, rgba(255,106,26,.05) 52%, transparent 52%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}