.shogi-board-column{grid-template-rows:auto auto auto;align-content:center;gap:clamp(6px,1vh,10px)}.shogi-board-frame,.shogi-hand{width:var(--shogi-stack-width,100%);max-width:var(--shogi-board-max,900px)}.shogi-board-frame{aspect-ratio:1;--shogi-edge:clamp(6px, .8vw, 10px);--shogi-edge-thin:clamp(2px, .3vw, 4px);--shogi-gutter:clamp(13px, 1.5vw, 19px);--shogi-lip:4px;grid-template-columns:minmax(0, 1fr) var(--shogi-gutter);grid-template-rows:var(--shogi-gutter) minmax(0, 1fr);padding:var(--shogi-edge-thin) var(--shogi-edge-thin) var(--shogi-edge) var(--shogi-edge);background:linear-gradient(to top, #8a5b2a 0 1px, #a8773c 1px calc(var(--shogi-lip) - 1px), #cf9c5c calc(var(--shogi-lip) - 1px) var(--shogi-lip), transparent var(--shogi-lip)), radial-gradient(ellipse 64% 60% at 50% 47%, #fff0cc66, #fff0cc00 74%), radial-gradient(ellipse 80% 78% at 50% 50%, #70421600 56%, #70421633 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='600'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .009' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .26 0 0 0 0 .08 .43 0 0 0 -.17'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 .004' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .76 .3 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(168deg, #efd09c 0%, #e8c68f 50%, #deb97f 100%);border:1px solid #603a1699;border-radius:6px;display:grid;position:relative;box-shadow:inset 0 1px #fff5d8b3,inset 1px 0 #fff5d852,inset 0 0 28px #643c151f}.shogi-files,.shogi-ranks{color:#543214e0;font-family:var(--font-app-sans);pointer-events:none;place-items:center;font-size:clamp(11px,1.05vw,14px);font-weight:700;line-height:1;display:grid}.shogi-files{grid-area:1/1;grid-template-columns:repeat(9,1fr)}.shogi-ranks{grid-area:2/2;grid-template-rows:repeat(9,1fr)}.shogi-board{--shogi-line:#4e2e129e;--shogi-star:2.6px;--shogi-star-color:#46280ee6;background:radial-gradient(circle at calc(33.3333% - .5px) calc(33.3333% - .5px), var(--shogi-star-color) 0 var(--shogi-star), transparent calc(var(--shogi-star) + .8px)), radial-gradient(circle at calc(66.6667% - .5px) calc(33.3333% - .5px), var(--shogi-star-color) 0 var(--shogi-star), transparent calc(var(--shogi-star) + .8px)), radial-gradient(circle at calc(33.3333% - .5px) calc(66.6667% - .5px), var(--shogi-star-color) 0 var(--shogi-star), transparent calc(var(--shogi-star) + .8px)), radial-gradient(circle at calc(66.6667% - .5px) calc(66.6667% - .5px), var(--shogi-star-color) 0 var(--shogi-star), transparent calc(var(--shogi-star) + .8px));border:2px solid #46280ed1;grid-area:2/1;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);display:grid;position:relative}.shogi-square{cursor:pointer;border:0;border-right:1px solid var(--shogi-line);border-bottom:1px solid var(--shogi-line);background:0 0;min-width:0;min-height:0;padding:0;position:relative}.shogi-square:nth-child(9n){border-right:0}.shogi-square:nth-child(n+73){border-bottom:0}@media (hover:hover){.shogi-square:hover{background:#fff7d838}}.shogi-square.last-to{background:#96581c57}.shogi-square.last-from{background:#96581c2b}.shogi-square.in-check{background:radial-gradient(circle closest-side,#d6281c9e 0,#d6281c4d 62%,#d6281c00 100%)}.shogi-square.selected:after,.shogi-hand-piece.selected:before{content:"";pointer-events:none;background:radial-gradient(closest-side,#fffff4 0,#fffbc4 40%,#fff18cf0 63%,#ffe87600 100%);border-radius:50%;position:absolute}.shogi-square.selected:after{z-index:1;inset:-27%}.shogi-hand-piece.selected:before{inset:-9px -7px}.shogi-square.selected .shogi-piece,.shogi-hand-piece.selected>.shogi-piece{filter:drop-shadow(0 5px 3px #2e18068c)}.shogi-square.selected .shogi-piece{z-index:5;transform:translateY(-8%)scale(1.14)}.shogi-hand-piece.selected>.shogi-piece{transform:translateY(-5%)scale(1.1)}.shogi-hand .shogi-hand-piece.selected>.shogi-piece{transform:translateY(-7%)scale(1.16)}.shogi-square.capture-target:before{content:"";z-index:3;pointer-events:none;border:clamp(2px,.32vw,3px) solid #c53826c7;border-radius:50%;position:absolute;inset:3%}.shogi-target-dot{z-index:3;aspect-ratio:1;pointer-events:none;background:#3a68428c;border-radius:50%;width:24%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #fffae666}.shogi-piece{z-index:2;--koma-pad:0%;inset:calc(4% + var(--koma-pad)) calc(8% + var(--koma-pad)) calc(4% + var(--koma-pad));color:#1c1712;font-family:var(--font-qi-koma-jp), "Yu Mincho", "Hiragino Mincho ProN", serif;pointer-events:none;will-change:var(--piece-layer,auto);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%23fdeec8'/%3E%3Cstop offset='.5' stop-color='%23f4d9a2'/%3E%3Cstop offset='1' stop-color='%23e4be7c'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c48f4d'/%3E%3Cstop offset='1' stop-color='%238d5d2a'/%3E%3C/linearGradient%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .018' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Cfilter id='b' x='-15%25' y='-15%25' width='130%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.7'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Cpath d='M50 2 L85 18 L96 100 L4 100 L15 18 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M50 2 L85 18 L96 100 L4 100 L15 18 Z' transform='translate(0 5.5)' fill='%232e1806' opacity='.3' filter='url(%23b)'/%3E%3Cpath d='M50 2 L85 18 L96 100 L4 100 L15 18 Z' transform='translate(0 3.2)' fill='url(%23s)'/%3E%3Cpath d='M50 2 L85 18 L96 100 L4 100 L15 18 Z' fill='url(%23f)'/%3E%3Crect width='100' height='108' filter='url(%23g)' clip-path='url(%23c)' opacity='.6'/%3E%3Cpath d='M50 2 L85 18 L96 100 L4 100 L15 18 Z' fill='none' stroke='%238b5a26' stroke-opacity='.62' stroke-width='1'/%3E%3Cpath d='M7 96 L16.8 19.6 L50 4.6 L83.2 19.6' fill='none' stroke='%23fffaea' stroke-opacity='.9' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M83.6 21 L93.2 97.4 L8.6 97.4' fill='none' stroke='%237a4a1a' stroke-opacity='.3' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 50%/100% 100% no-repeat;place-items:center;font-weight:400;line-height:1;transition:transform .12s;display:grid;position:absolute;container-type:inline-size}.shogi-piece.is-far{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%23fdeec8'/%3E%3Cstop offset='.5' stop-color='%23f4d9a2'/%3E%3Cstop offset='1' stop-color='%23e4be7c'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c48f4d'/%3E%3Cstop offset='1' stop-color='%238d5d2a'/%3E%3C/linearGradient%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .018' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Cfilter id='b' x='-15%25' y='-15%25' width='130%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.7'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Cpath d='M4 2 L96 2 L85 84 L50 100 L15 84 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M4 2 L96 2 L85 84 L50 100 L15 84 Z' transform='translate(0 5.5)' fill='%232e1806' opacity='.3' filter='url(%23b)'/%3E%3Cpath d='M4 2 L96 2 L85 84 L50 100 L15 84 Z' transform='translate(0 3.2)' fill='url(%23s)'/%3E%3Cpath d='M4 2 L96 2 L85 84 L50 100 L15 84 Z' fill='url(%23f)'/%3E%3Crect width='100' height='108' filter='url(%23g)' clip-path='url(%23c)' opacity='.6'/%3E%3Cpath d='M4 2 L96 2 L85 84 L50 100 L15 84 Z' fill='none' stroke='%238b5a26' stroke-opacity='.62' stroke-width='1'/%3E%3Cpath d='M16.6 82.4 L6.8 4.6 L93.2 4.6' fill='none' stroke='%23fffaea' stroke-opacity='.9' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M93 6 L83.3 82.9 L50 97.4 L18.4 83.6' fill='none' stroke='%237a4a1a' stroke-opacity='.3' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")}.shogi-piece>span{text-shadow:0 1px #fff6dccc;font-size:62cqw;transform:translateY(5%)}.shogi-piece.is-far>span{text-shadow:0 -1px #fff6dccc;transform:rotate(180deg)translateY(5%)}.shogi-piece.promoted{color:#b3261a}.shogi-piece.koma-rook,.shogi-piece.koma-bishop,.shogi-piece.koma-dragon,.shogi-piece.koma-horse{--koma-pad:1.2%}.shogi-piece.koma-gold,.shogi-piece.koma-silver,.shogi-piece.koma-promotedsilver{--koma-pad:2.6%}.shogi-piece.koma-knight,.shogi-piece.koma-promotedknight{--koma-pad:4%}.shogi-piece.koma-lance,.shogi-piece.koma-promotedlance{--koma-pad:5%}.shogi-piece.koma-pawn,.shogi-piece.koma-tokin,.shogi-piece.koma-promotedpawn{--koma-pad:6.2%}.shogi-hand,.shogi-seat-line .bk-seat-hand{--shogi-box-lip:3px;background:linear-gradient(to top, #8a5b2a 0 1px, #a8773c 1px calc(var(--shogi-box-lip) - 1px), #cf9c5c calc(var(--shogi-box-lip) - 1px) var(--shogi-box-lip), transparent var(--shogi-box-lip)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='600'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .009' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .26 0 0 0 0 .08 .43 0 0 0 -.17'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 .004' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .76 .3 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(168deg, #ebcb96 0%, #e3c088 50%, #d9b37a 100%);border:1px solid #603a1699;border-radius:6px;box-shadow:inset 0 1px #fff6dcbf,inset 0 0 0 3px #edd09e,inset 0 0 0 4px #603a1657,inset 0 8px 7px -5px #46280c57,inset 6px 0 6px -5px #46280c2e}.shogi-hand{grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:54px;padding:8px 12px 9px 14px;display:grid;overflow:clip}.shogi-hand-owner{color:#54391a;white-space:nowrap;font-size:13px;font-weight:650}.shogi-hand-pieces{align-items:center;gap:4px;min-width:0;display:flex}.shogi-hand-pieces>:first-child{margin-left:auto}.shogi-hand-piece{cursor:pointer;color:#3a2610;touch-action:manipulation;background:0 0;border:0;border-radius:7px;flex:0 auto;justify-content:center;align-items:center;min-width:0;padding:0 8px 0 2px;display:inline-flex;position:relative}.shogi-hand-piece:after{content:"";position:absolute;inset:-6px -1px}.shogi-hand-piece>.shogi-piece{aspect-ratio:34/37;flex:0 auto;width:clamp(24px,8.6vw,34px);min-width:17px;height:auto;position:relative;inset:auto}.shogi-hand-piece strong{z-index:3;font-family:var(--font-app-sans);font-variant-numeric:tabular-nums;text-shadow:0 0 2px #fff1cf,0 0 2px #fff1cf,0 0 3px #fff1cf,0 1px #fff1cf;pointer-events:none;font-size:13px;font-weight:800;line-height:1;position:absolute;bottom:-1px;right:0}.shogi-hand-piece.is-far{padding:0 2px 0 8px}.shogi-hand-piece.is-far strong{inset:-1px auto auto 0}.shogi-hand-piece:disabled,.shogi-hand-piece[aria-disabled=true]{cursor:default}.shogi-empty-hand{color:#54391a9e;font-size:13px}.shogi-promotion-prompt{background:#fff7e6e0;border:1px solid #b8493740;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;margin-top:12px;padding:8px 10px;display:grid}.shogi-promotion-prompt strong{font-family:Songti SC,serif;font-size:14px;line-height:1.3;display:block}.shogi-promotion-prompt>div{gap:5px;display:flex}.shogi-promotion-prompt button{border-radius:6px;min-height:40px;padding:0 11px;font-size:14px;font-weight:650}@media (width<=359px){.shogi-promotion-prompt{grid-template-columns:minmax(0,1fr);gap:4px;padding:6px 8px}.shogi-promotion-prompt button{flex:1;min-height:36px}}@media (width<=600px){.shogi-board-frame{--shogi-edge:6px;--shogi-edge-thin:2px;--shogi-gutter:13px;--shogi-lip:3px}.shogi-board{--shogi-star:2.2px}}@media (width>=851px) and (orientation:landscape),(width>=812px) and (height<=500px){.shogi-board-column{grid-template-columns:auto auto auto;justify-content:center;column-gap:0;container:shogi-area/size}.shogi-board-column>.shogi-board-frame,.shogi-board-column>.shogi-hand{width:min(100cqw, max(var(--shogi-board-min,16rem), calc(100cqh - var(--shogi-stack-reserve,152px))));grid-column:2}}@container shogi-area (aspect-ratio>=8/7) and (width>=560px){.shogi-board-column>.shogi-board-frame,.shogi-board-column>.shogi-hand{--shogi-area-fit:calc(100cqh - var(--shogi-area-pad,30px));--shogi-tray:clamp(88px, calc((100cqh - var(--shogi-tray-pad,var(--shogi-area-pad,30px))) / 7), 124px);--shogi-tray-gap:14px;--shogi-side-board:max(var(--shogi-board-min,16rem), min(var(--shogi-area-fit), calc(100cqw - 2 * (var(--shogi-tray) + var(--shogi-tray-gap)))));grid-row:1/-1}.shogi-board-column>.shogi-board-frame{width:var(--shogi-side-board)}.shogi-board-column>.shogi-hand{width:var(--shogi-tray);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:8px;min-height:44%;padding:12px 8px 14px}.shogi-board-column>.shogi-hand:first-child{margin-right:var(--shogi-tray-gap);grid-column:1;align-self:start}.shogi-board-column>.shogi-board-frame~.shogi-hand{margin-left:var(--shogi-tray-gap);grid-column:3;align-self:end}.shogi-board-column>.shogi-hand .shogi-hand-owner{text-align:center;white-space:normal;line-height:1.25}.shogi-board-column>.shogi-hand .shogi-hand-pieces{flex-direction:column;align-self:start;gap:6px}.shogi-board-column>.shogi-hand .shogi-hand-pieces>:first-child{margin-left:0}.shogi-board-column>.shogi-hand .shogi-hand-piece{padding:0 10px 0 4px}.shogi-board-column>.shogi-hand .shogi-hand-piece.is-far{padding:0 4px 0 10px}.shogi-board-column>.shogi-hand .shogi-hand-piece>.shogi-piece{width:clamp(30px, min(calc(var(--shogi-side-board) / 12.5), calc(var(--shogi-tray) * .52)), 64px)}.shogi-board-column>.shogi-hand .shogi-hand-piece strong{font-size:14px}.shogi-board-column>.shogi-hand .shogi-hand-piece.selected>.shogi-piece{transform:translateY(-7%)scale(1.14)}}