:root { --bg:#f7f3ea; --panel:#fff; --text:#2b2520; --muted:#7a6d60; --accent:#8a5a2b; --board:#e8c37e; --line:#6b4a1f; --ok:#2e7d32; --ng:#c62828; --hl:#ffe08a; --target:rgba(46,125,50,.28); --border:#d9c9b0; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Hiragino Sans","Noto Sans JP",sans-serif; background:var(--bg); color:var(--text); }
button, select, textarea { font:inherit; color:inherit; }
button, select { padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.active, button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.icon { min-width:36px; padding:6px 8px; }

.site-header { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px 4px; position:relative; max-width:960px; margin:0 auto; }
.site-header h1 { margin:0; color:var(--accent); font-size:1.4rem; }
.header-tools { position:absolute; right:16px; display:flex; gap:6px; }
.round { width:34px; height:34px; border-radius:50%; font-weight:bold; padding:0; }
html.no-arrows .arrow { display:none; }

main { max-width:960px; margin:0 auto; padding:0 16px; }
.bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.bar select { flex:1; min-width:160px; }
.modes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 12px; }
.modes-label { margin-left:10px; color:var(--muted); font-size:.85rem; }

.layout { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.board-area { flex:0 1 440px; display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; }
.side { flex:1 1 260px; display:flex; flex-direction:column; gap:8px; min-width:0; }

.board-frame { display:grid; grid-template-columns:1fr 18px; grid-template-rows:16px auto; }
.files { grid-column:1; display:grid; grid-template-columns:repeat(9,1fr); font-size:.7rem; color:var(--muted); text-align:center; }
.ranks { grid-column:2; grid-row:2; display:grid; grid-template-rows:repeat(9,1fr); font-size:.7rem; color:var(--muted); align-items:center; text-align:center; }
.board { grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); aspect-ratio:9/9.8; background:var(--board); border:2px solid var(--line); }
.cell { border:1px solid rgba(107,74,31,.55); display:flex; align-items:center; justify-content:center; font-size:clamp(15px,5.2vw,27px); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.cell span { display:inline-block; line-height:1; }
.cell.rev span { transform:rotate(180deg); }
.cell.promoted { color:#b71c1c; }
.cell.last { background:#f1d49a; }
.cell.selected { background:var(--hl); }
.cell.hint, .hand-piece.hint { outline:3px solid #1976d2; outline-offset:-3px; animation:pulse 1s infinite; }
@keyframes pulse { 50% { outline-color:transparent; } }
.cell.target { box-shadow:inset 0 0 0 100px var(--target); }

.hand { display:flex; align-items:center; gap:4px; min-height:38px; flex-wrap:wrap; }
.hand-label { font-size:.8rem; color:var(--muted); margin-right:4px; }
.hand-none { font-size:.8rem; color:#b8aa98; }
.hand-piece { padding:3px 8px; font-size:1.1rem; background:#f6e3bb; border-color:#d8b77a; }
.hand-piece small { font-size:.7rem; margin-left:1px; }
.hand-piece.selected { background:var(--hl); border-color:var(--accent); }

.message { margin:0; min-height:1.5em; font-weight:bold; }
.message.ok { color:var(--ok); } .message.ng { color:var(--ng); }
.progress { margin:0; color:var(--muted); font-size:.85rem; min-height:1.2em; }
.buttons { display:flex; flex-wrap:wrap; gap:6px; }
.buttons[hidden], [hidden] { display:none !important; }
.comment { width:100%; min-height:110px; resize:vertical; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; line-height:1.5; }
.comment[readonly] { background:#fbf8f2; }
.comment.empty { display:none; }

.tree-area { margin:16px 0; }
.tree { overflow:auto; max-height:320px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:4px; }
.tree svg { display:block; }
.tree .edge { stroke:#bba98f; stroke-width:1.5; }
.tree .node { cursor:pointer; }
.tree .node rect { fill:#fff; stroke:#cbb89c; }
.tree .node text { font-size:11px; text-anchor:middle; fill:var(--text); }
.tree .node.onpath rect { fill:#f6ead2; }
.tree .node.current rect { fill:var(--accent); stroke:var(--accent); }
.tree .node.current text { fill:#fff; font-weight:bold; }
.tree .node.done rect { fill:#dff0d8; stroke:#8bc48a; }
.tree .node.hidden text { fill:#b8aa98; }
.tree .cmark { fill:#e09a2b; }
body.drilling .tree .node { cursor:default; }

.ad-slot { max-width:928px; margin:12px auto; min-height:90px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); color:#a8998a; font-size:.85rem; border-radius:8px; }
@media (max-width:960px) { .ad-slot { margin:12px 16px; } }
.site-footer { text-align:center; padding:20px 16px; font-size:.85rem; color:var(--muted); }
.site-footer a { color:var(--accent); }

.dialog { border:none; border-radius:12px; padding:20px 22px; max-width:min(560px, calc(100vw - 32px)); box-shadow:0 8px 30px rgba(0,0,0,.25); color:var(--text); }
.dialog::backdrop { background:rgba(0,0,0,.35); }
.dialog h2 { margin:0 0 8px; font-size:1.2rem; color:var(--accent); }
.dialog h3 { margin:14px 0 4px; font-size:1rem; }
.dialog ul { margin:0; padding-left:1.2em; line-height:1.6; }
.dialog .note { color:var(--muted); font-size:.85rem; }
.dialog form { margin-top:14px; text-align:right; }
.dialog.small p { margin:0; font-weight:bold; }
.dialog .row { display:flex; gap:8px; justify-content:flex-end; }

/* プライバシーポリシー等のページ */
.panel { background:var(--panel); border-radius:12px; padding:16px; margin:16px 0; box-shadow:0 1px 4px rgba(0,0,0,.08); }
@media (max-width:600px) { .bar select { flex-basis:100%; } .bar button { flex:1; } }

/* ---- 盤のデザイン ---- */
html[data-board="light"] { --board:#f6e9cf; --line:#9a7b4f; }
html[data-board="green"] { --board:#cfe3c4; --line:#4f7a45; }
html[data-board="dark"] { --board:#3b3631; --line:#1d1a17; }
html[data-board="dark"] .cell { color:#f3ece1; border-color:rgba(0,0,0,.6); }
html[data-board="dark"] .cell.last { background:#5a4c3c; }
html[data-board="dark"] .cell.selected { background:#7a6530; }
html[data-board="dark"] .cell.promoted { color:#ff8a80; }
html[data-board="kaya"] .board { background:linear-gradient(135deg,#ebc882,#e2b96e 60%,#e9c47c); }

/* ---- 駒のデザイン ---- */
html[data-pieces="mincho"] .cell, html[data-pieces="mincho"] .hand-piece, .pieces-mincho { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:bold; }
html[data-pieces="koma"] .cell span, html[data-pieces="kokuryu"] .cell span, .pieces-koma span, .pieces-kokuryu span {
  width:84%; height:90%; display:inline-flex; align-items:center; justify-content:center; padding-top:12%;
  clip-path:polygon(50% 0,86% 16%,100% 100%,0 100%,14% 16%); font-size:.9em;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:bold; }
html[data-pieces="koma"] .cell span, .pieces-koma span { background:linear-gradient(#fbe7b5,#f0cf8a); color:#2b2520; }
html[data-pieces="kokuryu"] .cell span, .pieces-kokuryu span { background:linear-gradient(#3a3a3a,#141414); color:#f5efe4; }
html[data-pieces="koma"] .cell.promoted span, .pieces-koma.promoted span { color:#b71c1c; }
html[data-pieces="kokuryu"] .cell.promoted span { color:#ff8a80; }
html[data-pieces="koma"] .hand-piece, html[data-pieces="kokuryu"] .hand-piece { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:bold; }
html[data-pieces="kokuryu"] .hand-piece { background:#222; color:#f5efe4; border-color:#000; }

/* ---- 設定ダイアログ ---- */
.choices { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.choices label { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:.85rem; }
.choices label:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.choices input { position:absolute; opacity:0; pointer-events:none; }
.swatch { width:44px; height:44px; border-radius:4px; border:2px solid; background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px); background-size:11px 11px; }
.board-kaya { background-color:#e8c37e; color:#6b4a1f; border-color:#6b4a1f; }
.board-light { background-color:#f6e9cf; color:#9a7b4f; border-color:#9a7b4f; }
.board-green { background-color:#cfe3c4; color:#4f7a45; border-color:#4f7a45; }
.board-dark { background-color:#3b3631; color:#1d1a17; border-color:#1d1a17; }
.sample { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:26px; background:#e8c37e; border-radius:4px; }
.sample > span { line-height:1; }
.check { display:flex; gap:8px; align-items:center; cursor:pointer; }

.intro { max-width:928px; margin:8px auto 0; padding:0 16px; color:var(--muted); font-size:.85rem; line-height:1.7; }
.intro h2 { font-size:.95rem; margin:0 0 4px; color:var(--text); }
.intro p { margin:0; }

/* ---- 定跡解説ページ ---- */
.site-name { margin:0; font-size:1.4rem; font-weight:bold; }
.site-name a { color:var(--accent); text-decoration:none; }
.article { max-width:760px; line-height:1.8; }
.article h1 { font-size:1.5rem; margin:12px 0 8px; }
.article h2 { font-size:1.15rem; margin:28px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--border); }
.article h3 { font-size:1rem; margin:16px 0 4px; }
.article a { color:var(--accent); }
.crumbs { font-size:.8rem; color:var(--muted); margin-top:8px; }
.lead { font-size:1rem; }
.cta { margin:16px 0; display:flex; gap:8px; flex-wrap:wrap; }
.button { display:inline-block; padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:#fff; text-decoration:none; }
.article a.button.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.moves { list-style:none; padding:0; margin:0; }
.moves li { padding:4px 0; border-bottom:1px dashed #eadfcd; }
.mv { font-weight:bold; display:inline-block; min-width:9em; }
.mv-note { color:#5a4a3a; font-size:.92rem; }
.static-board { margin:8px 0; max-width:360px; }
.static-board .board { aspect-ratio:9/9.8; }
.static-board .cell { cursor:default; font-size:clamp(13px,4.2vw,20px); }
.static-hand { margin:4px 0; font-size:.85rem; color:var(--muted); }
.article-list { list-style:none; padding:0; }
.article-list li { margin:10px 0; }
.article-list a { display:block; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); }
.article-list a:hover { border-color:var(--accent); }
.article-list b { display:block; color:var(--accent); }
.article-list span { font-size:.85rem; color:var(--muted); }
.related ul { padding-left:1.2em; }
.intro a { color:var(--accent); }
.comment-cover { width:100%; min-height:110px; border:2px dashed var(--border); border-radius:8px; background:repeating-linear-gradient(45deg,#fbf3e3,#fbf3e3 8px,#f6ead2 8px,#f6ead2 16px); color:var(--accent); font-weight:bold; }
.check + .check { margin-top:6px; }