/* ビンゴ抽選機の D4（ストリート和忍者）合わせ。
   部品・色・影の約束は kit/kit.css。ここは既存クラスの見た目を kit の変数で上書きするだけ（機能・中身は変えない）。
   各ページの <style> のあとに読む。/view/（OBS表示）と全画面（#stage.fs）の見た目は変えない。
   玉と盤面の色（B・I・N・G・O の色分け）は意味があるのでそのまま。 */

/* ===== 全ページ ===== */
body.k-page{background:var(--k-surface);color:var(--k-sumi)}
.k-page a{text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:3px}
/* 主ボタン＝木札（.k-btn.k-btn-main を HTML に付けている。古い塗り・角丸・影を消して木札に戻す） */
.k-btn.k-btn-main{border-style:solid;border-width:12px 16px;border-image:url(kit/img/d3-wood.webp) 40 50 fill / 12px 16px stretch;border-radius:0;background:none;box-shadow:none;color:#fff;text-shadow:var(--k-outline);filter:drop-shadow(4px 4px 0 var(--k-sumi));font-family:var(--k-bold);font-weight:400;letter-spacing:.04em;overflow:visible;text-decoration:none}
.k-btn.k-btn-main::after{display:block;width:auto;height:auto;top:-12px;left:-16px;transform:none}
.k-btn.k-btn-main:hover{background:none}
.k-btn.k-btn-main:active{transform:translate(4px,4px);filter:drop-shadow(0 0 0 var(--k-sumi))}
.k-btn.k-btn-main:disabled{background:none;opacity:.5}
/* 共通フッター（中身はそのまま。和紙＋墨の線＋下端に砦の線） */
body.k-page>footer{position:relative;overflow:hidden;background:var(--k-kinari) url(kit/img/d4-washi.webp) 0 0/320px auto!important;border-top:var(--k-bw) solid var(--k-sumi)!important;color:var(--k-text-2)!important;padding-bottom:3.4rem!important}
body.k-page>footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:url(kit/img/d4-line.webp) left bottom/auto 100% repeat-x;opacity:.12;pointer-events:none}
body.k-page>footer a{color:var(--k-sumi)!important}
.kkp-ad-label{color:var(--k-text-2)}

/* ===== 抽選の画面（トップ） ===== */
.d4-bingo h1{font-family:var(--k-brush);font-weight:400;letter-spacing:.06em;font-feature-settings:"palt" 1}
.d4-bingo h2{font-family:var(--k-head);font-weight:800;letter-spacing:.02em;color:var(--k-sumi);font-feature-settings:"palt" 1}
.d4-bingo .setting h2,.d4-bingo .keihin h2,.d4-bingo .s-head h2{color:var(--k-sumi)}
.d4-bingo #column-label,.d4-bingo #remaining{font-family:var(--k-bold);font-weight:400}
.d4-bingo #remaining{font-variant-numeric:tabular-nums}

/* 下に固定した抽選スタートの帯: 市松＋墨の線 */
.d4-bingo #dock{background-color:var(--k-kinari);background-image:conic-gradient(rgba(31,26,23,.04) 25%,transparent 0 50%,rgba(31,26,23,.04) 0 75%,transparent 0);background-size:16px 16px;border-top:var(--k-bw) solid var(--k-sumi)}
.d4-bingo #dock #start-btn.k-btn-main{background:none;box-shadow:none;min-height:60px;padding:0 16px;font-size:1.3rem}
/* 配信モードの予想タイム中は朱の札（押せない間の合図） */
html.stream .d4-bingo #dock #start-btn.guessing{border:var(--k-bw) solid var(--k-sumi);border-image:none;border-radius:var(--k-r);background:var(--k-shu);filter:none;box-shadow:var(--k-sh-l)}

/* 副ボタン（1つ戻す・全画面・コピーなど）: 生成り・墨のふち・斜めの影 */
.d4-bingo button.sub-btn:not(#fs-undo){color:var(--k-sumi);background:var(--k-kinari);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400}
.d4-bingo button.sub-btn:not(#fs-undo):active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-bingo button.sub-btn.armed,.d4-bingo button.s-ann{background:var(--k-shu);border-color:var(--k-sumi);color:#fff}
.d4-bingo button.s-go{background:var(--k-sumi);border-color:var(--k-sumi);color:#fff}
.d4-bingo #reset-btn{background:var(--k-shu);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400}
/* 切り替え（効果音・読み上げ・演出の長さ・予想タイム）: 選択中は朱 */
.d4-bingo button.snd-btn{color:var(--k-sumi);background:var(--k-surface);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r-pill);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400}
.d4-bingo button.snd-btn[aria-pressed="true"]{background:var(--k-shu);border-color:var(--k-sumi);color:#fff;transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-bingo .set-row select,.d4-bingo .s-row select,.d4-bingo .kh-in input,.d4-bingo .s-verify input{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface)}
/* 折りたたみの札（使い方・盤面の見方など） */
.d4-bingo details.fold>summary{border:var(--k-bw-s) solid var(--k-sumi);color:var(--k-sumi);background:var(--k-surface);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400}
.d4-bingo #stage.fs details.fold>summary{box-shadow:none}

/* 盤面は色を残し、ふちだけ墨に */
.d4-bingo .board button.bc{border-color:rgba(31,26,23,.25)}
.d4-bingo .board button.bc.last{outline-color:var(--k-sumi)}

/* カード作成への案内（インラインの青い札を D4 の文字リンクに） */
.d4-bingo .card-link a{background:var(--k-kinari)!important;color:var(--k-sumi)!important;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r)!important;box-shadow:var(--k-sh-s);text-decoration-color:var(--k-orange)!important;font-family:var(--k-bold);font-weight:400!important}
.d4-bingo .card-link a:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}

/* 箱（使い方・景品の目安・設定・配信ビンゴ・解説） */
.d4-bingo .howto:not(.fold),.d4-bingo .info-blocks .ib,.d4-bingo .bingo-goods{background:var(--k-surface) url(kit/img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s)}
.d4-bingo .info-blocks summary{color:var(--k-sumi);font-family:var(--k-bold);font-weight:400}
.d4-bingo .info-blocks .ib-body a,.d4-bingo .kh-note a,.d4-bingo .kh-next a,.d4-bingo .howto-n a{color:var(--k-sumi);font-weight:700}
.d4-bingo .setting,.d4-bingo .keihin{border-top:var(--k-bw-s) solid var(--k-sumi)}
.d4-bingo .kh-table th{background:var(--k-kinari)}
.d4-bingo .s-panel{border-color:var(--k-sumi)}
.d4-bingo .s-code{font-family:var(--k-bold);font-weight:400;letter-spacing:.12em}

/* ===== 配信でビンゴ大会をする方法（/haishin/） ===== */
.d4-read h1{font-family:var(--k-head);font-weight:800;letter-spacing:.02em;line-height:1.45;font-feature-settings:"palt" 1}
.d4-read h1 .c{font-family:var(--k-body);font-weight:700}
.d4-read h2{font-family:var(--k-head);font-weight:800;letter-spacing:.02em;font-feature-settings:"palt" 1;background:var(--k-kinari) url(kit/img/d4-washi.webp) 0 0/320px auto;border-left:5px solid var(--k-sumi);padding:.3rem .7rem}
.d4-read a{color:var(--k-sumi)}
.d4-read p a,.d4-read li a,.d4-read dd a,.d4-read .toc a,.d4-read .crumb a{font-weight:700}
.d4-read a.cta.k-btn-main{display:flex;width:100%;min-height:56px;font-size:1rem;white-space:normal;text-align:center;line-height:1.35;padding:4px 10px;color:#fff}
.d4-read .note-b{background:var(--k-kinari);border-left-color:var(--k-sumi)}
.d4-read table.kv th{background:var(--k-kinari)}
.d4-bingo button.sub-btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ホーム画面に追加（kit の k-install）。ページ全体の button の塗り・影・余白を外す */
#installBanner{text-align:left}
#installBanner button{margin:0}
#installBanner .k-install-x{padding:0;border-radius:0;background:none;box-shadow:none;color:var(--k-text-2);font-size:22px;font-weight:400}
#installBanner .k-install-x:active{transform:none}

/* 配色の見直し 2026-10-30（ワードウルフで先に試したものを横展開）: 押す所＝はっきりしたオレンジ、選んでいる所＝紺。
   根拠と計測は ~/test/デザイン調査_2026-10-30/提案.md。結果が悪ければこの塊を消せば元に戻る */
:root{--kc-navy:#2b3768;--kc-orange:#f26a1b}
body .k-btn-main{padding:0 22px}
body .k-btn.k-btn-main,body .k-btn.k-btn-main:hover,body .k-btn.k-btn-main:hover:not([disabled]),body .k-btn.k-btn-main:disabled,body .k-btn.k-btn-main[disabled]{border:3px solid var(--k-sumi);border-image:none;border-radius:14px;background:var(--kc-orange)}
body .k-btn.k-btn-main::after{inset:0;top:0;left:0;width:auto;height:auto;-webkit-mask:none;mask:none;border-radius:11px}
body #dock #start-btn.k-btn.k-btn-main{background:var(--kc-orange)}
body.d4-bingo button.snd-btn[aria-pressed="true"]{background:var(--kc-navy);color:#fff}