/* ============================================================
 * themes-fable/chalk.css — Enjin テーマ「Chalk」（dark / Fable brushup）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 設計メモ（このテーマの語彙）:
 *   - 黒板 #26332c 地 × チョーク黄 #f2d24e ＋ ピンク #ef7fa0（カラーチョーク2色運用:
 *     黄=主役の書き込み / ピンク=メタ情報・下線・テープの差し色）
 *   - --accent-ink : どんな club_color でも「白墨を混ぜたパステル」に持ち上げた
 *     文字用アクセント（暗色クラブカラーでも黒板上のコントラストを確保）
 *   - --accent-d   : club_color 連動で自動的に深くなるホバー色（固定値を廃止）
 *   - --on-accent  : アクセント塗り面上の文字色を明度で自動反転（lch対応時）
 *   - 質感: 点描2層＋チョーク粉ノイズ(feTurbulence)＋盤面のムラ/ビネットを
 *     body::before/::after の固定レイヤーで全ページに薄く敷く
 * ============================================================ */
:root{
  /* 盤面 — 家系は現行のまま、暗部に少しだけ青緑の深みを足す */
  --paper:#26332c;
  --paper2:#2b3a31;
  --white:#35453b;
  --card:#2f3e35;
  --board-deep:#1d2822;
  --ink:#f4f1e6;
  --body:#d2cdb8;
  --mute:#9aa892;
  --line:#3c4f44;
  --line2:#4d6254;
  /* チョーク */
  --theme-accent:#f2d24e;
  --accent-l:#ef7fa0;                                            /* ピンクチョーク（識別色・固定） */
  --accent-d:color-mix(in oklab, var(--accent) 80%, #14201a);    /* club_color 連動の深色 */
  --accent-ink:color-mix(in oklab, var(--accent) 74%, #f6f2df);  /* 文字用チョークパステル */
  --chalk:#f6f2df;
  --on-accent:#26332c;                                           /* fallback（既定の黄に最適） */
  /* 書体 */
  --serif:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --hand:"Caveat","Zen Maru Gothic",cursive;
  /* 点描（2層オフセットで機械的な格子感を消す） */
  --dots:
    radial-gradient(rgba(246,242,223,.05) 1px, transparent 1.4px),
    radial-gradient(rgba(246,242,223,.028) 1px, transparent 1.4px);
}
/* アクセント塗り面上の文字色を明度から自動決定（黄→濃緑 / 濃色クラブカラー→白墨） */
@supports (color: lch(from red l c h)){
  :root{--on-accent:color-mix(in oklab, lch(from var(--accent) calc((62 - l) * 999) 0 0) 92%, var(--accent) 8%)}
}

/* ---- 盤面の質感：点描＋粉ムラ＋ビネット ---- */
html{scrollbar-color:var(--line2) var(--board-deep)}
body,.alt,footer{background-image:var(--dots);background-size:26px 26px,26px 26px;background-position:0 0,13px 13px}
body{background-color:var(--paper)}
.alt{background-color:var(--paper2)}
/* 拭きムラの照り＋四隅の沈み（固定レイヤー・操作は透過） */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(52rem 30rem at 14% 22%, rgba(246,242,223,.04), transparent 65%),
  radial-gradient(40rem 26rem at 86% 10%, rgba(246,242,223,.032), transparent 70%),
  radial-gradient(46rem 30rem at 70% 90%, rgba(246,242,223,.028), transparent 70%),
  radial-gradient(135% 115% at 50% 38%, transparent 58%, rgba(7,13,10,.26) 100%)}
/* チョークの粉（微細ノイズを soft-light で一面に） */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:260px 260px}
::selection{background:var(--accent);color:var(--on-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--accent-ink)}

/* ---- タイポグラフィ：白墨のにじみ（かすれは影で上品に） ---- */
h1,h2,h3{text-shadow:0 0 .8px color-mix(in srgb, currentColor 38%, transparent), 0 0 18px rgba(246,242,223,.06)}
.htitle{text-shadow:0 0 1px color-mix(in srgb, var(--ink) 35%, transparent), 0 3px 18px rgba(0,0,0,.35), 0 0 28px rgba(246,242,223,.08)}
.htitle em,h2.sec em{color:var(--accent-ink);text-decoration:underline;text-decoration-style:wavy;
  text-decoration-color:color-mix(in srgb, var(--accent-l) 72%, transparent);
  text-decoration-thickness:.055em;text-underline-offset:.16em;text-decoration-skip-ink:none}

/* 手書き見出しラベル（英語=ピンク / 日本語=黄チョーク） */
.eyebrow{font-family:var(--hand);font-size:1.4rem;font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:none;color:var(--accent-ink)}
.eyebrow i{font-family:var(--hand);color:var(--accent-l);letter-spacing:.02em}
.eyebrow i::after{content:" / ";color:color-mix(in srgb, var(--accent-l) 55%, transparent);font-weight:400;margin:0 .1em}

/* 手描きの二重下線（わずかな傾き＋かすれのグラデ） */
.rule{position:relative;width:64px;height:3px;border-radius:3px;transform:rotate(-1.1deg);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent-ink) 88%, transparent),
    color-mix(in srgb, var(--accent-ink) 52%, transparent) 55%,
    color-mix(in srgb, var(--accent-ink) 80%, transparent))}
.rule::after{content:"";position:absolute;left:7px;right:-12px;bottom:-5px;height:2px;border-radius:2px;transform:rotate(.9deg);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-ink) 42%, transparent), transparent 88%)}

/* ---- nav：黒板の上端。校章はチョークで描いた円 ---- */
nav{background:color-mix(in srgb, var(--paper) 85%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px dashed var(--line2)}
.navlinks a:hover{color:var(--accent-ink)}
.crest{background:color-mix(in srgb, var(--accent) 10%, transparent);border:2px dashed color-mix(in srgb, var(--accent-ink) 68%, transparent);color:var(--accent-ink);border-radius:50%;transform:rotate(-6deg)}
.navcta{border-radius:11px;color:var(--on-accent);font-weight:800}

/* ---- hero：黒板メニューの手描きフレーム ---- */
.hero-scrim{background:
  linear-gradient(96deg, color-mix(in srgb,var(--paper) 93%,transparent) 0%, color-mix(in srgb,var(--paper) 74%,transparent) 40%, color-mix(in srgb,var(--paper) 14%,transparent) 78%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb,var(--paper) 74%,transparent) 0%, transparent 46%)}
.hero-photo{filter:brightness(.7) saturate(.85) contrast(1.04)}
#mesh{opacity:.5;mix-blend-mode:screen}
.hero{border-bottom:1px dashed color-mix(in srgb, var(--chalk) 16%, transparent)}
.hero::after{content:"";position:absolute;inset:clamp(10px,2.2vw,20px);z-index:0;pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--chalk) 20%, transparent);border-radius:20px}
.hero-inner{z-index:1}
.hsub{color:var(--body)}

/* ---- ボタン：チョーク片のような塗りと手描きの枠 ---- */
.btn{border-radius:12px;font-weight:700;letter-spacing:.05em}
.btn-accent{color:var(--on-accent)}
.btn-accent:hover{background:color-mix(in oklab, var(--accent) 86%, #fffdf0)}
.btn-line{border:1.5px dashed color-mix(in srgb, var(--ink) 58%, transparent)}
.btn-ink{background:var(--chalk);color:#26332c}
.btn-ink:hover{background:var(--accent);color:var(--on-accent)}

/* ---- chips：手貼りのタグ（わずかに傾け、触れると直る） ---- */
.chip{border:1.5px dashed var(--line2);border-radius:12px;background:color-mix(in srgb, var(--white) 55%, transparent);transition:transform .3s ease,border-color .3s ease}
.chips .chip:nth-child(odd){transform:rotate(-.5deg)}
.chips .chip:nth-child(even){transform:rotate(.4deg)}
.chip:hover{transform:rotate(0);border-color:color-mix(in srgb, var(--accent-ink) 45%, var(--line2))}
.chip b{color:var(--chalk)}

/* ---- team：破線カードとチョーク円のアバター、数字は手書き ---- */
.grid4{gap:.9rem;background:transparent;border:0}
.person{background:color-mix(in srgb, var(--white) 62%, transparent);border:1.5px dashed var(--line2);border-radius:16px;padding:1.6rem 1rem;transition:transform .25s ease,border-color .25s ease}
.person:hover{transform:translateY(-4px) rotate(-.4deg);border-color:color-mix(in srgb, var(--accent-ink) 42%, var(--line2))}
.avatar{background:transparent;border:2px dashed color-mix(in srgb, var(--accent-ink) 55%, transparent);color:var(--accent-ink);border-radius:50%}
.comp b{font-family:var(--hand);font-weight:700;font-size:2.4rem;line-height:1.05;color:var(--accent-ink)}

/* ---- schedule：破線罫のノート、日付は手書き数字 ---- */
.sched{border-top:1px dashed var(--line2)}
.srow{border-bottom:1px dashed var(--line)}
.sdate b{font-family:var(--hand);font-weight:700;font-size:1.85rem;color:var(--accent-ink)}
.stag{border-radius:999px}
.stag.match{background:color-mix(in srgb, var(--accent) 14%, transparent);border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);color:var(--accent-ink)}
.stag.practice{border:1px dashed var(--line2);color:var(--mute)}

/* ---- news：カテゴリはピンクチョーク ---- */
.newslist{border-top:1px dashed var(--line2)}
.nrow{border-bottom:1px dashed var(--line)}
.nrow:hover{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.nbody .ncat{color:var(--accent-l)}

/* ---- 実績：年号は手書き、結果はチョークパステル ---- */
.arow{border-top:1px dashed var(--line)}
.ayear{font-family:var(--hand);font-weight:700;font-size:1.25rem;color:var(--accent-ink)}
.aresult{color:var(--accent-ink)}

/* ---- 文武両道 band：ひときわ深い盤面＋白抜きの「文武」 ---- */
.band{background:
  radial-gradient(120% 150% at 50% 0%, #223228 0%, #1a2620 58%, #16211c 100%);
  border-top:1px dashed color-mix(in srgb, var(--chalk) 14%, transparent);
  border-bottom:1px dashed color-mix(in srgb, var(--chalk) 14%, transparent)}
.band h2{color:var(--chalk)}
.band p{color:#d8d3bf}
.band .eyebrow{color:var(--accent-ink)}
.band .eyebrow i{color:var(--accent-l)}
.band .wm{color:rgba(246,242,223,.07)}
@supports (-webkit-text-stroke:1px red){
  .band .wm{color:transparent;-webkit-text-stroke:2px rgba(246,242,223,.13)}
}

/* ---- form：黒板に貼った申込みカード（ピンクのテープ留め） ---- */
.form{position:relative;background:var(--card);border:1.5px dashed var(--line2);border-radius:18px}
.form::before{content:"";position:absolute;top:-12px;left:50%;width:108px;height:25px;transform:translateX(-50%) rotate(-2deg);
  background:color-mix(in srgb, var(--accent-l) 24%, transparent);
  border:1px dashed color-mix(in srgb, var(--accent-l) 36%, transparent);border-radius:3px}
.field input,.field select,.field textarea{background:var(--board-deep);border-radius:10px;border-width:1.5px;caret-color:var(--accent-ink)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb, var(--mute) 75%, transparent)}
.field input:focus,.field select:focus,.field textarea:focus{outline-color:var(--accent-ink);border-color:var(--accent-ink)}
.seg label{border-style:dashed;border-radius:10px;background:var(--board-deep)}
.seg label:has(input:checked){background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent-ink)}
.submit{border-radius:12px;color:var(--on-accent);box-shadow:0 4px 0 var(--accent-d);transition:transform .15s ease,background .18s ease,box-shadow .15s ease}
.submit:hover{background:color-mix(in oklab, var(--accent) 86%, #fffdf0);transform:translateY(-1px)}
.submit:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-d)}
.toast{border:1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);border-radius:12px;background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent-ink)}

/* ---- footer：黒板の粉受けの下、いちばん深い面 ---- */
footer{background-color:var(--board-deep);border-top:1px dashed var(--line2)}
footer a:hover{color:var(--accent-ink)}
.powered .badge{border:1px dashed var(--line2);border-radius:999px}
.powered .badge b{color:var(--accent-ink)}

/* ---- ticker（フラグ有効時の保険） ---- */
.ticker{background:var(--accent);color:var(--on-accent);border-bottom:1px solid rgba(0,0,0,.2)}