:root{
  color-scheme:dark;
  --wood1:#f0c070; --wood2:#dfa24e; --line:#7a4a12;
  --piece1:#fde8bc; --piece2:#e9bf78; --ink:#2a1600; --red:#c0392b;
  --bg1:#101b30; --bg2:#1d3252; --gold:#ffcf40; --accent:#ff8c1a;
  --card:#ffffff10; --border:#ffffff26;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
 background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#14243d);
 color:#fff;min-height:100vh;line-height:2}
.wrap{max-width:760px;margin:0 auto;padding:12px 16px 60px;position:relative}
:root{--cell:calc((min(100vw,430px) - 34px) / 9)}
header{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px;gap:8px}
header .logo{font-weight:800;font-size:16px;line-height:2;white-space:nowrap;position:relative;z-index:10;flex:none}
header .logo span{color:var(--gold)}
header a{color:#fff;text-decoration:none}
header a.logo::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
header .hmid{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#ffffffcc;line-height:1.5}
header .hmid .sep{color:#ffffff4d;margin:0 5px}
section{scroll-margin-top:92px}   /* アンカー移動でsticky進捗バーに見出しが隠れないように */
.breadcrumb{font-size:12px;color:#ffffff99;margin-bottom:6px}
.breadcrumb a{color:#ffffff99}
h1{font-size:24px;line-height:1.4;margin-bottom:8px}
h2{font-size:19.5px;color:var(--gold);border-left:4px solid var(--gold);
 padding-left:10px;margin:48px 0 14px;line-height:1.5}
h3{font-size:16px;color:#fff}
p{font-size:14.5px;margin:10px 0}
a{color:var(--gold)}
.pubdate{font-size:12px;color:#ffffff99;margin:0 0 6px}
.lead{font-size:14.5px}
.note{background:#ff8c1a1a;border:1px solid #ff8c1a55;border-radius:10px;
 padding:10px 14px;font-size:13.5px;margin:12px 0}
.point{background:#ffcf401a;border:1px solid #ffcf4055;border-radius:10px;
 padding:10px 14px;font-size:13.5px;margin:12px 0}
#menuBtn{position:relative;z-index:301;width:34px;height:30px;background:#0009;border:1px solid #ffffff33;border-radius:8px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex:none}
#menuBtn::after{content:"";position:absolute;inset:-8px}
#menuBtn i{display:block;width:16px;height:2px;background:#fff;border-radius:2px}
#menuPanel{display:none;position:absolute;top:54px;right:16px;z-index:300;
 background:#16274a;border:1px solid #ffffff33;border-radius:10px;min-width:210px;max-width:calc(100% - 32px);
 max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 10px 30px #000c}
#menuPanel a.mh{display:block;text-decoration:none;padding:14px 16px 13px}
#menuPanel a.mh:active{background:#ffffff14}
#menuPanel .mh{padding:9px 16px 5px;font-size:11px;font-weight:700;color:#ffd884;background:#00000033;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel a.mlink{display:block;padding:12px 16px;font-size:13.5px;color:#fff;text-decoration:none;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel .dis{display:block;padding:12px 16px;font-size:13.5px;color:#7387a8;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel > *:last-child{border-bottom:none}
#menuPanel a.mlink:active{background:#ffffff14}
.progress{position:sticky;top:0;z-index:9;background:#101b30ee;border-bottom:1px solid var(--border);
 padding:6px 10px;font-size:13px;text-align:center;backdrop-filter:blur(4px)}
.progress b{color:var(--gold)}
.ctip{font-size:13.5px;color:#ffffffcc}
/* 章の中だけ並べ替えるので、章をflexにする（並べ替えはCSSのorder。HTMLの並びは変えない）
   flexにするとマージンの相殺が止まるので、上マージンを0にして相殺前と同じ間隔に戻す */
section[data-cat]{display:flex;flex-direction:column;margin-bottom:-18px}
section[data-cat]>h2{margin-bottom:14px}
section[data-cat]>.ctip{margin-top:0;margin-bottom:18px}
section[data-cat]>.prob{margin-top:0}
.prob{background:var(--card);border:1px solid var(--border);border-radius:14px;
 padding:14px 14px 10px;margin:18px 0}
.phead{display:flex;align-items:center;gap:10px}
.pdone{font-size:13px;color:#7fe27f;font-weight:700}
.hand{font-size:13.5px;margin:6px 0}
.stage{position:relative;width:calc(min(100vw,430px) - 16px);margin:8px auto;user-select:none}
/* 盤・駒・持ち駒・挙動表示・成りダイアログのCSSは共通の shogi-ui.css を使用（2026-07-19） */
@media (max-width:479px){
 .prob{margin-left:-16px;margin-right:-16px;border-left:none;border-right:none;border-radius:0;
  padding-left:8px;padding-right:8px}
}
.postext{font-size:12px;color:#ffffff99}
details.ans img{max-width:100%;height:auto;display:block;margin:8px auto 0}
details.ans,details.faq,details.about1te,details.fail{background:#00000026;border:1px solid var(--border);border-radius:10px;
 padding:8px 14px;margin:10px 0;font-size:14px}
details summary{cursor:pointer;font-weight:700;color:var(--gold)}
details p{margin:8px 0}
.anstext b{color:var(--gold)}
table.plain{border-collapse:collapse;width:100%;margin:12px 0;font-size:13.5px}
table.plain th,table.plain td{border:1px solid var(--border);padding:6px 10px;text-align:left}
table.plain th{background:#ffffff14;color:var(--gold)}
.cta{display:block;background:linear-gradient(135deg,var(--accent),#ff6a00);color:#fff;
 text-align:center;font-weight:800;font-size:15.5px;border-radius:12px;padding:12px;
 margin:14px 0;text-decoration:none;box-shadow:0 4px 14px #ff8c1a44}
.cta.sub{background:var(--card);border:1px solid var(--border);box-shadow:none}
footer{margin-top:20px;border-top:1px solid var(--border);padding-top:4px;text-align:center;font-size:12.5px;color:#ffffff99;line-height:44px}
footer a{color:#ffffff99;text-decoration:none;position:relative;display:inline-block}
footer a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
footer .cp{margin-left:10px;color:#ffffff80}
.reset{background:none;border:1px solid var(--border);color:#ffffff99;border-radius:8px;
 font-size:11.5px;padding:2px 10px;cursor:pointer;margin-left:10px}
.reset{position:relative}
.reset::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.breadcrumb a{position:relative;display:inline-block}
.breadcrumb a::after{content:"";position:absolute;left:-6px;right:-6px;top:-2px;height:50px}
/* 不正解演出＋答えを見るボタン（2026-07-20ユーザー指定・トップページと同じ「不正解…」＋揺れ） */
.pctl .answer{background:#8e44ad;flex:1;max-width:170px}
.pshake{animation:pshake .45s}
@keyframes pshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* 出題モード（1問ずつ・切替方式・2026-07-20） */
.trainbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 2px}
#trainStart{background:linear-gradient(135deg,var(--accent),#ff6a00);color:#fff;border:none;
 font-weight:800;font-size:15.5px;border-radius:12px;padding:13px 22px;cursor:pointer;
 box-shadow:0 4px 14px #ff8c1a44;font-family:inherit}
/* ランダム10問（2026-07-29ユーザー指示） */
.trainbar .tb2{border:none;color:#fff;font-family:inherit;font-weight:800;font-size:15.5px;
 border-radius:12px;padding:13px 22px;cursor:pointer;background:#3b5273}
.trainbar button:active{transform:scale(.97)}
/* 出題画面は1画面固定＝スクロールなし（フッターや一覧へ移動できない） */
body.training{overflow:hidden}
#trainScreen{display:none;position:fixed;inset:0;z-index:200;overflow:hidden;
 background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#14243d)}
body.training #trainScreen{display:flex;flex-direction:column}
body.training .wrap>*:not(#trainScreen){display:none}
.tbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
 background:#101b30ee;border-bottom:1px solid var(--border);padding:6px 10px;font-size:13px}
.tbar b{color:var(--gold)}
.tquit{background:none;border:1px solid var(--border);color:#ffffff99;border-radius:8px;
 font-size:11.5px;padding:2px 10px;cursor:pointer;flex:none}
.tdots{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.tdots i{width:9px;height:9px;border-radius:50%;background:#ffffff2e;flex:none}
.tdots i.ok{background:var(--gold)}
.tdots i.ng{background:#ff5b5b}
.tdots i.now{box-shadow:0 0 0 2px var(--accent)}
.tleft{flex:none;font-size:12px;color:#ffffffcc;min-width:56px;text-align:right}
.tcombo{position:relative;flex:none;height:24px;text-align:center;font-weight:800;font-size:13px;color:var(--gold);line-height:24px}
@media (max-width:340px){.tdots{gap:3px}.tdots i{width:7px;height:7px}.tleft{font-size:11px;min-width:46px}}
.tcombo .c5{font-size:15px;color:var(--accent)}
.tcombo .c10{font-size:17px;color:#ff5b5b;text-shadow:0 0 10px #ff8c1a99}
#trainSlot{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
#trainScore{display:none;flex:1;min-height:0;overflow:hidden;text-align:center;padding:18px 14px}
#trainScore p{margin:6px 0}
.ts-set{font-size:13px;color:#ffffff99}
.ts-h{font-size:21px;font-weight:800}
.ts-h b{color:var(--gold);font-size:30px}
.ts-star{font-size:34px;color:var(--gold);letter-spacing:4px;line-height:1.2}
.ts-time,.ts-wrong{font-size:13.5px;color:#ffffffcc}
.ts-btns{margin-top:14px}
.tsb{display:block;width:100%;max-width:280px;margin:8px auto;padding:13px 0;border:none;border-radius:12px;
 font-size:15px;font-weight:800;color:#fff;font-family:inherit;cursor:pointer;background:#3b5273}
.tsb.main{background:linear-gradient(135deg,var(--accent),#ff6a00);box-shadow:0 4px 14px #ff8c1a44}
.tsb.sub{background:none;border:1px solid var(--border);color:#ffffff99;font-weight:700;font-size:13.5px}
.tsb.off{visibility:hidden}
.tsb:active{transform:scale(.98)}
/* 出題中は一覧用の枠・見出し・説明文・解説・手筋名・正解印を出さない（1画面に収めるため） */
#trainSlot .prob{background:none;border:none;border-radius:0;margin:0;padding:2px 8px 0;width:100%;max-width:446px}
#trainSlot .prob .phead,#trainSlot .prob .hand,#trainSlot .prob details.ans{display:none}
#trainSlot .stage{margin:6px auto}
.pctl .tnext{background:var(--accent);flex:1;max-width:170px}
/* 画面の高さが足りない端末だけ盤を縮める（駒・持ち駒も同じ比率で連動） */
@media (max-height:640px){
 body.training{--tbw:min(calc(min(100vw,430px) - 16px), calc(100svh - 240px));--tcl:calc((var(--tbw) - 6px) / 9)}
 #trainSlot .stage{width:var(--tbw)}
 #trainSlot{--cell:var(--tcl)}
 #trainSlot .pc{font-size:calc(var(--tcl) * .687 * var(--ps,1))}
 #trainSlot .hw .pc{font-size:calc(var(--tcl) * .576 * var(--ps,1))}
 #trainSlot .pc.two{font-size:calc(var(--tcl) * .41 * var(--ps,1))}
}

/* 問題カード・パターン一覧（2026-07-29：カテゴリタブ・型コード・レベルバッジは削除） */
.prob{scroll-margin-top:92px}
.patlist{margin:10px 0 6px;border:1px solid #ffffff26;border-radius:10px;padding:10px 12px;background:#ffffff08}
.patlist>summary{font-weight:800;cursor:pointer;color:var(--gold)}
.patcat{margin:12px 0 4px}
.patcat h4{margin:0 0 2px;font-size:15px}
.patlead{margin:0 0 6px;font-size:13px;opacity:.8}
.patlist ul{list-style:none;margin:0 0 10px;padding:0}
.patlist li{border-top:1px solid #ffffff1a;padding:7px 0}
.patlist li a{font-weight:700;text-decoration:none}
.patn{margin-right:8px;font-size:12px;opacity:.75;white-space:nowrap}
.pattip{font-size:13px;opacity:.85;line-height:1.6}

/* 形式4（詰み判定○×）＝2026-07-22（レベルタブは2026-07-29に削除） */
.q4btns{display:flex;gap:8px;justify-content:center;margin:8px 0 2px}
.q4btns button{flex:1;max-width:160px;border:none;border-radius:10px;padding:13px 4px;font-size:15px;font-weight:800;color:#fff;font-family:inherit;cursor:pointer}
.q4btns .q4y{background:#2f6fd0}.q4btns .q4n{background:#c0392b}
.q4btns button:active{transform:scale(.96)}

/* ===== 盤の筋・段（2026-07-29ユーザー指示。符号「１一玉」の根拠を盤上に出す）
   2026-08-13 改：濃さ50%＋盤のふちに半分のせる（マスの中を空ける） ===== */
.gboard .cf,.gboard .cr,.pdb .cf,.pdb .cr{position:absolute;z-index:6;pointer-events:none;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:9px;line-height:1;font-weight:700;
 color:#3a2405;opacity:.5;
 display:flex;align-items:center;justify-content:center}
.gboard .cf,.pdb .cf{top:-.5em;left:0;right:0;height:1em}    /* 筋＝盤の上ふちに半分のせる */
.gboard .cr,.pdb .cr{top:0;bottom:0;right:-.5em;width:1em}   /* 段＝盤の右ふちに半分のせる */
@media (min-width:400px){.gboard .cf,.gboard .cr,.pdb .cf,.pdb .cr{font-size:10px}}

/* ===== 表示切替バー＋★自分の問題集（2026-07-29） ===== */
.filterbar{display:flex;gap:6px;margin:8px 0 0}
.fbtn{flex:1;border:1px solid #ffffff33;background:#ffffff10;color:inherit;border-radius:8px;
 padding:14px 1px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
 white-space:nowrap;letter-spacing:-.02em}
@media (max-width:359px){.fbtn{font-size:11px}}
.fbtn.on{background:var(--gold);color:#1a1200;border-color:var(--gold)}
.starbtn{margin-left:auto;background:none;border:1px solid var(--border);border-radius:8px;
 color:#ffffff66;font-size:17px;line-height:1;padding:14px 13px;cursor:pointer;font-family:inherit;flex:none}
.starbtn.on{color:var(--gold);border-color:#ffcf4055;background:#ffcf4014}
.phead{flex-wrap:wrap;position:relative}
.phead h3{flex:0 1 auto;min-width:0}
/* 「× 間違えた」は浮かせて置く。行を増やさない＝間違えても見出しが折り返さず、盤が下に動かない
   （2026-08-16 松原さん指示「間違えると下に移動してしまうので、移動を禁止」） */
.wrongbadge{position:absolute;right:50px;top:50%;transform:translateY(-50%);z-index:2;
 font-size:11.5px;color:#ff8f8f;font-weight:700;white-space:nowrap;pointer-events:none;
 background:#241016f2;border-radius:6px;padding:1px 6px;line-height:1.7}
.wrongbadge:empty{display:none}

/* ===== 今日の1問（ファーストビュー・2026-07-29ユーザー指示） ===== */
/* 盤の左右に枠（カードの背景・枠線・余白）を作らない＝CLAUDE.md レイアウト7（2026-08-24 松原さん指示） */
#todayBox{margin:8px 0 2px;padding:0;background:none;border:0;border-radius:0}
#todayBox .tdhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 2px}
#todayBox h2{margin:0;font-size:16px;color:var(--gold)}
#todayNext{border:none;border-radius:10px;background:#3b5273;color:#fff;font-family:inherit;
 font-size:13px;font-weight:700;padding:13px 14px;cursor:pointer;flex:none}
#todayNext:active{transform:scale(.97)}
#todayBox .hw{width:max(34px,calc(var(--pdc) * .86));height:max(34px,calc(var(--pdc) * .86))}
#todayBox .hw .pc{font-size:max(21px,calc(var(--pdc) * .58 * var(--ps,1)))}

/* ===== パターン体験デモ（2026-07-29） ===== */
.pdemo{margin:6px 0 2px}
.pdbox{position:relative;margin:8px 0 2px;--pdc:min(9.6vw,38px);--cell:var(--pdc)}
.pdb{display:grid;width:fit-content;margin:0 auto;
 background:radial-gradient(circle at 30% 20%, #ffffff2e, #0000 60%),linear-gradient(135deg,var(--wood1),var(--wood2));
 border:3px solid var(--line);border-radius:4px;box-shadow:0 4px 14px #0009, inset 0 0 10px #a86a1e55}
.pdb .cell{width:var(--pdc);height:var(--pdc)}
.pdb .pc{font-size:calc(var(--pdc) * .69 * var(--ps,1))}
.pdb .pc.two{font-size:calc(var(--pdc) * .41 * var(--ps,1))}
.pdbox .hw .pc{font-size:calc(var(--pdc) * .58 * var(--ps,1))}
.pdbox .handrow{max-width:calc(var(--pdc) * 9);margin:6px auto}
.pdctl{display:flex;gap:8px;justify-content:center;margin:8px 0 0}
.pdctl button{border:none;border-radius:9px;color:#fff;font-family:inherit;font-size:13px;
 font-weight:700;padding:14px 16px;cursor:pointer;background:#3b5273}
.pdctl .pdshow{background:#8e44ad}
.pdctl button:active{transform:scale(.97)}
.pdmsg{margin:6px 0 0;font-size:13px;text-align:center;min-height:1.4em}
.pdmsg.ok{color:#7fe27f;font-weight:700}
.pdmsg.ng{color:#ff8f8f;font-weight:700}
.pdbox .splash{font-size:30px}

/* ===== 2026-08-15 検索意図別ページ分割で足した分 ===== */
.pno{font-size:11.5px;color:#ffffff8c;background:#ffffff14;border:1px solid var(--border);
 border-radius:6px;padding:1px 7px;margin-right:7px;flex:none;line-height:1.8}
.pmsg{min-height:52px;font-size:13.5px;line-height:1.6;margin:8px 0 0;padding:0 2px;color:#ffffffcc}
.pmsg.ok{color:#8ef0a8}
.pmsg.ng{color:#ffc7a1}
.ptools{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.ptools .ptool{display:inline-block;background:#ffffff10;border:1px solid var(--border);border-radius:8px;
 color:#ffffffb3;font-size:12.5px;text-decoration:none;padding:12px;line-height:1.5;cursor:pointer;min-height:44px}
.ptools .ptool:active{background:#ffffff1f}
/* 記録をリセットのタップ範囲を44pxにする（高さは増やさない＝CLAUDE.md タップ44pxの作り方1） */
.progress .reset{position:relative}
.progress .reset::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
button#menuBtn{padding:0;margin:0;font:inherit;-webkit-appearance:none;appearance:none}
.tdstreak{font-size:12.5px;color:#ffd884;line-height:1.6;margin:0 0 2px;min-height:20px}
#todayBox .tdhead h2{flex:1;min-width:0}
/* 手順は違うが3手で詰んだとき（トップページ #splash.near と同じ） */
.splash.near{color:#ff8c1a;white-space:pre-line;font-size:34px;line-height:1.3;letter-spacing:3px}
@media (min-width:400px){.splash.near{font-size:38px}}
/* 今日の1問はJSで作るので、先に高さを取っておく（レイアウトを動かさない・CLAUDE.md レイアウト4） */
/* 盤は9×9・トップページ（#app max-width:430px／左右padding 8px／盤border 3px）と同じ最大サイズにする
   （2026-08-24 松原さん指示。左右の枠を無くすため .wrap の左右padding 16px を打ち消す） */
#todaySlot{--pdc:calc((min(100vw,430px) - 22px) / 9);min-height:calc(var(--pdc) * 9 + max(34px, var(--pdc) * .86) + 76px);margin-left:-16px;margin-right:-16px}
/* 予約高さの内訳＝盤 --pdc×9＋枠6px ／ 持ち駒の行 max(34px,--pdc×.86)＋8px と上6px ／ ボタン行 48px（line-height 20px＋padding 28px）と上8px（持ち駒の行の下6pxと相殺）。
   ボタンの高さを端末のフォントに依存させない（=予約高さと実高さが必ず一致＝ボタンの下に空欄が出ない・2026-08-25 松原さん指示「空欄を埋める」） */
#todaySlot .pdctl button{line-height:20px}
#todaySlot .pdbox{--pdc:calc((min(100vw,430px) - 22px) / 9);--cell:var(--pdc);margin-top:0}
#todaySlot .handrow{max-width:calc(var(--pdc) * 9 + 6px)}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.ccard{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;
 padding:12px 13px;text-decoration:none;color:#fff;min-height:88px}
.ccard:active{background:#ffffff1f}
.ccard .cname{display:block;font-weight:700;font-size:14.5px;line-height:1.5;color:var(--gold)}
.ccard .cnum{display:block;font-size:12.5px;color:#ffffffb3;line-height:1.9}
.ccard .cdone{display:block;font-size:12px;color:#ffffff8c;line-height:1.7}
@media(max-width:359px){.courses{grid-template-columns:1fr}}
.pagenav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.pagenav a{display:inline-block;background:#ffffff10;border:1px solid var(--border);border-radius:10px;
 padding:12px 14px;text-decoration:none;font-size:13.5px;line-height:1.6;min-height:44px}
.progress .pgall{white-space:nowrap;flex-basis:100%}   /* 常に自分の行＝桁が増えても行数が変わらない */
.filterbar{scroll-margin-top:92px}
/* 2000問化で文字が伸び、幅360〜430で「記録をリセット」が枠外に隠れた。折り返しで押せるようにしつつ、桁が増えても高さが変わらないよう固定する（2026-08-17） */
.progress{white-space:normal;overflow:visible;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:2px;min-height:62px;box-sizing:border-box}

#offstage{display:none}

/* ===== 間違えた時は「盤の上」で見せる（2026-08-16 松原さん指示） =====
   ページは動かさない。盤に重ねた赤い帯でNGを伝え、相手の応手（逃げる・取る・合駒）を
   盤の上で実際に動かして見せる。JSは tsume1-app.js の failShow()。 */
.stage .bmsg{position:absolute;left:6px;right:6px;top:0;z-index:60;display:none;pointer-events:none;
 background:#2a0d0de8;border:1px solid #ff5b5b99;border-radius:9px;box-shadow:0 4px 14px #000a;
 color:#ffdcdc;font-size:13.5px;font-weight:700;line-height:1.5;padding:8px 10px;text-align:center}
.stage .bmsg.on{display:block;animation:bmsgin .18s ease-out}
@keyframes bmsgin{from{opacity:0}to{opacity:1}}
/* 動いている駒。行き先のマスの中に入れて left/top だけ動かす＝駒の大きさは盤のまま */
.stage .pc.flypc{z-index:45;transition:left .34s ease-out,top .34s ease-out}
.stage .pc.dropin{animation:dropin .22s ease-out}     /* 合駒はその場に現れる */
@keyframes dropin{from{opacity:0}to{opacity:1}}
.stage .hw.used{opacity:.32}                          /* 打った持ち駒は薄くする */
.cell.escto{box-shadow:inset 0 0 0 3px #ff5b5bcc;animation:escblink .5s ease-in-out 3}
@keyframes escblink{0%,100%{background:#ff5b5b00}50%{background:#ff5b5b55}}
@media (prefers-reduced-motion:reduce){
 .stage .pc.flypc{transition:none}
 .stage .pc.dropin,.stage .bmsg.on,.cell.escto{animation:none}
}

/* ===== 印刷用ページ ===== */
.psheet{page-break-after:always;break-after:page}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pitem{border:1px solid var(--border);border-radius:10px;padding:8px}
.pitem .pline{font-size:12px;margin:0 0 4px;line-height:1.7}
.pitem .stage{width:auto;margin:0}
.pitem{--pbw:min(150px,calc((100vw - 82px) / 2))}
.pitem .gboard{width:var(--pbw);height:var(--pbw);margin:0 auto;box-shadow:none}
.pitem .pc{font-size:calc(var(--pbw) / 9 * 0.62 * var(--ps,1))}
.pitem .pc.two{font-size:calc(var(--pbw) / 9 * 0.37 * var(--ps,1));letter-spacing:0;padding-top:0}
.pitem .cf,.pitem .cr{font-size:calc(var(--pbw) / 30)}
.pitem .dot{width:2px;height:2px}
.panswers{margin-left:1.4em}
.panswers li{font-size:13px;line-height:1.9}
@media print{
  @page{size:A4;margin:10mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;color:#000;line-height:1.5}
  .wrap{max-width:none;padding:0}
  header,#menuPanel,#trainScreen,.breadcrumb,.filterbar,.trainbar,.progress,.pagenav,footer,
  .noprint,.pubdate,.cta,body.print h1{display:none!important}
  .psheet{page-break-after:always}
  .psheet:last-of-type{page-break-after:auto}
  .pgrid{gap:3mm}
  .pitem{border:1px solid #999;padding:1.5mm;border-radius:2mm}
  .pitem .pline{font-size:8.5pt;margin:0 0 1mm;color:#000}
  .pno{color:#000;background:none;border:1px solid #999}
  .pitem .gboard{width:41mm;height:41mm;margin:0 auto;box-shadow:none;border-width:1.5px}
  .pitem .pc{font-size:calc(2.85mm * var(--ps,1));filter:none}
  .pitem .pc.two{font-size:calc(1.7mm * var(--ps,1));letter-spacing:0;padding-top:0}
  .pitem .cf,.pitem .cr{font-size:1.5mm}
  .pitem .dot{width:0.5mm;height:0.5mm}
  .psheet h2{margin:0 0 2mm;font-size:11pt}
  .panswers{column-count:2;column-gap:8mm}
  .panswers li{font-size:9pt;line-height:1.7}
  h1{font-size:16pt;color:#000}
  h2{font-size:13pt;color:#000;border-left:3px solid #000}
  .cell{border-color:#00000030!important}
  a{color:#000;text-decoration:none}
}

/* ===== 文頭のタップ式説明（2026-08-17 松原さん指示・見本＝shogi-rule.html の .tip / .tipbox） =====
   本文に説明段落を置かず、1行のアンダーバーをタップすると図入りの説明が出る（CLAUDE.md 文章8）。
   タップ判定44pxは ::after で作る＝盤は1pxも下がらない（CLAUDE.md タップ44pxの作り方1）。 */
.leadtip{margin:2px 0 6px;font-size:14.5px;line-height:1.9;position:relative}
.tip{border-bottom:2px dotted var(--gold);cursor:pointer;position:relative}
.tip::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:48px;transform:translateY(-50%)}   /* 下にある .progress（z-index:9）が数px重なるので48pxで取り、実測44px以上を確保する */
.tipbox{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:135%;width:min(100vw - 32px,430px);   /* 中の盤を出来るだけ大きくするため本文と同じ幅（2026-08-25） */
 background:#0e1830;border:1px solid var(--gold);border-radius:10px;padding:10px 12px;font-size:12.5px;
 color:#ffe08a;z-index:20;line-height:1.7;font-weight:400;text-align:center;cursor:auto}
.tip.open ~ .tipbox{display:block}
.tipbox b{color:var(--gold)}
.tipbox .pdemo{margin:6px 0 4px}
.tipbox .pdbox{--pdc:calc((min(100vw - 32px,430px) - 30px) / 9);--cell:var(--pdc);margin:0}   /* 吹き出しの幅（padding 12px×2・盤の枠6px を引く）いっぱいの9×9（2026-08-25） */
.tipbox .pdctl,.tipbox .pdmsg{display:none}
.tipbox .handrow{max-width:none}
.tipbox .hw{width:max(24px,calc(var(--pdc) * .86));height:max(24px,calc(var(--pdc) * .86))}

/* コース一覧（１手詰みパターン一覧に統合）の進み具合。空でも1行ぶん取って盤を動かさない */
.patlist .cdone{display:block;font-size:12px;font-weight:400;color:#ffffff8c;line-height:1.7;min-height:1.7em}

/* ===== 説明段落は本文に出さず、見出しごと閉じたアコーディオンに畳む（2026-08-17 松原さん指示・CLAUDE.md 文章8） ===== */
details.foldsec{margin:48px 0 14px}
details.foldsec>summary{cursor:pointer;position:relative;padding:2px 0}
details.foldsec>summary>h2{display:inline;margin:0}
details.foldsec>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:48px;transform:translateY(-50%)}
/* アコーディオンとコース一覧のタップ判定44px（CLAUDE.md タップ44pxの作り方1＝paddingで高さを増やさない） */
details.ans>summary,details.fail>summary,details.faq>summary,details.patlist>summary{position:relative}
details.ans>summary::after,details.fail>summary::after,details.faq>summary::after,details.patlist>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:48px;transform:translateY(-50%)}
.patlist li a{position:relative;display:inline-block}
.patlist li a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* ===== 2026-08-25 松原さん指示（親ページ /tsumeshogi/1te/ の改善案1・4） =====
   改善案4＝難易度ボタン（やさしい／ふつう／むずかしい／詰み判定○×）。各ボタンに「解けた n / N問」 */
.lvbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 0}
.lvb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:58px;
 border:none;border-radius:12px;padding:8px 6px;cursor:pointer;font-family:inherit;color:#fff;text-decoration:none;
 background:linear-gradient(135deg,var(--accent),#ff6a00);box-shadow:0 4px 14px #ff8c1a44;line-height:1.5}
.lvb.lvj{background:#3b5273;box-shadow:none}
.lvb:active{transform:scale(.97)}
.lvn{font-size:16px;font-weight:800;white-space:nowrap}
.lvc{font-size:12px;font-weight:700;color:#fff;opacity:.92;white-space:nowrap;min-height:1.5em;font-variant-numeric:tabular-nums}
@media (min-width:560px){.lvbar{grid-template-columns:repeat(4,1fr)}}
/* 改善案1＝パターン一覧を「盤＋名前・問数・解けた数＋この問題を解く」の表にする（盤は残す＝イメージで伝える） */
.patlist li{display:grid;grid-template-columns:1fr;gap:4px 12px;align-items:center;padding:10px 0}
.patlist .patname{font-weight:700;text-decoration:none;font-size:15px;line-height:1.6}
.patlist .patbd{justify-self:center;min-width:0}
.patlist .patbd .pdemo{margin:0}
.patlist .patbd .pdbox{--pdc:calc((min(100vw,430px) - 22px) / 9);--cell:var(--pdc);margin:0}   /* 今日の1問と同じ最大サイズ（2026-08-25 松原さん指示「盤は9×9で出来るだけ大きく」） */
.patlist .patbd .pdctl{margin-top:4px;gap:6px}
.patlist .patbd .pdctl button{font-size:12px;padding:12px 10px}
.patlist .patbd .pdmsg{margin-top:2px;font-size:12px}
.patlist .patbd .hw{width:max(28px,calc(var(--pdc) * .86));height:max(28px,calc(var(--pdc) * .86))}
.patlist .patbd .hw .pc{font-size:max(17px,calc(var(--pdc) * .58 * var(--ps,1)))}
.patlist .pattx{min-width:0}
.patlist .pattx .pattip{display:block}
.patlist .patgo{display:block;width:100%;max-width:300px;margin:6px auto 0;padding:12px 10px;border-radius:10px;
 background:#8e44ad;color:#fff;font-size:14px;font-weight:800;text-align:center;text-decoration:none;line-height:1.5}
.patlist .patgo:active{transform:scale(.97)}
.patlist .patgo::after{content:none}
@media (min-width:760px){   /* 盤を最大（414px）にしたので、盤が左・文字が右の2列は文字の幅が取れる760px以上だけ（560→760。2026-08-25） */
 .patlist li{grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-items:start}
 .patlist .patname{grid-column:2;margin-top:6px}
 .patlist .patbd{grid-column:1;grid-row:1 / span 2}
 .patlist .pattx{grid-column:2}
 .patlist .patgo{margin:8px 0 0}
}
/* ===== 全ての盤は9×9・持ち駒の行は盤と同じ幅で固定（2026-08-25 松原さん指示・全ページ共通）
   盤の大きさが問題ごとに変わらない／正解しても持ち駒の行の幅・高さが変わらない＝チカチカしない */
.pdbox .handrow,#todaySlot .handrow,.tipbox .handrow{width:calc(var(--pdc) * 9 + 6px);max-width:100%;margin:6px auto}
/* パターン一覧はアコーディオンではなく最初から表示（2026-08-25 松原さん指示） */
section.patlist>h2{margin:0 0 6px;font-size:16px}
/* パターンの説明文は閉じた details に畳む（CLAUDE.md 文章8。summary は既存の「N問」／章見出しだけ＝文字を足さない） */
.patlist details.patdesc{display:inline-block;margin:0 8px 0 0;vertical-align:top}
.patlist details.patdesc>summary{cursor:pointer;color:inherit;font-weight:400;position:relative;list-style:none}
.patlist details.patdesc>summary::-webkit-details-marker{display:none}
.patlist details.patdesc>summary.patn{border-bottom:2px dotted var(--gold);margin-right:0}
.patlist details.patdesc>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.patlist details.patdesc>summary>h4{display:inline;border-bottom:2px dotted var(--gold)}
.patlist details.patdesc[open]{display:block}
.patlist details.patdesc[open]>summary{display:inline-block}
.patlist details.patdesc .pattip,.patlist details.patdesc .patlead{display:block;margin:4px 0 0}
.patlist .patcat>details.patdesc{margin:0 0 4px}
/* 幅320で持ち駒が無くなると行が0.9px縮む（.hw の高さ34px＋8px より min-height が小さい）のを固定する */
#todaySlot .handrow{min-height:calc(max(34px, var(--pdc) * .86) + 8px)}
.patlist .patbd .handrow{min-height:calc(max(28px, var(--pdc) * .86) + 8px)}
.tipbox .handrow{min-height:calc(max(24px, var(--pdc) * .86) + 8px)}
/* 一覧の盤の左右に枠を作らない（CLAUDE.md レイアウト7）。759pxまでは一覧のカードを画面の端まで広げ、盤を今日の1問と同じ幅にする。
   文字は元の位置（画面の端から28px＝.wrap 16px＋カード 12px）のまま（2026-08-25 松原さん指示「盤は9×9で出来るだけ大きく」） */
@media (max-width:759px){
 section.patlist{margin-left:-16px;margin-right:-16px;padding-left:0;padding-right:0;border-left:0;border-right:0;border-radius:0}
 section.patlist>h2{margin-left:28px;margin-right:28px}
 .patlist .patcat>details.patdesc,.patlist .patcat>.cdone{margin-left:28px;margin-right:28px}
 .patlist .patname,.patlist .pattx{margin-left:28px;margin-right:28px}
}
/* 「連続n日」は見出しの行（今日の1問 と つぎの1問 の間）に置く＝見出しと盤の間の空欄を無くす（2026-08-25 松原さん指示）。
   文字が出ても h2 の余白が縮むだけで、ボタンも盤も1pxも動かない */
#todayBox .tdhead .tdstreak{flex:none;margin:0 8px 0 0;min-height:0;white-space:nowrap}