/* ============================================================
 * themes-fable/night.css — Enjin テーマ「Night」（dark / Fable磨き版）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 設計方針（Fable）:
 *  - 夜の紺 #0b1020 を基調に、暗部へ青の深み（ランプ再調整）を足して「安い黒」を回避
 *  - 役割分担: ゴールド=見出し強調/CTA/スコア、シアン=メタ情報/ライブ感（ncat・年号・試合タグ）
 *  - 塗りのゴールド上は必ず濃紺文字（白文字のコントラスト不足を全て解消）
 *  - --accent-d を color-mix で --accent から自動派生 → club_color 1色でも家系が崩れない
 *  - 光は3箇所だけ光らせる（ticker / 集計数字 / 見出しem）。他はヘアラインの精度で品を出す
 *  - モーション・3Dメッシュ・日英ラベル・reduced-motion は base の仕組みをそのまま尊重
 * ============================================================ */
:root{
  color-scheme:dark;
  --paper:#0b1020;
  --paper2:#101731;
  --white:#151f3c;
  --card:#131c38;
  --ink:#f5f1e6;
  --body:#c5cde2;
  --mute:#8f9abb;
  --line:#222d4e;
  --line2:#31406e;
  --theme-accent:#e6b455;
  /* 派生色は accent から自動生成（クラブ色でも家系維持） */
  --accent-d:color-mix(in srgb, var(--accent) 82%, #0a0602);
  --accent-l:#45d6e6;
  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* テーマ内トークン */
  --night-deep:#070b16;
  --night-well:#0a0f1e;
  --night-glow:color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ▼ 夜空の地層 — ページ全体に奥行き（上空の青 → 地平の紺） */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1200px 820px at 88% -6%, #131f44 0%, transparent 58%),
    radial-gradient(1000px 700px at -12% 28%, #0f1834 0%, transparent 55%);
  background-repeat:no-repeat;
}
::selection{background:var(--accent);color:#0b1020}
html{scrollbar-color:#2c3a66 var(--night-deep)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--night-deep)}
::-webkit-scrollbar-thumb{background:#26314f;border:3px solid var(--night-deep);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent) 38%, #26314f)}

/* ▼ 交互セクションはヘアラインで区切る（罫線の精度で階調を作る） */
.alt{
  background-color:color-mix(in srgb, var(--paper2) 94%, transparent);
  background-image:linear-gradient(180deg, rgba(255,255,255,.02), transparent 140px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ▼ nav — 濃紺ガラス + 金のヘアライン */
nav{
  background:color-mix(in srgb, var(--paper) 74%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  box-shadow:0 12px 32px rgba(4,8,20,.35);
}
.crest{
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 45%, var(--accent-d) 100%);
  color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 10px var(--night-glow);
}
.navcta{color:var(--paper);font-weight:800;box-shadow:0 2px 12px var(--night-glow)}
.navcta:hover{background:color-mix(in srgb, var(--accent) 86%, #fff);box-shadow:0 4px 18px var(--night-glow)}

/* ▼ ticker — 電光掲示板（金の発光文字 × 消灯した黒帯） */
.ticker{
  background:linear-gradient(180deg,#0a0f1f,#080c18);
  color:color-mix(in srgb, var(--accent) 88%, #fff);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker .track{text-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent)}

/* ▼ hero — ナイター照明（シアンの投光 × 地平の金 × ヴィネット × 粒子ノイズ） */
.hero{
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 620px at 80% 8%, color-mix(in srgb, var(--accent-l) 9%, transparent), transparent 60%),
    radial-gradient(950px 540px at 6% 96%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    linear-gradient(180deg, #0e1630 0%, var(--paper) 88%);
  background-repeat:no-repeat;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
}
.hero-scrim{background:
  radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(4,7,16,.5) 100%),
  linear-gradient(96deg, color-mix(in srgb,var(--paper) 94%,transparent) 0%, color-mix(in srgb,var(--paper) 74%,transparent) 40%, color-mix(in srgb,var(--paper) 14%,transparent) 76%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb,var(--paper) 82%,transparent) 0%, transparent 48%)}
.hero-photo{filter:brightness(.8) saturate(1.1) contrast(1.05)}
#mesh{mix-blend-mode:screen;opacity:.85}
/* フィルムグレイン（シネマの質感 / 描画のみ・操作を妨げない） */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
}
/* ヒーローの eyebrow にスレートライン（映画のクレジット風） */
.hero .eyebrow::before{
  content:"";display:inline-block;width:30px;height:1px;vertical-align:middle;
  margin-right:.75em;background:linear-gradient(90deg, var(--accent), transparent);
}
/* 見出し — 象牙→月光のグラデーション文字 */
.htitle{
  color:var(--ink);
  background:linear-gradient(180deg,#fbf8ef 0%, #ece9df 48%, #b9c3de 115%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.htitle em{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #fff8e8) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 80%, #7a5a20) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.htitle .hl{
  -webkit-text-fill-color:var(--ink);
  background:linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 38%, transparent) 62%);
}

/* ▼ タイポグラフィ階層 */
.eyebrow{letter-spacing:.22em}
.eyebrow i::after{color:color-mix(in srgb, var(--accent) 38%, transparent)}
.rule{
  width:64px;height:2px;margin:16px 0 24px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 45%, var(--accent-l) 100%);
  box-shadow:0 0 14px var(--night-glow);
}
.lead{font-family:var(--serif);line-height:2.1}
h2.sec{letter-spacing:.015em}
h2.sec em{text-shadow:0 0 26px color-mix(in srgb, var(--accent) 35%, transparent)}

/* ▼ ボタン — 金は塗り（濃紺文字）、線はゴースト。ホバーで光量が一段上がる */
.btn{transition:background .2s,transform .2s,border-color .2s,color .2s,box-shadow .25s}
.btn-accent{
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 84%, #fff) 0%, var(--accent) 55%, var(--accent-d) 120%);
  color:var(--paper);font-weight:700;
  box-shadow:0 2px 14px var(--night-glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-accent:hover{
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 72%, #fff) 0%, var(--accent) 60%, var(--accent-d) 130%);
  transform:translateY(-2px);
  box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 32%, transparent), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-line{border:1px solid color-mix(in srgb, var(--ink) 38%, transparent);color:var(--ink)}
.btn-line:hover{
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  color:color-mix(in srgb, var(--accent) 85%, #fff);
}

/* ▼ chips — 情報タイル（静かなヘアライン、触れると金が差す） */
.chip{background:var(--white);border-color:var(--line2);transition:border-color .25s,background .25s}
.chip:hover{border-color:color-mix(in srgb, var(--accent) 42%, var(--line2));background:#172242}
.chip b{color:var(--ink)}

/* ▼ team — スコアボードの数字だけ光らせる */
.comp b{color:var(--accent);text-shadow:0 0 22px var(--night-glow)}
.avatar{
  background:radial-gradient(circle at 35% 30%, #1c2949, #101731 70%);
  border-color:var(--line2);color:var(--accent);
  transition:border-color .3s, box-shadow .3s;
}
.person{position:relative}
.person:hover{box-shadow:0 12px 28px rgba(3,6,16,.5), inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent)}
.person:hover .avatar{
  border-color:color-mix(in srgb, var(--accent) 50%, var(--line2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ▼ schedule — 日付=金の数字、試合タグ=シアン（ライブ感） */
.srow{transition:background .25s}
.srow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.stag.match{
  background:color-mix(in srgb, var(--accent-l) 12%, transparent);
  color:var(--accent-l);
  border-color:color-mix(in srgb, var(--accent-l) 45%, transparent);
}

/* ▼ news / achievements — メタ情報はシアン、成果はゴールド */
.ncat{color:var(--accent-l)}
.ayear{color:var(--accent-l)}
.aresult{color:var(--accent)}

/* ▼ band（文武両道）— 金の塗り帯をやめ、深夜の紺に金の輪郭で組み直す */
.band{
  background-color:var(--night-deep);
  background-image:
    radial-gradient(900px 460px at 50% -20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 65%),
    radial-gradient(700px 420px at 88% 115%, color-mix(in srgb, var(--accent-l) 7%, transparent), transparent 60%),
    linear-gradient(180deg, #0d152b 0%, #0a0f1f 100%);
  background-repeat:no-repeat;
  border-top:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.band .wm{
  color:color-mix(in srgb, var(--accent) 6%, transparent);
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.band h2{color:var(--ink)}
.band p{color:var(--body)}
.band .eyebrow{color:var(--accent)}
.band .eyebrow i{color:var(--ink)}
.btn-ink{background:var(--accent);color:var(--paper);box-shadow:0 2px 14px var(--night-glow)}
.btn-ink:hover{background:color-mix(in srgb, var(--accent) 80%, #fff);color:var(--paper);box-shadow:0 8px 26px var(--night-glow)}

/* ▼ form — 沈み込む入力井戸 + 金のフォーカスリング */
.form{
  background:var(--card);border-color:var(--line);
  box-shadow:0 30px 70px rgba(3,6,16,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.field input,.field select,.field textarea{
  background:var(--night-well);border-color:var(--line2);
  caret-color:var(--accent);
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:#5d6885}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.seg label{background:#0d1428;border-color:var(--line2);transition:border-color .2s,color .2s,background .2s}
.seg label:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--line2))}
.seg label:has(input:checked){
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.submit{
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 84%, #fff) 0%, var(--accent) 55%, var(--accent-d) 120%);
  color:var(--paper);font-weight:700;
  box-shadow:0 2px 14px var(--night-glow), inset 0 1px 0 rgba(255,255,255,.28);
  transition:box-shadow .25s, filter .2s;
}
.submit:hover{
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 72%, #fff) 0%, var(--accent) 60%, var(--accent-d) 130%);
  box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent);
}
.toast{color:color-mix(in srgb, var(--accent) 85%, #fff)}

/* ▼ footer — ページ最深部。金のヘアラインで締める */
footer{
  background:linear-gradient(180deg, #0a0f1f 0%, var(--night-deep) 100%);
  border-top:1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
}
footer a:hover{color:var(--accent)}
.powered .badge{border-color:var(--line2)}
.powered .badge b{color:var(--accent)}