/* ============================================================
 * themes-fable/bold.css — Enjin テーマ「Bold」（dark / Fable磨き版）
 * enjin-base.css のトークンを上書きして着せ替える（HTMLは共通・変更なし）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決。
 *
 * 意匠のコンセプト: 「ナイターのスタジアム」
 *   - 地: 照明の落ちた黒 (#141518系)。ピッチの白線を思わせる極薄ヘアライン
 *   - 光: ボルト(#c8ff2e家系)。3Dメッシュ・ジャージ番号・タッチラインに集約
 *   - 型: Oswald極太の巨大見出し + 番号(counter)のアウトライン刻印
 *   - 角: ボタン/クレストは対角コーナーカット、eyebrowはテープ状スピードイタリック
 *
 * club_color 指定時も家系ごと追従するよう、派生色はすべて
 * var(--accent) からの color-mix で組む（ダーク地の可読性トークン --acc-tx 含む）。
 * ============================================================ */
:root{
  /* 地 — 青みを一滴だけ含む黒。面はわずかに持ち上げて層を作る */
  --paper:#141518;
  --paper2:#191b20;
  --white:#1f232a;   /* カード面 */
  --card:#1d2127;
  --ink:#f4f6f8;
  --body:#bdc4ce;
  --mute:#848d9a;
  --line:#272b32;
  --line2:#3a404b;

  /* ボルト家系 — 派生2色は accent から導出し、club_color にも追従させる */
  --theme-accent:#9ac400;
  --accent-d:color-mix(in srgb, var(--accent) 78%, #0c0e06);
  --accent-l:color-mix(in srgb, var(--accent) 62%, #ffffff);

  --serif:"Oswald","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Oswald","Noto Sans JP",system-ui,sans-serif;

  /* テーマ内専用トークン */
  --acc-tx:color-mix(in srgb, var(--accent) 72%, #ffffff); /* ダーク地の小さめ文字用（可読性担保） */
  --acc-dim:color-mix(in srgb, var(--accent) 30%, transparent);
  --acc-ghost:color-mix(in srgb, var(--accent) 11%, transparent);
  --btn-ink:#12150a;   /* ボルト面の上に置く文字色 */
  --cut:10px;          /* コーナーカット量 */
}

/* ---- 地のテクスチャ: ピッチの白線を思わせる極薄の縦ヘアライン ---- */
body{
  counter-reset:bsec;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #17181c 0%, var(--paper) 340px);
}
.alt{border-block:1px solid var(--line)}
::selection{background:var(--accent);color:var(--btn-ink)}

/* スクロールバーも地色に合わせる */
::-webkit-scrollbar{width:12px;background:#101114}
::-webkit-scrollbar-thumb{background:#2b2f36;border:3px solid #101114;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent) 38%, #2b2f36)}

/* ============================================================
 * nav — ダークグラス + 背番号付きナビ
 * ============================================================ */
nav{background:color-mix(in srgb, #101115 86%, transparent);border-bottom:1px solid #23262d}
nav .wrap{height:68px}
.brand{letter-spacing:.02em}
.crest{color:var(--btn-ink);font-family:var(--mono);font-weight:700;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.navlinks{counter-reset:nv;gap:1.9rem}
.navlinks a{color:#ccd2db}
.navlinks a::before{counter-increment:nv;content:"0" counter(nv);
  font-family:var(--mono);font-weight:600;font-size:.62em;letter-spacing:.06em;
  color:var(--acc-tx);margin-right:.4em;vertical-align:.42em}
.navlinks a:hover{color:var(--ink)}
.navlinks a::after{background:var(--accent);opacity:1;height:2px;bottom:-.5em}
.navcta{--cut:8px;color:var(--btn-ink);font-weight:700;letter-spacing:.1em;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background .18s,filter .25s}
.navcta:hover{filter:drop-shadow(0 6px 16px var(--acc-dim))}

/* ticker（Boldではflag OFFだが、ONに切替えた場合の可読性保険） */
.ticker{color:var(--btn-ink);border-bottom-color:rgba(0,0,0,.25)}
.ticker .track{font-weight:600}

/* ============================================================
 * hero — 暗転したスタンド。左下にボルトの照明だまり、底辺にタッチライン
 * ============================================================ */
.hero{padding:clamp(5rem,12vw,9.5rem) 0 clamp(3.8rem,7vw,6.2rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(min(760px,92vw) 420px at 18% 66%, var(--acc-ghost), transparent 72%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  --tl:clamp(90px,18vw,220px);
  background:linear-gradient(90deg, var(--accent) 0 var(--tl), var(--line) var(--tl))}
.hero-scrim{background:
  linear-gradient(96deg,
    color-mix(in srgb,var(--paper) 94%,transparent) 0%,
    color-mix(in srgb,var(--paper) 76%,transparent) 38%,
    color-mix(in srgb,var(--paper) 18%,transparent) 74%,
    color-mix(in srgb,var(--paper) 42%,transparent) 100%),
  linear-gradient(0deg, var(--paper) 0%, transparent 44%)}
.hero-photo{filter:brightness(.82) saturate(1.04) contrast(1.04)}

/* eyebrow=ジャージテープ（スピードイタリック） */
.hero .eyebrow{background:var(--accent);color:var(--btn-ink);
  font-weight:600;font-size:12.5px;letter-spacing:.16em;
  padding:.5em 1.05em .45em;margin-left:2px;max-width:100%;
  transform:skewX(-10deg);transform-origin:left bottom}
.htitle{font-weight:900;font-size:clamp(3.1rem,9.6vw,7.4rem);
  line-height:1.02;letter-spacing:-.022em;margin-top:1.1rem;text-transform:uppercase}
.hsub{color:#c5ccd6;margin-top:1.7rem}
.hbtns{gap:.9rem;margin-top:2.4rem}

/* ============================================================
 * ボタン — 塗り=対角コーナーカット / 線=コーナーチック。ホバーはボルトの照り
 * ============================================================ */
.btn{letter-spacing:.14em;padding:1em 1.7em;
  transition:background .18s,color .18s,border-color .18s,transform .15s,filter .25s}
.btn-accent,.btn-ink,.submit{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.btn-accent{color:var(--btn-ink);font-weight:700}
.btn-accent:hover{filter:drop-shadow(0 8px 20px var(--acc-dim))}
.btn-line{border-color:#5a626e;color:#e9ecf0;
  background-image:linear-gradient(315deg, var(--acc-dim) 0 9px, transparent 9px)}
.btn-line:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);
  background-image:linear-gradient(315deg, var(--accent) 0 9px, transparent 9px);
  color:var(--ink);border-color:var(--acc-tx)}
.btn-ink{background:var(--accent);color:var(--btn-ink);font-weight:700}
.btn-ink:hover{background:color-mix(in srgb, var(--accent) 86%, #ffffff);color:var(--btn-ink);
  filter:drop-shadow(0 8px 20px var(--acc-dim))}

/* ============================================================
 * section head — 斜めのボルトチック + Oswald極太 + アウトライン刻印の背番号
 * ============================================================ */
.eyebrow{color:var(--acc-tx);font-weight:600;font-size:11.5px;letter-spacing:.2em}
.eyebrow i{color:var(--ink)}
.eyebrow i::after{color:#4a515d}
.rule{width:64px;height:5px;margin:16px 0 26px;
  background:linear-gradient(90deg, var(--accent) 0 38px, var(--acc-dim) 38px);
  transform:skewX(-24deg);transform-origin:0 100%}
h2.sec{position:relative;z-index:0; /* 自前のスタッキング文脈を張り、::after を確実に文字の背後・面の手前へ */
  font-weight:900;font-size:clamp(2.3rem,6.2vw,4.3rem);
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.06}
h2.sec em{color:var(--acc-tx)}
h2.sec::after{counter-increment:bsec;content:counter(bsec,decimal-leading-zero);
  position:absolute;right:0;top:50%;transform:translateY(-52%);
  font-family:var(--mono);font-weight:700;line-height:1;
  font-size:clamp(4.6rem,13vw,10rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--accent) 34%, transparent);
  z-index:-1;pointer-events:none;user-select:none}
@supports not (-webkit-text-stroke:1px #000){
  h2.sec::after{color:color-mix(in srgb, var(--accent) 13%, transparent)}
}
.lead{color:var(--body)}
.lead b,.lead strong{color:var(--ink);box-shadow:inset 0 -.45em 0 color-mix(in srgb, var(--accent) 26%, transparent)}

/* ============================================================
 * about chips — ボルトの切符ノッチ
 * ============================================================ */
.chip{border-color:#313742;color:var(--body);padding:.6em 1.15em;
  background:linear-gradient(225deg, color-mix(in srgb, var(--accent) 55%, var(--card)) 0 8px, var(--card) 8px)}
.chip b{color:var(--ink)}

/* ============================================================
 * team — スコアボードの数字 + カード上辺のボルトスイープ
 * ============================================================ */
.comp{gap:1.2rem 0;margin-top:2rem}
.comp div{padding:0 2.1rem 0 1.4rem;border-left:2px solid var(--line2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.comp b{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;line-height:1.12;
  color:var(--acc-tx);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grid4{background:var(--line);border-color:var(--line)}
.person{background:var(--card);position:relative;padding:1.7rem 1rem 1.5rem}
.person::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.person:hover::before{transform:scaleX(1)}
.avatar{color:var(--acc-tx);border-color:#343b46;font-family:var(--mono);font-weight:700;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--paper)) 0 10px, #171a1f 10px)}
.note{color:var(--mute)}

/* ============================================================
 * schedule / news — 太い起点罫 + 行ホバーの淡いボルト
 * ============================================================ */
.sched{border-top:2px solid var(--line2)}
.srow{border-bottom-color:var(--line);transition:background .22s}
.srow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.sdate b{font-family:var(--mono);font-weight:700;font-size:1.55rem;
  color:var(--acc-tx);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stag.match{background:var(--acc-ghost);color:var(--acc-tx);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.stag.practice{border-color:var(--line2);color:var(--mute)}

.newslist{border-top:2px solid var(--line2)}
.nrow{border-bottom-color:var(--line)}
.nrow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.nbody .ncat{color:var(--acc-tx);font-weight:600}
.nbody p{color:var(--body)}

/* ============================================================
 * achievements — 年号と戦績はボルトの可読トーンで
 * ============================================================ */
.arow{border-top-color:var(--line);transition:background .22s}
.arow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.ayear{color:var(--acc-tx);font-weight:700;font-variant-numeric:tabular-nums}
.aresult{color:var(--acc-tx)}

/* ============================================================
 * 文武両道 band — 黒のロッカールーム。上下にハザードテープ、透かしは刻印
 * （base の白文字を活かすため、地をボルトグラデ→黒面へ再設計。コントラスト担保）
 * ============================================================ */
.band{color:#fff;border-block:1px solid #262a32;background:
  repeating-linear-gradient(-45deg, var(--accent) 0 12px, transparent 12px 26px) left top / 100% 7px no-repeat,
  repeating-linear-gradient(-45deg, var(--accent) 0 12px, transparent 12px 26px) left bottom / 100% 7px no-repeat,
  radial-gradient(720px 340px at 50% 118%, var(--acc-ghost), transparent 70%),
  linear-gradient(180deg, #0e1014 0%, #10131a 100%)}
.band .wm{color:transparent;-webkit-text-stroke:2px color-mix(in srgb, var(--accent) 26%, transparent)}
@supports not (-webkit-text-stroke:1px #000){
  .band .wm{color:color-mix(in srgb, var(--accent) 9%, transparent)}
}
.band .eyebrow{color:var(--acc-tx)}
.band .eyebrow i{color:#fff}
.band h2{font-weight:900;letter-spacing:-.01em}
.band p{color:#cad0d9}

/* ============================================================
 * form — ダークフィールド + ボルトのコーナータグ
 * ============================================================ */
.form{border-color:#333a45;box-shadow:0 24px 60px rgba(0,0,0,.35);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, var(--card)) 0 14px, var(--card) 14px)}
.field label{color:#99a2af;font-weight:600}
.field input,.field select,.field textarea{background:#101216;border-color:#3a414c;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid transparent;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--acc-ghost)}
.seg label{background:#101216;border-color:#3a414c;color:var(--mute);
  font-family:var(--mono);font-weight:600;letter-spacing:.12em;transition:border-color .18s,background .18s,color .18s}
.seg label:has(input:checked){border-color:var(--accent);background:var(--acc-ghost);color:var(--acc-tx)}
.submit{color:var(--btn-ink);font-weight:700;letter-spacing:.14em;transition:background .18s,filter .25s}
.submit:hover{filter:drop-shadow(0 8px 18px var(--acc-dim))}
.toast{background:var(--acc-ghost);border-color:color-mix(in srgb, var(--accent) 40%, transparent);color:var(--acc-tx)}

/* ============================================================
 * footer — 一段沈めた黒。見出しはOswaldの小さなラベルへ
 * ============================================================ */
footer{background:#101114;border-top-color:#23262d}
footer h4{font-family:var(--mono);font-weight:600;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
footer p{font-family:var(--sans)}
footer a{color:#9aa3b1}
footer a:hover{color:var(--acc-tx)}
.powered{border-top-color:#22252c}
.powered .badge{border-color:#2e333d}
.powered .badge b{color:var(--acc-tx)}

/* ============================================================
 * responsive — 背番号の刻印はモバイルで一段引く
 * ============================================================ */
@media(max-width:640px){
  h2.sec::after{font-size:clamp(3.4rem,17vw,5rem);-webkit-text-stroke-width:1.2px}
  .hero .eyebrow{font-size:11px;letter-spacing:.13em}
  .comp div{padding:0 1.3rem 0 1rem}
}