/* 3手詰め専用の図解。盤・駒・再生は既存の共通部品。 */
.guide-selection{display:flex;gap:10px;margin:24px 0 16px}
.guide-selection a{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:44px;padding:8px;border:1px solid #62758d;border-radius:10px;background:#243851;color:#ffd34d;text-align:center;text-decoration:underline;text-underline-offset:.22em;box-sizing:border-box}
.guide-selection-note{font-size:14px;line-height:1.7;color:#c8d2e1;margin:8px 0 14px}
#patBox,#patternBox{scroll-margin-top:100px}
.ccard .cname,.patname[data-guide]{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;cursor:pointer}
.ccard .cname{display:flex;align-items:flex-start;min-height:3.2em;line-height:1.6;overflow-wrap:anywhere}
.ccard>.patgo{box-sizing:border-box;width:calc(100% + 26px);max-width:none;margin:8px 0 0 -13px}
.tguide-dialog{box-sizing:border-box;width:calc(100% - 24px);max-width:460px;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid #62758d;border-radius:14px;background:#14233b;color:#eef3f9;overflow:auto;overscroll-behavior:contain;color-scheme:dark}
.tguide-dialog::backdrop{background:#020914bb}
.tguide-dialog:not([open]){display:none}
.patname[data-guide]{display:inline-block;min-height:44px;padding:6px 0;box-sizing:border-box}
.tguide-dialog-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#14233b;border-bottom:1px solid #3b4c64}
.tguide-dialog-head h2{flex:1;min-width:0;font-size:18px;line-height:1.5;padding:0;margin:0;border:0;color:#ffd34d}
.tguide-close{flex:none;min-height:44px;min-width:64px;border:1px solid #8091a7;border-radius:8px;padding:8px;background:#314660;color:white;font:inherit;cursor:pointer}
.tguide-dialog-body{padding:0 14px 14px}
.tguide-dialog-body>p,.tguide>p{font-size:14px;line-height:1.7;margin:12px 0}
.tguide{min-width:0;color:inherit}
.tguide>summary{cursor:pointer;color:#ffd34d;font-weight:700;text-decoration:underline;text-underline-offset:.22em;min-height:44px;padding:8px 0;line-height:1.6;overflow-wrap:anywhere}
.tguide>summary:focus-visible,.tguide-close:focus-visible,[data-guide]:focus-visible{outline:2px solid #ffd34d;outline-offset:3px;border-radius:3px}
.sectionguide{margin:12px 0 20px}
.subguide{margin:8px 0}
.tguide-dialog .pdemo,.sectionguide .pdemo{width:100%;max-width:430px;margin:10px auto;min-height:0;container-type:inline-size}
.tguide-dialog .pdbox,.sectionguide .pdbox{--pdc:min(38px,calc((100vw - 80px)/9));--cell:var(--pdc);max-width:100%;margin:auto;overflow:hidden}
.tguide-dialog .handrow,.tguide-dialog .pdctl,.sectionguide .handrow,.sectionguide .pdctl{max-width:100%;box-sizing:border-box}
@supports(width:1cqw){.tguide-dialog .pdbox,.sectionguide .pdbox{--pdc:min(38px,calc((100cqw - 6px)/9))}}
body.tguide-modal{overflow:hidden}
@media(max-width:359px){.ccard .cname{min-height:1.6em}}

/* Static pawn-rule comparison. Shared board/piece appearance comes from shogi-ui.css and tsumen.css. */
.pawn-comparison{margin:16px 0 8px;max-width:100%;container-type:inline-size}
.pawn-comparison .pawn-comparison-intro{font-weight:700;margin:0 0 12px;line-height:1.7}
.pawn-comparison-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@container(min-width:620px){.pawn-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pawn-comparison .pawn-case{margin:0;padding:12px;min-width:0;border:1px solid #ffffff2d;border-radius:12px;background:#101b2e;container-type:inline-size}
.pawn-comparison .pawn-case figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;color:#f5f7fb;font-size:16px;line-height:1.5}
.pawn-comparison .pawn-verdict{flex:none;border-radius:6px;padding:3px 8px;font-size:13px;font-weight:800;border:1px solid currentColor}
.pawn-comparison .pawn-case-push{--pawn-accent:#187744}
.pawn-comparison .pawn-case-drop{--pawn-accent:#a42c38}
.pawn-comparison .pawn-case-push .pawn-verdict{color:#b9f3ca;background:#143e2e}
.pawn-comparison .pawn-case-drop .pawn-verdict{color:#ffd0d5;background:#50232c}
.pawn-comparison .pawn-diagram{--pdc:min(34px,calc((100vw - 120px)/9));--cell:var(--pdc);position:relative;width:calc(var(--pdc)*9 + 6px);height:calc(var(--pdc)*11 + 6px);max-width:100%;margin:0 auto;isolation:isolate}
.pawn-comparison .pawn-static-board{grid-template-columns:repeat(9,var(--pdc));grid-template-rows:repeat(9,var(--pdc));margin:0;box-sizing:content-box}
.pawn-comparison .pawn-static-board .cell{box-sizing:border-box;cursor:default}
.pawn-comparison .pc,.pawn-comparison .hw{cursor:default}
.pawn-comparison .pawn-static-board .pawn-destination{background:#63d59466;box-shadow:inset 0 0 0 2px #187744}
.pawn-comparison .pawn-case-drop .pawn-destination{background:#ef667b66;box-shadow:inset 0 0 0 2px #a42c38}
.pawn-comparison .pawn-origin-square{background:#74c99125}
.pawn-comparison .pawn-origin-mark{position:absolute;left:8%;top:30%;font-size:calc(var(--pdc)*.35);line-height:1;font-weight:800;color:#155d34}
.pawn-comparison .pawn-origin-arrows{position:absolute;left:3px;top:3px;width:calc(var(--pdc)*9);height:calc(var(--pdc)*11);z-index:4;pointer-events:none;overflow:visible}
.pawn-comparison .pawn-origin-arrows path{fill:none;stroke:var(--pawn-accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pawn-comparison .pawn-origin-arrows .pawn-arrowhead{fill:var(--pawn-accent);stroke:none}
.pawn-comparison .pawn-origin-caption{position:absolute;left:3px;right:3px;top:calc(var(--pdc)*9.7 + 3px);text-align:center;color:#c5f2d3;font-size:13px;font-weight:700;line-height:1.5}
.pawn-comparison .pawn-hand-source{position:absolute;left:calc(var(--pdc) + 3px);top:calc(var(--pdc)*9.75 + 3px);width:var(--pdc);height:var(--pdc);z-index:5;background:#26364e;border:1px solid #ffffff3b;border-radius:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.pawn-comparison .pawn-hand-source .hw{width:calc(var(--pdc)*.86);height:calc(var(--pdc)*.86);margin:0;box-sizing:border-box}
.pawn-comparison .pawn-hand-source .pc{font-size:calc(var(--pdc)*.58 * var(--ps,1))}
.pawn-comparison .pawn-hand-caption{position:absolute;left:calc(var(--pdc)*2.3 + 3px);top:calc(var(--pdc)*9.93 + 3px);right:3px;color:#ffd0d5;font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap}
.pawn-comparison .pawn-case p{font-size:14px;line-height:1.75;color:#e3e9f2;margin:8px 0 0}
.pawn-comparison .pawn-case-drop p strong{display:block;color:#ffd0d5}
.pawn-comparison .pawn-comparison-note{font-size:12px;line-height:1.75;color:#bdc8d9;margin:12px 0 0}
@supports(width:1cqw){.pawn-comparison .pawn-diagram{--pdc:min(34px,calc((100cqw - 6px)/9))}}
@media(max-width:680px){.pawn-comparison-grid{grid-template-columns:1fr}.pawn-comparison .pawn-case{padding:12px}.pawn-comparison .pawn-diagram{--pdc:min(36px,calc((100vw - 120px)/9))}@supports(width:1cqw){.pawn-comparison .pawn-diagram{--pdc:min(36px,calc((100cqw - 6px)/9))}}}