/* ビンゴカード作成・印刷の D4（ストリート和忍者）合わせ。
   部品・色・影の約束は kit/kit.css。ここは既存クラスの見た目を kit の変数で上書きするだけ（機能・中身は変えない）。
   印刷の見た目（1枚・4枚・柄）は変えないので、ここはすべて画面のときだけ（@media screen）。
   body に k-page は付けない（付けると印刷のカードの書体まで変わるため）。地と本文の書体はここで画面だけ変える。
   カードの B・I・N・G・O の色分けと柄はそのまま。 */
@media screen{
body{background:var(--k-surface)!important;color:var(--k-sumi);font-family:var(--k-body);line-height:1.6}
body :focus-visible{outline:4px double var(--k-shu);outline-offset:3px}
a{text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:3px}
h1{font-family:var(--k-brush);font-weight:400;color:var(--k-sumi);letter-spacing:.06em;font-feature-settings:"palt" 1}

/* 主ボタン＝木札（.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:.1em}
.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}
#dock button.k-btn-main{min-height:58px;padding:0 8px}
/* カードを作ったあとは「プレイ開始」が主。「生成」は副（生成り・墨のふち）に下げる */
body.has-card #dock .btn-generate.k-btn-main{border:var(--k-bw) solid var(--k-sumi);border-image:none;border-radius:var(--k-r);background:var(--k-kinari);color:var(--k-sumi);text-shadow:none;filter:none;box-shadow:var(--k-sh-l)}
body.has-card #dock .btn-generate.k-btn-main:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--k-sumi)}

/* 下に固定した操作帯: 市松＋墨の線 */
#dock{background-color:var(--k-kinari)!important;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)!important}

/* 副ボタン（印刷・コピー・参加など）: 生成り・墨のふち・斜めの影 */
.btn-print,.btn-print4,button.lv-sub,.share-row button.sr-copy{background:var(--k-kinari);color:var(--k-sumi);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}
.btn-print:active,.btn-print4:active,button.lv-sub:active,.share-row button.sr-copy:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.btn-print:disabled,button.lv-sub:disabled{opacity:.45;box-shadow:none}
.lj-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}
/* 柄を選ぶ: 選択中は朱 */
.theme-pick label span{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r-pill);background:var(--k-surface);color:var(--k-sumi);box-shadow:var(--k-sh-s)}
.theme-pick input:checked+span{border:var(--k-bw-s) solid var(--k-sumi);background:var(--k-shu);color:#fff;font-weight:700;box-shadow:none;transform:translate(3px,3px)}
.lj-row input,.lv-name input{border:var(--k-bw-s) solid var(--k-sumi)!important;border-radius:var(--k-r)}

/* 箱（使い方・配信のビンゴに参加・解説・ビンゴ用品） */
.howto,.info-blocks .ib,.bingo-goods,.live-join{background:var(--k-surface) url(kit/img/d4-washi.webp) 0 0/320px auto!important;border:var(--k-bw-s) solid var(--k-sumi)!important;border-radius:var(--k-r)!important;box-shadow:var(--k-sh-s)}
.howto-t,.info-blocks summary,.live-join summary{color:var(--k-sumi);font-family:var(--k-bold);font-weight:400}
.info-blocks .ib-body a,.howto-n a{color:var(--k-sumi);font-weight:700}
.link-section a{color:var(--k-sumi);font-weight:700;text-decoration:underline;text-decoration-color:var(--k-orange)}

/* 配信ビンゴの参加画面: 名乗りと下の帯 */
.lv-top h2{font-family:var(--k-head);font-weight:800;letter-spacing:.02em;color:var(--k-sumi)}
.lv-game b{font-family:var(--k-bold);font-weight:400;letter-spacing:.08em}
button.lv-main.k-btn-main{display:flex;width:100%;min-height:58px;margin:8px 0 0;font-size:1.1rem}
.lv-dock button.lv-main.k-btn-main{margin:0}
.lv-dock{background-color:var(--k-kinari)!important;border-top:var(--k-bw) solid var(--k-sumi)!important}
.lv-bingo{border-color:var(--k-sumi)}

/* 共通フッター（中身はそのまま。和紙＋墨の線＋下端に砦の線） */
body>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>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>footer a{color:var(--k-sumi)!important}
.kkp-ad-label{color:var(--k-text-2)}

/* ===== 2026-10-20 清潔感（kit 17eac63 に合わせる） =====
   入れ物は影なし・箱をやめて罫線でつなぐ。押せるもの（ボタン・柄の札）だけ影。カードの BINGO の色分けはそのまま */
.howto{background:none!important;border:0!important;border-left:3px solid var(--k-sumi)!important;border-radius:0!important;box-shadow:none;padding:4px 0 4px 14px}
.howto-t{color:var(--k-sumi);font-size:16px}
.howto-s2{color:var(--k-text-2)}
/* たたむ欄（配信のビンゴに参加・解説）＝ kit の k-fold の形（上下の罫線・右に＋／－） */
.live-join,.info-blocks .ib{background:none!important;border:0!important;border-bottom:1px solid var(--k-line-soft)!important;border-radius:0!important;box-shadow:none;margin:0}
.live-join{border-top:1px solid var(--k-line-soft)!important;margin:8px auto}
.info-blocks .ib:first-child{border-top:1px solid var(--k-line-soft)!important}
.live-join>summary,.info-blocks .ib>summary{display:flex;align-items:center;gap:12px;list-style:none;padding:12px 4px;color:var(--k-sumi);font-size:16px}
.live-join>summary::-webkit-details-marker{display:none}
.live-join>summary::after,.info-blocks .ib>summary::after{content:"＋";flex:none;display:grid;place-items:center;width:28px;height:28px;margin-left:auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;font-family:var(--k-body);font-size:16px;font-weight:700;line-height:1}
.live-join[open]>summary::after,.info-blocks .ib[open]>summary::after{content:"－";background:var(--k-sumi);color:#fff}
.info-blocks .ib-hint{display:none}
.info-blocks .ib-body,.live-join .lj-form{padding:0 4px 16px}
/* 姉妹サイトへの文字リンク（k-link）。中央の段のまま */
.link-section a.k-link{text-decoration:underline;text-decoration-color:var(--k-orange);word-break:auto-phrase;text-wrap:balance;max-width:100%}
.link-section .ls-sub{color:var(--k-text-2);font-size:14px}
/* カードの柄＝ kit の k-seg の形（四角を墨の線でつなぐ・選択中は朱） */
.theme-pick{gap:0}
.theme-pick .tp-l{margin-bottom:6px}
.theme-pick label span{border:var(--k-bw-s) solid var(--k-sumi);border-radius:0;margin-left:-2px;background:var(--k-surface);color:var(--k-sumi);box-shadow:none}
.theme-pick label:nth-of-type(1) span{border-radius:var(--k-r) 0 0 var(--k-r);margin-left:0}
.theme-pick label:last-of-type span{border-radius:0 var(--k-r) var(--k-r) 0}
.theme-pick input:checked+span{background:var(--k-shu);color:#fff;transform:none;box-shadow:none}
/* 空の案内行は場所を取らない（生成前の上の空き） */
#playGuide:empty,#startTime:empty,#statusMsg:empty{display:none}

/* ===== 2026-10-21 見栄え: チェックした番号を読めるように・ビンゴ成立を目立たせる =====
   チェック済みは灰に灰で読めなかった → 地を生成り・数字は墨のまま、上から墨の判（k-stamp-sumi と同じ絵と色）を押す。
   B・I・N・G・O の5色はそのまま（変えるかはユーザー判断）。印刷は @media screen の外なので変わらない */
#bingo .cell.marked,.lv-card button.on{background:var(--k-kinari)!important;color:var(--k-sumi)!important;box-shadow:inset 0 0 0 2px var(--k-line-soft)!important;position:relative}
#bingo .cell.marked::after,.lv-card button.on::after{content:"";position:absolute;inset:3px;background:url(kit/img/d4-hanko.webp) center/100% 100% no-repeat;filter:grayscale(1) brightness(.42) contrast(1.2);opacity:.78;transform:rotate(-8deg);pointer-events:none;animation:bc-stamp .3s cubic-bezier(.3,.9,.4,1) both}
.lv-card button.on{position:relative}
@keyframes bc-stamp{from{opacity:0;transform:scale(1.5) rotate(-8deg)}to{opacity:.78;transform:scale(1) rotate(-8deg)}}
#bingo .cell.marked.bingo-line{outline:3px solid var(--k-shu)}
/* ビンゴ成立: 朱の判「ビンゴ」＋本数。下の固定バーの上に出す（知らせ k-toast もバーの上） */
#statusMsg.is-bingo{display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;color:var(--k-shu)}
#statusMsg .bc-stamp.k-stamp{width:78px;height:78px;font-size:20px;letter-spacing:0}
#statusMsg .bc-n{font-family:var(--k-bold);font-size:28px;color:var(--k-sumi)}
body{--k-install-bottom:var(--dockH,72px)}
@media (prefers-reduced-motion:reduce){#bingo .cell.marked::after,.lv-card button.on::after{animation:none}}
/* 2026-10-22 玉に kkp-kit の k-ball の艶と墨のふち（JS で .k-ball を付ける）。色（B・I・N・G・O の5色）はこのサイトのまま。チェック済み（判）には付けない */
#bingo .cell.k-ball:not(.marked),.lv-card button.k-ball:not(.on){background-image:var(--k-ball-gloss);box-shadow:var(--k-ball-rim)}
}

/* 配色の見直し 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}