/* 声と表情で当てるゲーム の D4（ストリート和忍者）合わせ。
   部品・色・影の約束は kit/kit.css。ここは既存クラスの見た目を kit の変数で上書きするだけ（機能・中身・文言は変えない）。
   各ページの <style> のあとに読む。ページの種類は body のクラス（d4-play＝遊ぶ画面／d4-read＝読みもの）で分ける。
   配信モード（body.stream）の操作画面・/view/（OBS表示）・英語版は、ここでは大きさ・配置・見た目を変えない（配信画面の改善は別にやる）。
   主ボタン（木札）は HTML にクラスを足さず CSS だけ（JS が btn-primary / btn-sub / btn-eq を付け替え、#dock に移すため）。 */

/* ===== 全ページ ===== */
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-page .ad-label{color:var(--k-text-2)}
/* PR・アフィリの枠は文の折り返しを変えない（kit の p の字間を戻す） */
.k-page .shop p,.k-page .shop-mini,.k-page .note{letter-spacing:normal}

/* 配信モードは書体・行間・字間を元に戻す（大きさ・配置を変えない） */
body.k-page.stream{font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN",system-ui,sans-serif;line-height:1.75;background:#fff;color:var(--ink)}
.k-page.stream p,.k-page.stream li{letter-spacing:normal}

/* ===== 遊ぶ画面（トップ・ふだんのモードと参加者画面） ===== */
.d4-play:not(.stream) header h1{font-family:var(--k-brush);font-weight:400;color:var(--k-sumi);letter-spacing:.06em;font-feature-settings:"palt" 1}
@media(max-width:559px){.d4-play:not(.stream) header h1{letter-spacing:.02em}}
.d4-play:not(.stream) header .hero-fan a{color:var(--k-sumi);font-weight:700}
.d4-play:not(.stream) header .hen a{color:var(--k-sumi)}
.d4-play:not(.stream) .hbar{border-bottom:var(--k-bw) solid var(--k-sumi)}
.d4-play:not(.stream) .hb-name{font-family:var(--k-bold);font-weight:400;color:var(--k-sumi)}
.d4-play:not(.stream) .now-actor b{color:var(--k-shu)}

/* 段ごとの枠（和紙・墨のふち・斜めの影） */
.d4-play:not(.stream) main .card,.d4-play:not(.stream) #step-setup{background:var(--k-surface) url(/kit/img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l)}
.d4-play:not(.stream) .card h2{font-family:var(--k-bold);font-weight:400;color:var(--k-sumi);letter-spacing:.04em;font-feature-settings:"palt" 1}
.d4-play:not(.stream) span.step-label{background:var(--k-shu);color:#fff;border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;font-family:var(--k-bold);font-weight:400;letter-spacing:.06em;box-shadow:2px 2px 0 var(--k-sumi)}
.d4-play:not(.stream) .stats-bar{background:var(--k-kinari);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r)}
.d4-play:not(.stream) .stats-bar b{color:var(--k-shu)}
.d4-play:not(.stream) .num .val{font-family:var(--k-bold);font-weight:400;color:var(--k-sumi);font-variant-numeric:tabular-nums}
.d4-play:not(.stream) button.btn-ghost{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-kinari);color:var(--k-sumi);box-shadow:var(--k-sh-s);font-family:var(--k-bold)}
.d4-play:not(.stream) button.btn-ghost:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-play:not(.stream) .act-lbl,.d4-play:not(.stream) .cn-l{color:var(--k-text-2)}
.d4-play:not(.stream) .stream-sw input,.d4-play:not(.stream) .cast-sw input{accent-color:var(--k-shu)}

/* 選ぶ札（カテゴリ・お題の3択・演じる人）: 選択中は朱 */
.d4-play:not(.stream) button.cat-btn{background:var(--k-surface);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);color:var(--k-sumi);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400;font-feature-settings:"palt" 1}
.d4-play:not(.stream) button.cat-btn.active{background:var(--k-shu);color:#fff;transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-play:not(.stream) .cat-grid{padding-bottom:.7rem}
.d4-play:not(.stream) .cat-scroll::after{background:linear-gradient(90deg,transparent,rgba(255,253,248,.96))}
.d4-play:not(.stream) .pick-item,.d4-play:not(.stream) .vote-item,.d4-play:not(.stream) .g-c{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface);color:var(--k-sumi)}
.d4-play:not(.stream) .pick-item,.d4-play:not(.stream) .vote-item{box-shadow:var(--k-sh-s)}
.d4-play:not(.stream) .pick-item[aria-pressed="true"],.d4-play:not(.stream) .vote-item[aria-pressed="true"],.d4-play:not(.stream) .g-c[aria-pressed="true"]{background:var(--k-kinari);border-color:var(--k-shu);box-shadow:0 0 0 2px var(--k-shu),var(--k-sh-s)}
.d4-play:not(.stream) .pick-item[aria-pressed="true"]::after{background:var(--k-shu);border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .pick-item .pi-w{color:var(--k-sumi);font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .pick-item .pi-s,.d4-play:not(.stream) .cat-desc{color:var(--k-text-2)}
.d4-play:not(.stream) .ap-btn{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface);color:var(--k-sumi);box-shadow:var(--k-sh-s)}
.d4-play:not(.stream) .ap-btn[aria-pressed="true"]{background:var(--k-shu);color:#fff;transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-play:not(.stream) .next-pick{border:var(--k-bw-s) dashed var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface)}
.d4-play:not(.stream) .np-h{font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .redraw,.d4-play:not(.stream) .np-link{color:var(--k-sumi);text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:3px}

/* 主ボタン＝木札（btn-primary。JS が付け替えるクラスに合わせて CSS だけで）。「すぐ発表する」（.unveil-skip）は小さい文字ボタンのまま */
body.d4-play:not(.stream) :is(#dock,#step-setup,#step-deal,#step-perform,#step-vote,#step-result) button.btn-primary:not(.unveil-skip),
body.d4-play:not(.stream) #dock #toPerform:not(:disabled){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:.06em;min-height:56px;padding:0 12px;line-height:1.3}
body.d4-play:not(.stream) :is(#dock,#step-setup,#step-deal,#step-perform,#step-vote,#step-result) button.btn-primary:not(.unveil-skip):active,
body.d4-play:not(.stream) #dock #toPerform:not(:disabled):active{transform:translate(4px,4px);filter:drop-shadow(0 0 0 var(--k-sumi))}
/* 副ボタン（設定に戻る・投票をやめる・まだ押せない「演じる」）: 生成り・墨のふち */
body.d4-play:not(.stream) :is(#dock,main) button.btn-sub{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;letter-spacing:.04em}
body.d4-play:not(.stream) :is(#dock,main) button.btn-sub:disabled{opacity:.55;box-shadow:none}
body.d4-play:not(.stream) :is(#dock,main) button.btn-sub:not(:disabled):active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
/* 演技のあとの2択（投票する／答えだけ見る）は同じ重さのまま。墨のふちの札 */
body.d4-play:not(.stream) button.btn-eq{background:var(--k-surface);color:var(--k-sumi);border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s);font-family:var(--k-bold);font-weight:400}
body.d4-play:not(.stream) button.btn-eq:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
/* 下の固定帯（スマホ）: 生成りの市松＋墨の線 */
@media(max-width:767px){body.d4-play:not(.stream) #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-s) solid var(--k-sumi)}}
.d4-play:not(.stream) #dockMsg{color:var(--k-sumi)}

/* 配る札・舞台・答え（絵柄と色分けはそのまま、ふちと影だけ墨に） */
.d4-play:not(.stream) .deal-card{border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l)}
.d4-play:not(.stream) .deal-card.done{box-shadow:none}
.d4-play:not(.stream) .deal-link,.d4-play:not(.stream) .deal-qr,.d4-play:not(.stream) .join-link,.d4-play:not(.stream) .join-qr,.d4-play:not(.stream) .ann-btn{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface);color:var(--k-sumi)}
.d4-play:not(.stream) .deal-link.sent,.d4-play:not(.stream) .deal-qr.sent,.d4-play:not(.stream) .join-link.sent,.d4-play:not(.stream) .ann-btn.sent{border-color:var(--ok);color:#2f7a45;background:#f3faf5}
.d4-play:not(.stream) .stage,.d4-play:not(.stream) .g-stage{border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l)}
.d4-play:not(.stream) .stage .st-word,.d4-play:not(.stream) .g-word{font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .cands,.d4-play:not(.stream) .score,.d4-play:not(.stream) .ann{background:var(--k-kinari);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r)}
.d4-play:not(.stream) .ann{border-left-width:6px}
.d4-play:not(.stream) .ans-card{border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s)}
.d4-play:not(.stream) .score h3,.d4-play:not(.stream) .vote-who{font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .score .sr b{color:var(--k-shu)}
.d4-play:not(.stream) .sr.top .sr-rk{background:var(--k-shu);color:#fff}
.d4-play:not(.stream) .unveil-msg{font-family:var(--k-bold);font-weight:400}

/* 名前入れ・はじめての方へ・配信から来た人の一言 */
.d4-play:not(.stream) .names-box{border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface)}
.d4-play:not(.stream) .names-sum{color:var(--k-sumi);font-family:var(--k-bold);font-weight:400}
.d4-play:not(.stream) .names-row input,.d4-play:not(.stream) .my-form input,.d4-play:not(.stream) .my-form textarea,.d4-play:not(.stream) .g-prow input{border-color:var(--k-sumi)}
.d4-play:not(.stream) .from-stream{background:var(--k-kinari);border-left-color:var(--k-sumi)}

/* 参加者画面（離れて遊ぶリンク）: 色だけ（大きさ・配置は昨夜のまま） */
.d4-play .g-prow button{background:var(--k-shu)}
.d4-play .g-nb{border-color:var(--k-sumi);color:var(--k-sumi)}
.d4-play .g-nb[aria-pressed="true"]{background:var(--k-shu);border-color:var(--k-sumi);color:#fff}
.d4-play .g-say{border-left-color:var(--k-sumi)}
.d4-play .g-say b{color:var(--k-shu);font-family:var(--k-bold);font-weight:400}
.d4-play .g-foot a,.d4-play .g-err a{color:var(--k-sumi)}
.d4-play .g-err a{border-color:var(--k-sumi)}

/* QRで渡す小窓 */
.d4-play .qm-in{border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r)}
.d4-play .qm-close{background:var(--k-shu);border-radius:var(--k-r)}

/* 読みもの（遊び方・よくある質問） */
.d4-play:not(.stream) details.block{background:var(--k-surface);border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-s);color:var(--k-sumi)}
.d4-play:not(.stream) details.block h2{font-family:var(--k-head);font-weight:800;color:var(--k-sumi);letter-spacing:.02em}
.d4-play:not(.stream) details.block dt,.d4-play:not(.stream) details.block dd{color:var(--k-sumi)}
.d4-play:not(.stream) .wrap>p.note a,.d4-play:not(.stream) details.block a{color:var(--k-sumi);font-weight:700}
.d4-play:not(.stream) #odaiLink{color:var(--k-sumi)!important;text-decoration:underline!important;text-decoration-color:var(--k-orange)!important}

/* 共通フッター（中身はそのまま。和紙＋墨の線＋下端に砦の線） */
.k-page .wrap>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;padding-bottom:3.4rem!important}
.k-page .wrap>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}

/* ===== 読みもの（/haishin/・/odai/） ===== */
.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;color:var(--k-text-2)}
.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 h2 .n{font-family:var(--k-body)}
.d4-read details.block h2{background:none;border:0;padding:0}
.d4-read details.block{border-color:var(--k-line-soft)}
.d4-read a{color:var(--k-sumi)}
.d4-read p a,.d4-read li a,.d4-read dd a,.d4-read .toc a{font-weight:700}
.d4-read .toc{border-color:var(--k-sumi)}
.d4-read a.cta{display:flex;align-items:center;justify-content:center;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;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:0;font-size:15px;min-height:56px;padding:2px 6px;line-height:1.35;text-decoration:none;text-wrap:balance}
.d4-read a.cta:active{transform:translate(4px,4px);filter:drop-shadow(0 0 0 var(--k-sumi))}
.d4-read a.cta2,.d4-read .play .btn,.d4-read .w h3 .pw{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}
.d4-read a.cta2:active,.d4-read .play .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.d4-read .w h3{background:var(--k-kinari);border-left:3px solid var(--k-sumi)}
.d4-read .note-b{background:var(--k-kinari);border-left-color:var(--k-sumi)}
.d4-read code{overflow-wrap:anywhere}

/* 配色の見直し 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}
.k-page.d4-play:not(.stream) span.step-label{background:var(--kc-navy)}
.k-page.d4-play:not(.stream) button.cat-btn.active,.k-page.d4-play:not(.stream) .ap-btn[aria-pressed="true"],.k-page.d4-play .g-nb[aria-pressed="true"],
.k-page .log-scope button[aria-pressed="true"]{background:var(--kc-navy);color:#fff}
html body.d4-play:not(.stream) :is(#dock,#step-setup,#step-deal,#step-perform,#step-vote,#step-result) button.btn-primary:not(.unveil-skip),
html body.d4-play:not(.stream) #dock #toPerform:not(:disabled){border:3px solid var(--k-sumi);border-image:none;border-radius:14px;background:var(--kc-orange)}