:root{--page-wood-light:#1f1e1b;--page-wood-dark:#272624}body{background:repeating-linear-gradient(90deg, #ffffff05 0, #18151505 2px, #1a181708 3px, #08080808 7px), linear-gradient(180deg, var(--page-wood-light), var(--page-wood-dark));color:#fff;justify-content:center;min-height:100vh;margin:0;padding-top:0;font-family:Arial,sans-serif;display:flex}#root,main{width:100%;min-height:100vh}main{place-items:center}.chess-board{border:4px solid #444;grid-template-rows:repeat(8,100px);grid-template-columns:repeat(8,100px);display:grid}.square{justify-content:center;align-items:center;font-size:12px;display:flex}.light{color:#000;background:#f0d9b5}.dark{color:#fff;background:#b58863}.piece{-webkit-user-select:none;user-select:none;cursor:grab;font-size:52px;line-height:1}.piece.white{color:#fff;text-shadow:0 0 2px #000}.piece.black{color:#000;text-shadow:0 0 2px #fff}.piece:active{cursor:grabbing}.selected{outline-offset:-4px;outline:4px solid #4caf50}.room-dialog{box-sizing:border-box;background:#2b2b2b;border-radius:12px;gap:14px;width:320px;max-width:calc(100vw - 32px);padding:24px;display:grid;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.room-dialog input,.room-dialog button{padding:12px;font-size:16px}.separator{text-align:center;opacity:.7}.game-menu{z-index:20;position:fixed;top:18px;left:18px}.menu-toggle{color:#fff;cursor:pointer;background:#000;border:1px solid #3f3f46;border-radius:6px;place-content:center;gap:5px;width:46px;height:46px;padding:0;display:grid}.menu-toggle span{background:currentColor;border-radius:2px;width:22px;height:2px;display:block}.menu-toggle:hover,.menu-toggle:focus{opacity:.75}.game-toolbar{background:#2b2b2b;border:1px solid #3f3f46;border-radius:8px;flex-direction:column;gap:8px;width:180px;padding:10px;display:none;position:absolute;top:calc(100% + 10px);left:0;box-shadow:0 16px 40px #00000059}.game-toolbar.open{display:flex}.game-toolbar h3{margin:0 12px 0 0}.button-31{box-sizing:border-box;color:#fff;cursor:pointer;text-align:center;text-transform:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;background-color:#000;border-style:none;border-radius:4px;outline:none;width:106px;min-width:10px;max-width:none;min-height:44px;margin:0;padding:9px 10px 8px;font-family:Farfetch Basis,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.5;display:inline-block;position:relative;overflow:hidden}.game-toolbar .button-31{width:100%}button:disabled{color:#fff;cursor:default;opacity:1;background-color:#6b7280}.button-31:hover,.button-31:focus{opacity:.75}.square.last-move{box-shadow:inset 0 0 0 4px #22c55e}.guide-overlay{z-index:50;box-sizing:border-box;background:#0000008f;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.guide-dialog{box-sizing:border-box;color:#f8fafc;background:#2b2b2b;border:1px solid #3f3f46;border-radius:8px;flex-direction:column;width:70vw;min-width:min(70vw,320px);max-width:980px;height:70vh;display:flex;overflow:hidden;box-shadow:0 22px 60px #0000006b}.guide-header{border-bottom:1px solid #3f3f46;flex:none;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;display:flex}.guide-header h2{margin:0;font-size:22px;line-height:1.2}.guide-close{color:#fff;cursor:pointer;background:#000;border:1px solid #52525b;border-radius:6px;width:36px;height:36px;font-size:20px;line-height:1}.guide-close:hover,.guide-close:focus{opacity:.75}.guide-content{flex:auto;padding:18px;font-size:16px;line-height:1.55;overflow-y:auto}.guide-content h3{margin:24px 0 10px;font-size:18px;line-height:1.25}.guide-content h3:first-child{margin-top:0}.guide-content p{margin:0 0 12px}.guide-content strong{color:#fff7d6}.shogi-area{box-sizing:border-box;justify-content:center;align-items:center;gap:clamp(18px,3vw,48px);width:100%;min-height:100vh;padding:clamp(18px,3vw,42px);display:flex}.shogi-table{border-radius:4px;box-shadow:0 26px 45px #442b1259,inset 0 0 0 1px #ffe3717a,inset 0 -14px 24px #512c0c3d}.shogi-board{aspect-ratio:1;background:#e6ba53;border-radius:3px;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);width:min(58vw,760px);display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #522f0d73,inset 0 0 24px #ffe25a3d}.shogi-board .square{box-sizing:border-box;background:0 0;border-bottom:1px solid #1d1812c7;border-right:1px solid #1d1812c7;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.shogi-board .square:nth-child(9n){border-right:0}.shogi-board .square:nth-last-child(-n+9){border-bottom:0}.shogi-board .square:after{content:"";pointer-events:none;background:#fff5ce00;transition:background .13s,box-shadow .13s;position:absolute;inset:0}.shogi-board .square.legal-move-target:before{content:"";z-index:3;aspect-ratio:1;pointer-events:none;background:#16a34a;border-radius:999px;width:18%;position:absolute;box-shadow:0 0 0 2px #ffffff75,0 0 10px #16a34a6b}.shogi-board .square:hover:after{background:#fff6d538;box-shadow:inset 0 0 0 2px #5b351d3d}.shogi-board .square.last-move:after{background:#81501f33;box-shadow:inset 0 0 0 2px #5c341642}.shogi-board .square.last-move{box-shadow:none}.shogi-board .square.selected-square:after{background:#ffffff3d;box-shadow:inset 0 0 0 3px #14532d85}.shogi-board .square.king-in-check:after{box-shadow:inset 0 0 0 4px #7c3aed,inset 0 0 14px #7c3aed7a}.shogi-board .piece{z-index:2;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;color:#15202b;clip-path:polygon(50% 0%,94% 19%,86% 100%,14% 100%,6% 19%);filter:drop-shadow(0 4px 2px #2d1f125c);background:linear-gradient(#fff 0%,#f2f6f8 58%,#d9e1e5 100%);justify-content:center;align-items:center;width:82%;height:88%;transition:transform .12s,filter .12s;display:flex;position:relative}.shogi-board .piece:hover{filter:drop-shadow(0 5px 3px #391e0a5e);transform:translateY(-2px)scale(1.035)}.shogi-board .piece:active{cursor:grabbing;transform:scale(.96)}.shogi-board .piece.white{transform:rotate(180deg)}.shogi-board .piece.white:hover{transform:rotate(180deg)translateY(2px)scale(1.035)}.shogi-board .piece.white:active{transform:rotate(180deg)scale(.96)}.shogi-area.flipped .shogi-board .piece.black{transform:rotate(180deg)}.shogi-area.flipped .shogi-board .piece.black:hover{transform:rotate(180deg)translateY(2px)scale(1.035)}.shogi-area.flipped .shogi-board .piece.black:active{transform:rotate(180deg)scale(.96)}.shogi-area.flipped .shogi-board .piece.white{transform:none}.shogi-area.flipped .shogi-board .piece.white:hover{transform:translateY(-2px)scale(1.035)}.shogi-area.flipped .shogi-board .piece.white:active{transform:scale(.96)}.shogi-board .piece-kanji{color:#122338;text-shadow:0 1px #ffffffe6;font-family:Yu Mincho,Hiragino Mincho ProN,Noto Serif JP,Noto Serif CJK JP,serif;font-size:clamp(18px,4.2vw,39px);font-weight:800;line-height:1;display:block;transform:translateY(4%)}.shogi-board .piece.promoted .piece-kanji{color:#9b281e}.shogi-area.western .piece-kanji{letter-spacing:0;font-family:Farfetch Basis,Helvetica Neue,Arial,sans-serif;font-size:clamp(15px,3.4vw,31px);font-weight:800}.komadai{box-sizing:border-box;isolation:isolate;background:radial-gradient(#fff49385,#0000 1%),radial-gradient(#fff4936b,#0000 1%),#e6ba53;flex-wrap:wrap;place-content:flex-start center;align-self:center;gap:clamp(10px,1.1vw,16px);width:clamp(118px,12vw,170px);min-height:clamp(170px,20vw,260px);padding:clamp(16px,1.6vw,24px);display:flex;position:relative}.komadai:before{content:"";z-index:-1;background:#60391052;height:1px;position:absolute;top:45%;left:7%;right:7%;box-shadow:0 3px #ffe96f2e,0 -3px #5e360d24}.komadai.white{transform:translateY(-18%)}.komadai.black{transform:translateY(18%)}.komadai .piece{clip-path:polygon(50% 0%,94% 19%,86% 100%,14% 100%,6% 19%);filter:drop-shadow(0 4px 2px #2d1f1257);background:linear-gradient(#fff 0%,#f2f6f8 58%,#d9e1e5 100%);justify-content:center;align-items:center;width:clamp(34px,4.2vw,52px);height:clamp(42px,5vw,62px);display:flex;position:relative}.komadai .piece.selectable-hand-piece{cursor:grab}.komadai .piece.selectable-hand-piece:hover{filter:drop-shadow(0 5px 3px #391e0a5e)}.komadai .piece.selected-hand-piece{box-shadow:inset 0 0 0 3px #14532d94}.komadai .piece.white,.shogi-area.flipped .komadai .piece.black{transform:rotate(180deg)}.shogi-area.flipped .komadai .piece.white{transform:none}.komadai .piece-kanji{color:#122338;text-shadow:0 1px #ffffffe6;font-family:Yu Mincho,Hiragino Mincho ProN,Noto Serif JP,Noto Serif CJK JP,serif;font-size:clamp(17px,3vw,29px);font-weight:800;line-height:1}.piece-count{color:#fff;background:#1f2937;border-radius:999px;place-items:center;min-width:15px;height:15px;font-size:10px;line-height:1;display:grid;position:absolute;bottom:4px;right:4px}.komadai-empty{color:#3d250d75;writing-mode:vertical-rl;margin:auto;font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-size:clamp(28px,4vw,46px);font-weight:800}@media (width<=1100px){.shogi-board{width:min(62vw,660px)}}@media (width<=760px){.guide-dialog{width:70vw;min-width:0;height:70vh}.guide-header{padding:12px 14px}.guide-header h2{font-size:19px}.guide-content{padding:14px;font-size:14px}.shogi-area{flex-direction:column;gap:12px;min-height:100vh;padding:76px 10px 14px}.shogi-board{border-width:5px;width:min(94vw,600px);box-shadow:0 13px 27px #40260f45,0 4px 9px #40260f33}.shogi-board .piece{width:82%;height:88%}.shogi-board .piece-kanji{font-size:clamp(17px,6.8vw,34px)}.komadai{align-content:center;width:min(94vw,520px);min-height:88px;padding:12px 16px}.komadai.white,.komadai.black{transform:none}.komadai-empty{writing-mode:horizontal-tb;font-size:24px}}