:root{--bg:#071019;--panel:#101c28;--line:#62431f;--wood1:#e8bd6f;--wood2:#d69a47;--gold:#e6bd4d;--red:#b94034;--ink:#111;--cream:#f4e4bb}
*{box-sizing:border-box}html,body{margin:0;background:linear-gradient(#071019,#02070b);color:#eef2f5;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;min-height:100%}button{font:inherit}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #314050;background:#09131e}.brand{display:flex;align-items:baseline;gap:12px}.brand strong{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:30px;color:#f0c960;letter-spacing:.08em}.brand span{font-size:13px;letter-spacing:.18em;color:#dcd7c9}.brand small{font-size:12px;color:#9fb0c0}.topbar button{background:#16283a;color:#fff;border:1px solid #6e7e8e;border-radius:9px;padding:8px 14px;font-weight:800}
.layout{display:grid;grid-template-columns:minmax(520px,760px) minmax(250px,340px);gap:18px;max-width:1140px;margin:18px auto;padding:0 14px}.boardCol{min-width:0}.statusRow{display:flex;justify-content:space-between;align-items:center;margin:0 4px 8px;color:#f0c960}.boardWrap{position:relative;padding:28px 28px 0 0}.board{aspect-ratio:1/1;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);border:6px solid #5b3210;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 25%),linear-gradient(var(--wood1),var(--wood2));box-shadow:0 8px 25px #0009}.sq{position:relative;border-right:1px solid #5a3a16;border-bottom:1px solid #5a3a16;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.sq:nth-child(9n){border-right:0}.sq:nth-last-child(-n+9){border-bottom:0}.sq.target{background:#ffe47866}.sq.selected{box-shadow:inset 0 0 0 4px #fff36d}.sq.capture::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:#d53b2fbb}
.files{position:absolute;top:0;left:0;right:28px;height:26px;display:grid;grid-template-columns:repeat(9,1fr);text-align:center;font-weight:900;color:#e8c067}.ranks{position:absolute;top:28px;right:0;bottom:0;width:26px;display:grid;grid-template-rows:repeat(9,1fr);align-items:center;justify-items:center;font-weight:900;color:#e8c067}
.piece{width:82%;height:88%;position:relative;clip-path:polygon(22% 0,78% 0,100% 23%,92% 100%,8% 100%,0 23%);background:linear-gradient(#111820 0 35%,var(--cream) 36% 100%);border:2px solid var(--accent,#c99b31);filter:drop-shadow(0 2px 1px #0008);display:flex;align-items:flex-end;justify-content:center;padding-bottom:7%;cursor:pointer;user-select:none;transform-origin:center}.piece.gote{--accent:#b83b32;transform:rotate(180deg)}.piece.sente{--accent:#cda331}.piece::before{content:"";position:absolute;left:16%;right:16%;top:17%;height:15%;border-radius:40%;background:linear-gradient(90deg,#f6c084 0 30%,#111 30% 36%,#f6c084 36% 64%,#111 64% 70%,#f6c084 70%);box-shadow:0 0 0 3px #070a0d}.piece::after{content:"✦";position:absolute;top:2%;font-size:clamp(8px,1.15vw,13px);color:var(--accent)}.kanji{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:900;color:#0b0b0b;font-size:clamp(20px,4.1vw,42px);line-height:.95}.piece.gote .kanji{transform:rotate(180deg)}.piece.promoted{background:linear-gradient(#171313 0 35%,#f2ddb5 36% 100%)}.piece.promoted .kanji{color:#b52c25}.piece.dim{opacity:.45}
.hand{min-height:72px;margin:8px 0;padding:7px 9px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#0e1b27;border:1px solid #31475b;border-radius:8px}.hand::before{content:attr(data-label);font-weight:800;color:#bfcad4;margin-right:4px}.handPiece{position:relative;width:46px;height:52px;clip-path:polygon(22% 0,78% 0,100% 23%,92% 100%,8% 100%,0 23%);background:linear-gradient(#151b21 0 34%,#f2dfb3 35%);border:2px solid #cda331;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;color:#111;font-family:"Yu Mincho",serif;font-weight:900;font-size:22px;cursor:pointer}.handPiece.gote{border-color:#b83b32}.handPiece b{position:absolute;right:2px;top:1px;background:#09131e;color:#fff;border-radius:10px;padding:0 4px;font-family:sans-serif;font-size:11px}.handPiece.active{outline:3px solid #fff36d}.message{padding:8px 10px;border-left:4px solid #d4ae44;background:#0d1822;color:#d9e2ea;min-height:40px}.panel{background:#0e1924;border:1px solid #304255;border-radius:14px;padding:16px;height:max-content}.panel h2{margin-top:0;color:#efc65c}.panel p{line-height:1.7;color:#c7d1da}.legend{display:flex;gap:8px;align-items:center}.dot{width:14px;height:14px;border-radius:50%;display:inline-block}.dot.sente{background:#cda331}.dot.gote{background:#b83b32}.ruleBox{margin-top:16px;padding:12px;border:1px solid #425469;border-radius:10px;background:#132333}.ruleBox p{margin-bottom:0}.overlay{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:20}.overlay[hidden]{display:none}.dialog{background:#152434;border:1px solid #718093;border-radius:14px;padding:22px;min-width:260px;text-align:center}.dialog button{padding:10px 20px;margin:6px;border-radius:8px;border:1px solid #73869a;background:#20364b;color:#fff;font-weight:800}.dialog .primary{background:#d9ad3e;color:#15110a}
@media(max-width:760px){.topbar{height:62px;padding:7px 10px}.brand{gap:7px}.brand strong{font-size:22px}.brand span{display:none}.layout{display:block;margin:8px auto;padding:0 6px}.panel{margin-top:10px}.boardWrap{padding:24px 24px 0 0}.files{right:24px}.ranks{top:24px;width:22px}.piece{width:88%;height:91%;padding-bottom:5%}.piece::before{left:15%;right:15%;top:17%;height:13%}.kanji{font-size:clamp(16px,8.5vw,34px)}.hand{min-height:58px}.handPiece{width:38px;height:44px;font-size:19px}.statusRow{font-size:14px}}

.piece.cloaked{opacity:.28;filter:drop-shadow(0 2px 1px #0008) saturate(.4)}.toolDialog{max-width:420px}.toolDialog p,.targetDialog p{color:#cbd6df;line-height:1.5}.targetDialog{max-width:560px}.targetGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:48vh;overflow:auto;margin:12px 0}.targetGrid button{padding:8px 5px;margin:0;font-size:14px}.dialog button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:560px){.targetGrid{grid-template-columns:repeat(3,1fr)}}