:root{--bg:#071019;--panel:#0d1a26;--line:#34485d;--text:#edf4fa;--muted:#9fb0bf;--wood:#d8ae68;--wood2:#c9944f;--gold:#e4b84d;--red:#d94d45;--yellow:#e7c84c;--select:#69b7e8;--target:#8ac57a}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#050b11,#0a1520);color:var(--text);font-family:system-ui,-apple-system,"Yu Gothic UI","Meiryo",sans-serif}
header{padding:12px 16px;border-bottom:1px solid #263849;background:#08121c;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.brand{font-weight:800;letter-spacing:.04em}.ver{font-size:.8rem;color:var(--muted)}
main{max-width:1100px;margin:0 auto;padding:14px}.layout{display:grid;grid-template-columns:minmax(300px,680px) 1fr;gap:18px}.card{background:rgba(13,26,38,.96);border:1px solid #2c4154;border-radius:14px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.board-shell{display:grid;grid-template-columns:minmax(0,1fr) 34px;grid-template-rows:28px minmax(0,1fr);width:100%;max-width:680px;margin:0 auto}.files{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(9,1fr);align-items:end;text-align:center;color:#e7bf56;font-weight:800}.ranks{grid-column:2;grid-row:2;display:grid;grid-template-rows:repeat(9,1fr);align-items:center;justify-items:center;color:#e7bf56;font-weight:800}.board{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));aspect-ratio:1/1;width:100%;background:var(--wood);border:3px solid #5d3f1f;overflow:hidden}.sq{position:relative;border-right:1px solid #6f502d;border-bottom:1px solid #6f502d;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;padding:0;background:transparent}.sq:nth-child(9n){border-right:0}.sq:nth-last-child(-n+9){border-bottom:0}.sq.selectable{cursor:pointer}.sq.selected{box-shadow:inset 0 0 0 4px var(--select)}.sq.target{box-shadow:inset 0 0 0 4px var(--target);cursor:pointer}.sq.target::after{content:"";width:18%;aspect-ratio:1;border-radius:50%;background:rgba(35,110,54,.6);position:absolute}.sq.target.capture::after{width:72%;background:transparent;border:4px solid rgba(140,49,43,.75)}
.piece{position:relative;width:78%;height:78%;clip-path:polygon(50% 0,94% 21%,88% 100%,12% 100%,6% 21%);background:linear-gradient(#21180f 0 34%,#ead7ae 35% 100%);border:2px solid rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4%;font-weight:900;color:#12100d;font-size:clamp(16px,3vw,30px);text-shadow:0 1px #fff4;transform-origin:center;z-index:2}.piece.gote{transform:rotate(180deg)}.piece.opponent{transform:rotate(180deg)}.piece.promoted{color:#a81e1e}.piece.hidden-human{opacity:.13;filter:grayscale(1)}
.piece.tool::after{content:"忍";position:absolute;right:-8%;top:-10%;width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#1479b8;color:#fff;font-size:clamp(8px,1.3vw,13px);border:1px solid #d6ecff}.piece.shield::before{content:"盾";position:absolute;left:-8%;top:-10%;width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#6b3ca6;color:#fff;font-size:clamp(8px,1.3vw,13px);border:1px solid #eadfff}.sq.d1sq{background:rgba(231,200,76,.22);box-shadow:inset 0 0 0 4px rgba(231,200,76,.95)}.sq.d2sq{background:rgba(217,77,69,.24);box-shadow:inset 0 0 0 4px rgba(217,77,69,.98)}
.piece.d1{background:linear-gradient(#21180f 0 34%,#f2d553 35% 100%);filter:drop-shadow(0 0 7px rgba(231,200,76,.95))}.piece.d2{background:linear-gradient(#21180f 0 34%,#e45a53 35% 100%);filter:drop-shadow(0 0 8px rgba(217,77,69,.98))}
.legend{display:grid;gap:9px;font-size:.92rem}.row{display:flex;align-items:center;gap:9px}.dot{width:18px;height:18px;border-radius:4px;border:2px solid #fff2}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.tag{display:inline-block;padding:3px 8px;border-radius:999px;background:#17283a;border:1px solid #35506b;color:#d8e8f5;font-size:.82rem}.note{color:var(--muted);line-height:1.65}.secret{font-family:ui-monospace,Consolas,monospace;font-size:.9rem;color:#d8e8f5}.hidden-msg{position:absolute;inset:0;display:grid;place-items:center;color:#65809a;font-weight:800;font-size:.7rem}.statusbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 12px;padding:8px 10px;border:1px solid #31475a;border-radius:9px;background:#091622}.hands{display:grid;gap:8px;margin-top:10px}.hand{border:1px solid #31475a;border-radius:9px;padding:8px}.hand-title{font-weight:800;margin-bottom:6px}.hand-pieces{display:flex;gap:7px;flex-wrap:wrap;min-height:38px}.hand-btn{border:1px solid #56728c;background:#122638;color:#fff;border-radius:8px;padding:6px 9px;font-weight:800;cursor:pointer}.hand-btn.active{outline:3px solid var(--select)}.message{margin-top:10px;padding:9px 10px;border-left:4px solid var(--gold);background:#0a1824;color:#d8e7f3}.button{border:1px solid #56728c;background:#173049;color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}
@media(max-width:760px){main{padding:8px}.layout{grid-template-columns:1fr;gap:10px}.card{padding:9px}.piece{font-size:clamp(12px,5vw,24px)}header{padding:9px 10px}.board-shell{grid-template-columns:minmax(0,1fr) 26px;grid-template-rows:22px minmax(0,1fr)}.files,.ranks{font-size:.8rem}}
.assist-setting{margin:14px 0;padding:11px;border:1px solid #38536b;border-radius:10px;background:#0a1722}.toggle-row{display:flex;align-items:center;gap:9px;font-weight:800;cursor:pointer}.toggle-row input{width:20px;height:20px;accent-color:#e4b84d}.assist-note{margin-top:7px;color:var(--muted);font-size:.82rem;line-height:1.55}

/* Ver.0.5.0: yellow/red marker is used on both own threatened pieces and visible enemy attackable pieces. */

/* God-eye can expose the tool type; Player never receives this attribute. */
.piece.tool[data-tool]::after{content:attr(data-tool)}

/* Ver.0.6.0: equipped ninja tools activate only together with a normal move. */

/* Ver.0.8.1: tool badge is attached to the square, not the clipped piece polygon. */
.sq.tool-equipped::before{content:'忍';position:absolute;right:3px;top:3px;z-index:8;width:24%;max-width:22px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#1479b8;color:#fff;font-weight:900;font-size:clamp(8px,1.15vw,12px);line-height:1;border:1px solid #d6ecff;box-shadow:0 1px 3px #0008;pointer-events:none}
.sq.god-tool[data-tool]::before{content:attr(data-tool);background:#8b2fa3}
.hand-btn{position:relative}

/* Ver.0.8.1: 忍具付き持ち駒は通常の同種駒と集約せず独立表示 */
.hand-btn.tool-hand{display:inline-flex;align-items:center;gap:6px;padding-left:6px}
.hand-tool-mark{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:#178cc8;border:1px solid #8fd8ff;color:#fff;font-size:.72rem;font-weight:900;line-height:1}

/* Ver.0.8.1: 変身待ちでは、選択可能な持ち駒を明示。 */
.hand-btn.transform-candidate{outline:3px solid currentColor;outline-offset:2px}

.check-notice{display:none;margin:8px 0 10px;padding:8px 12px;border:2px solid #d84c43;border-radius:9px;background:#3a1111;color:#ffd6d2;font-weight:900;text-align:center;letter-spacing:.08em}.check-notice.show{display:block}.caltrop-lock{position:absolute;left:3px;bottom:3px;z-index:6;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#7b2d25;color:#fff;font-size:12px;font-weight:900;border:2px solid #ffe7c0}.piece-speech{position:absolute;z-index:20;left:50%;bottom:82%;transform:translateX(-50%);min-width:180px;max-width:240px;padding:8px 10px;border-radius:12px;background:#fff;color:#111;border:2px solid #222;font-size:14px;font-weight:800;line-height:1.35;box-shadow:0 4px 12px #0006;pointer-events:none}.piece-speech::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border:10px solid transparent;border-top-color:#fff;border-bottom:0}.sq:nth-child(-n+18) .piece-speech{bottom:auto;top:82%}.sq:nth-child(-n+18) .piece-speech::after{bottom:auto;top:-10px;border-top:0;border-bottom:10px solid #fff}@media(max-width:760px){.piece-speech{min-width:135px;max-width:170px;font-size:11px;padding:6px 7px}.caltrop-lock{width:18px;height:18px;font-size:10px}}

/* Plain temporary pieces: keep types readable. */
.piece,.piece.d1,.piece.d2{background:#ead7ae;align-items:center;padding-bottom:0;text-shadow:none}

/* Compact coordinates and restored legacy official artwork. */
.board-shell{grid-template-columns:minmax(0,1fr) 16px;grid-template-rows:16px minmax(0,1fr)}
.files,.ranks{font-size:10px;font-weight:500;line-height:1}
.piece.official-piece{background:transparent;border:0;padding:0;width:82%;height:92%;clip-path:polygon(50% 0,90% 18%,100% 100%,0 100%,10% 18%)}
.official-piece img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.piece.shadow-piece{background:#020205;border:1px solid #72727e;filter:drop-shadow(0 0 2px #aaa);width:72%;height:82%}
@media(max-width:760px){.board-shell{grid-template-columns:minmax(0,1fr) 13px;grid-template-rows:13px minmax(0,1fr)}.files,.ranks{font-size:9px}}

/* Smaller rank labels only; file labels keep their current size. */
.ranks{font-size:8px}
@media(max-width:760px){.ranks{font-size:7px}}