/* Dedicated teaching area. Board cells and pieces use the shared shogi UI. */
.htp{margin:40px 0 24px}
.htp>p,.htp-lesson>p,.htp-faq>p{font-size:15px;line-height:1.85}
.htp-lesson{margin:28px 0 0;padding:24px 0 0;border-top:1px solid #ffffff2b}
.htp-lesson h3{margin:0 0 12px;color:#ffd34d;font-size:20px;line-height:1.6}
.htp-start{margin:18px 0}
.htp-grid,.htp-faq-figures{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:18px 0}
.htp-branches{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:20px 0}
.htp-figure{min-width:0;width:100%;max-width:402px;margin:0 auto;container-type:inline-size}
.htp-figure>figcaption{margin:0 0 10px;font-size:15px;line-height:1.65;font-weight:800;color:#f5f7fb}
.htp-diagram{--pdc:min(44px,calc((100vw - 38px)/9));--cell:var(--pdc);position:relative;isolation:isolate;width:calc(var(--pdc)*9 + 6px);max-width:100%;margin:auto}
.htp-board{display:grid;grid-template-columns:repeat(9,var(--pdc));grid-template-rows:repeat(9,var(--pdc));box-sizing:content-box;margin:0}
.htp-board .cell{box-sizing:border-box;cursor:default}
.htp-figure .cf,.htp-figure .cr{display:none}
.htp-figure .pc,.htp-figure .hw{cursor:default}
.htp-board .htp-last{background:#ffe75b66;box-shadow:inset 0 0 0 2px #d39f16}
.htp-board .htp-mark{box-shadow:inset 0 0 0 2px #b9484b}
.htp-board .htp-covered{background:#c63c3c22}
.htp-covered-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a62a2a;font-size:calc(var(--pdc)*.5);font-weight:800;line-height:1}
.htp-board .htp-protected{background:#ffdc5966;box-shadow:inset 0 0 0 3px #b73535}
.htp-board .htp-reach{background:#509e6855;box-shadow:inset 0 0 0 2px #397b4d}
.htp-mark-label{position:absolute;left:2%;bottom:2%;font-size:calc(var(--pdc)*.25);font-weight:800;line-height:1;color:#8c2027;background:#ffe3a8dd;padding:1px;white-space:nowrap}
.htp-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.htp-hand{--cell:34px;max-width:402px;min-height:48px;box-sizing:border-box;margin:8px auto;justify-content:flex-start}
.htp-hand[hidden]{display:none}
.htp-hand .hw,.htp-origin .hw{width:34px;height:34px;flex:none}
.htp-hand .hw .pc,.htp-origin .hw .pc{font-size:calc(34px * .58 * var(--ps,1))}
.htp-origin{--cell:34px;display:flex;align-items:center;gap:12px;min-height:46px;margin-top:8px;font-size:13px;color:#ffe1a2}
.htp-figure .htp-legend{margin:6px 0;font-size:12px;line-height:1.65;color:#c5d0df}
.htp-legend:empty{display:none}
.htp-figure .htp-figure-note{margin:8px 0 0;padding:10px 12px;border-left:3px solid #8aa0bd;background:#17263c;font-size:14px;line-height:1.8}
.htp-figure-note[data-outcome=mate]{border-color:#70c894}
.htp-figure-note[data-outcome=refuted],.htp-figure-note[data-outcome=prohibited]{border-color:#ec8990}
.htp-figure-note[data-outcome=not-check]{border-color:#ec8990}
.htp-lesson .htp-point{margin:18px 0 0;color:#ffe1a2;font-size:15px;line-height:1.85}
.htp-faq{overflow:visible}
.htp-faq>summary{line-height:1.7}
.htp-faq>p{margin:14px 0}
.htp-turns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0;padding:0;list-style:none}
.htp-turns li{position:relative;padding:12px 4px;border:1px solid #ffffff30;border-radius:8px;background:#192d46;text-align:center;font-size:13px;line-height:1.6}
.htp-turns li+li:before{content:'→';position:absolute;left:-17px;top:50%;transform:translateY(-50%);color:#ffd34d}
.htp-turns b,.htp-turns span{display:block}
.htp-turns b{color:#ffd34d;font-size:15px}
@supports(width:1cqw){.htp-diagram{--pdc:min(44px,calc((100cqw - 6px)/9))}}
@media(min-width:720px){.htp-grid,.htp-faq-figures{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-faq-figures>.htp-figure:last-child:nth-child(odd){grid-column:1 / -1}}
@media(max-width:359px){.htp-lesson h3{font-size:18px}.htp-turns{gap:14px}.htp-turns li+li:before{left:-14px}.htp-turns li{font-size:12px}}