body{background-color:#1d1d1d;color:#b0b0b0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:11px;margin-top:2rem}.main{display:flex;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.main-board{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:550px;height:600px}.board-wrap{display:flex}.board-title{margin:auto;width:50%;padding:20px;font-size:1.3em;-webkit-user-select:text;user-select:text}.button{border:none;color:#000;padding:10px;width:150px;text-align:center;display:inline-block;font-size:16px}nav{min-width:150px;display:flex;flex-direction:column}nav a{padding:1rem;font-size:1rem;font-weight:700;color:#b0b0b0}@media (max-width: 680px){.main{flex-direction:column}.main-board{width:100%;padding-bottom:100%}.sg-wrap{padding-bottom:calc(100% / 11 * 12)}}.sg-wrap{position:relative;box-sizing:border-box;width:100%;height:calc(100% / 11 * 12)}sg-board{position:absolute;width:100%;height:100%;display:block;top:0;left:0}sg-board piece{position:absolute;top:0;left:0;transform:scale(.5);width:calc(200% / 9);height:calc(200% / 9);margin:calc(-50% / 9 / 11 * 12) calc(-50% / 9);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:3;pointer-events:none;will-change:auto}sg-squares,sg-pieces,sg-promotion{display:block;position:absolute;top:0;left:0;width:100%;height:100%;line-height:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box}sg-pieces{cursor:pointer}sg-promotion{z-index:5;background-color:#0000003f}sg-promotion.active{display:block;pointer-events:auto}sg-promotion sg-promotion-square{position:absolute;top:0;left:0;width:calc(100% / 9);height:calc(100% / 9);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}sg-promotion sg-promotion-choices{display:flex;flex-direction:column;background-color:#2e2e2e;box-shadow:3px 3px 7px #000a;border-radius:10px;cursor:pointer;width:100%;height:200%;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none}sg-promotion sg-promotion-choices.reversed{margin:calc(-100% / 11 * 12) 0;flex-direction:column-reverse}sg-promotion sg-promotion-choices piece{display:block;position:relative;transform:scale(1);width:100%;height:50%;margin:0;pointer-events:auto;border-radius:10px;transition:all .2s;background-color:#2e2e2e;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}sg-promotion sg-promotion-choices piece:hover{border-radius:0}sg-squares{display:grid;grid-template:repeat(9,1fr) / repeat(9,1fr);background-size:cover;pointer-events:none}sg-squares sq.dest{background:radial-gradient(#14551e80 22%,#208530 0,#0000004d,#0000 0)}sg-squares sq.pre-dest{background:radial-gradient(#141e5580 22%,#203085 0,#0000004d,#0000 0)}sg-squares sq.oc.dest{background:radial-gradient(transparent 0%,transparent 80%,rgba(20,85,0,.3) 80%)}sg-squares sq.oc.pre-dest{background:radial-gradient(transparent 0%,transparent 80%,rgba(20,30,85,.2) 80%)}sg-squares sq.last-dest.oc.dest{background:radial-gradient(#9bc70069,#9bc70069 80%,#1455004d 80%)}sg-squares sq.last-dest.oc.pre-dest{background:radial-gradient(#9bc70069,#9bc70069 80%,#141e5533 80%)}sg-squares sq.dest.hover,sg-squares sq.last-dest.oc.dest.hover{background:#14551e4d}sg-squares sq.pre-dest.hover,sg-squares sq.last-dest.oc.pre-dest.hover{background:#141e5533}sg-squares sq.last-dest{background-color:#9bc70069}sg-squares sq.check{background:radial-gradient(ellipse at center,red,#e70000 25%,#a9000000 89%,#9e000000)}sg-squares sq.selected{background-color:#14551e80}sg-squares sq.preselected{background-color:#141e5580}sg-squares sq.current-pre{background-color:#141e5580}sg-pieces piece.anim{z-index:4}sg-pieces piece.fading{z-index:2;opacity:.5}sg-pieces piece.ghost{opacity:.3}piece.dragging{z-index:10}piece.dragging.touch{top:-50px}sg-square-over{position:absolute;top:0;left:0;width:calc(100% / 9);height:calc(100% / 9);background:#00000050;border-radius:50%;padding:6%;margin:-6%;will-change:transform;pointer-events:none;z-index:3}.sg-wrap sg-free-pieces,.sg-wrap .sg-shapes,.sg-wrap .sg-custom-svgs{overflow:visible;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.sg-wrap sg-free-pieces{z-index:3}.sg-wrap sg-free-pieces piece{opacity:.6}.sg-wrap .sg-custom-svgs{z-index:9}.sg-wrap .sg-custom-svgs svg{overflow:visible}.sg-wrap coords{position:absolute;display:flex;pointer-events:none;opacity:.8;font-size:9px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sg-wrap coords.ranks{right:-15px;top:0;flex-flow:column-reverse;height:100%;width:12px;text-transform:uppercase}.sg-wrap coords.ranks.gote{flex-flow:column}.sg-wrap coords.files{top:-12px;left:0;flex-flow:row;width:100%;height:12px;text-align:center}.sg-wrap coords.files.gote{flex-flow:row-reverse}.sg-wrap coords coord{flex:1 1 auto}.sg-wrap coords.ranks coord{transform:translateY(39%)}.sg-wrap .sg-shapes>g>g{opacity:.7}.sg-wrap .sg-shapes ellipse{fill:none}.sg-wrap .sg-shapes g.description ellipse{fill:#15781b}.sg-wrap .sg-shapes g.description text{fill:#fff;font-size:60%}.sg-wrap .sg-shapes g.current line{opacity:.9}.sg-wrap .sg-shapes g.outside line{opacity:.4}.sg-wrap .sg-shapes g.primary ellipse{stroke:#15781b}.sg-wrap .sg-shapes g.primary line{stroke:#15781b}.sg-wrap .sg-shapes marker#arrowhead-primary path{fill:#15781b}.sg-wrap .sg-shapes g.alternative0 ellipse{stroke:#882020}.sg-wrap .sg-shapes g.alternative0 line{stroke:#882020}.sg-wrap .sg-shapes marker#arrowhead-alternative0 path{fill:#882020}.sg-wrap .sg-shapes g.alternative1 ellipse{stroke:#003088}.sg-wrap .sg-shapes g.alternative1 line{stroke:#003088}.sg-wrap .sg-shapes marker#arrowhead-alternative1 path{fill:#003088}.sg-wrap .sg-shapes g.alternative2 ellipse{stroke:#e68f00}.sg-wrap .sg-shapes g.alternative2 line{stroke:#e68f00}.sg-wrap .sg-shapes marker#arrowhead-alternative2 path{fill:#e68f00}.timer{position:absolute;width:calc(100% / 9);height:calc(100% / 9);opacity:1;background:#141e5580;animation:timer 5s linear;-webkit-animation-fill-mode:forwards}@keyframes timer{0%{clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%)}to{clip-path:polygon(0% 100%,0% 100%,100% 100%,100% 100%)}}.sg-wrap{height:100%}sg-hand sg-hp-wrap{position:relative}sg-hand sg-hp-wrap:after{content:attr(data-nb);top:0;right:0;position:absolute;line-height:.9em;padding:3px .3em;font-weight:700;font-size:1.5em;color:#fff;background-color:#2e2e2e;border:1px solid #eee;border-radius:3px}.hand-bottom sg-hand sg-hp-wrap:after{top:unset;bottom:0}sg-hp-wrap[data-nb="0"]:not(.drawing){opacity:.3}sg-hp-wrap[data-nb="0"]:not(.selected):not(.drawing):after{content:none}.main-board{align-self:center}.sg-hand-wrap{position:relative;width:200px;height:200px;background-image:url(/assets/new_board-BuS22nt2.png);background-size:cover;margin:0 1rem;border:1px solid black}.sg-hand-wrap sg-hand{display:flex;flex-wrap:wrap;position:absolute;align-items:center;justify-content:center;flex-direction:row-reverse;width:100%;height:100%;top:0;left:0}.hand-bottom{align-self:flex-end}sg-hand.promotion:after{content:"";position:absolute;width:100%;height:100%;background-color:#0000003f}sg-hand piece{display:block;position:relative;width:calc(500px / 9);height:calc(500px / 9);margin:unset;cursor:pointer;pointer-events:auto;border:2px solid transparent;background-repeat:no-repeat}sg-hand sg-hp-wrap.selected{opacity:1;background-color:#14551e80}sg-hand sg-hp-wrap.preselected{opacity:1;background-color:#141e5580}sg-hand sg-hp-wrap.current-pre{background-color:#141e5580}sg-hand sg-hp-wrap.drawing:before{content:"";position:absolute;width:12%;height:calc(12% / 11 * 12);background-color:#000;border-radius:50%;opacity:.7!important}.right-side{align-self:flex-end}.player-name{margin:auto;width:50%;padding:20px}.sg-wrap sg-squares{border-top:1px solid black;border-left:1px solid black;background-image:url(/assets/new_board-BuS22nt2.png)}.sg-wrap sg-squares sq{border-bottom:1px solid black;border-right:1px solid black}sg-squares sq:nth-child(31):after,sg-squares sq:nth-child(34):after,sg-squares sq:nth-child(58):after,sg-squares sq:nth-child(61):after{content:"";position:absolute;border-radius:50%;margin:-4px;width:7px;height:7px;background-color:#000}piece.pawn.sente,.sg-wrap.orientation-sente piece.pawn.sente,.sg-wrap.orientation-gote piece.pawn.gote,.hand-bottom piece.pawn.gote,#promotion-choice.top piece.pawn{background-image:url(/assets/0FU-B0qCKdmM.svg)}piece.silver.sente,.sg-wrap.orientation-sente piece.silver.sente,.sg-wrap.orientation-gote piece.silver.gote,.hand-bottom piece.silver.gote,#promotion-choice.top piece.silver{background-image:url(/assets/0GI-DHFhinfc.svg)}piece.king.sente,.sg-wrap.orientation-sente piece.king.sente{background-image:url(/assets/0GY-B5lm6v1W.svg)}piece.rook.sente,.sg-wrap.orientation-sente piece.rook.sente,.sg-wrap.orientation-gote piece.rook.gote,.hand-bottom piece.rook.gote,#promotion-choice.top piece.rook{background-image:url(/assets/0HI-B3-MFGmv.svg)}piece.bishop.sente,.sg-wrap.orientation-sente piece.bishop.sente,.sg-wrap.orientation-gote piece.bishop.gote,.hand-bottom piece.bishop.gote,#promotion-choice.top piece.bishop{background-image:url(/assets/0KA-B8BijXYT.svg)}piece.knight.sente,.sg-wrap.orientation-sente piece.knight.sente,.sg-wrap.orientation-gote piece.knight.gote,.hand-bottom piece.knight.gote,#promotion-choice.top piece.knight{background-image:url(/assets/0KE-DzNVn72b.svg)}piece.gold.sente,.sg-wrap.orientation-sente piece.gold.sente,.sg-wrap.orientation-gote piece.gold.gote,.hand-bottom piece.gold.gote,#promotion-choice.top piece.gold{background-image:url(/assets/0KI-BwOcihZG.svg)}piece.lance.sente,.sg-wrap.orientation-sente piece.lance.sente,.sg-wrap.orientation-gote piece.lance.gote,.hand-bottom piece.lance.gote,#promotion-choice.top piece.lance{background-image:url(/assets/0KY-DFxrmW7j.svg)}piece.promotedsilver.sente,.sg-wrap.orientation-sente piece.promotedsilver.sente,.sg-wrap.orientation-gote piece.promotedsilver.gote,.hand-bottom piece.promotedsilver.gote,#promotion-choice.top piece.promotedsilver{background-image:url(/assets/0NG-mvoPlykf.svg)}piece.promotedknight.sente,.sg-wrap.orientation-sente piece.promotedknight.sente,.sg-wrap.orientation-gote piece.promotedknight.gote,.hand-bottom piece.promotedknight.gote,#promotion-choice.top piece.promotedknight{background-image:url(/assets/0NK-pGR9aiW1.svg)}piece.promotedlance.sente,.sg-wrap.orientation-sente piece.promotedlance.sente,.sg-wrap.orientation-gote piece.promotedlance.gote,.hand-bottom piece.promotedlance.gote,#promotion-choice.top piece.promotedlance{background-image:url(/assets/0NY-R-nTs1GI.svg)}.sg-wrap.orientation-gote piece.king.gote{background-image:url(/assets/0OU-B76_rqu7.svg)}piece.dragon.sente,.sg-wrap.orientation-sente piece.dragon.sente,.sg-wrap.orientation-gote piece.dragon.gote,.hand-bottom piece.dragon.gote,#promotion-choice.top piece.dragon{background-image:url(/assets/0RY-C4imVXUt.svg)}piece.tokin.sente,.sg-wrap.orientation-sente piece.tokin.sente,.sg-wrap.orientation-gote piece.tokin.gote,.hand-bottom piece.tokin.gote,#promotion-choice.top piece.tokin{background-image:url(/assets/0TO-Dc-uQNKf.svg)}piece.horse.sente,.sg-wrap.orientation-sente piece.horse.sente,.sg-wrap.orientation-gote piece.horse.gote,.hand-bottom piece.horse.gote,#promotion-choice.top piece.horse{background-image:url(/assets/0UM-BDQANRke.svg)}piece.pawn.gote,.sg-wrap.orientation-sente piece.pawn.gote,.sg-wrap.orientation-gote piece.pawn.sente,.hand-top piece.pawn,#promotion-choice.bottom piece.pawn{background-image:url(/assets/1FU-BMnFyJMH.svg)}piece.silver.gote,.sg-wrap.orientation-sente piece.silver.gote,.sg-wrap.orientation-gote piece.silver.sente,.hand-top piece.silver,#promotion-choice.bottom piece.silver{background-image:url(/assets/1GI-ClnxjnJI.svg)}.sg-wrap.orientation-gote piece.king.sente{background-image:url(/assets/1GY-BIaOKdhx.svg)}piece.rook.gote,.sg-wrap.orientation-sente piece.rook.gote,.sg-wrap.orientation-gote piece.rook.sente,.hand-top piece.rook,#promotion-choice.bottom piece.rook{background-image:url(/assets/1HI-Cun3YWmB.svg)}piece.bishop.gote,.sg-wrap.orientation-sente piece.bishop.gote,.sg-wrap.orientation-gote piece.bishop.sente,.hand-top piece.bishop,#promotion-choice.bottom piece.bishop{background-image:url(/assets/1KA-BSXAZ175.svg)}piece.knight.gote,.sg-wrap.orientation-sente piece.knight.gote,.sg-wrap.orientation-gote piece.knight.sente,.hand-top piece.knight,#promotion-choice.bottom piece.knight{background-image:url(/assets/1KE-DSMdIqKD.svg)}piece.gold.gote,.sg-wrap.orientation-sente piece.gold.gote,.sg-wrap.orientation-gote piece.gold.sente,.hand-top piece.gold,#promotion-choice.bottom piece.gold{background-image:url(/assets/1KI-CEJM9Ja7.svg)}piece.lance.gote,.sg-wrap.orientation-sente piece.lance.gote,.sg-wrap.orientation-gote piece.lance.sente,.hand-top piece.lance,#promotion-choice.bottom piece.lance{background-image:url(/assets/1KY-CEqBJVsO.svg)}piece.promotedsilver.gote,.sg-wrap.orientation-sente piece.promotedsilver.gote,.sg-wrap.orientation-gote piece.promotedsilver.sente,.hand-top piece.promotedsilver,#promotion-choice.bottom piece.promotedsilver{background-image:url(/assets/1NG-DFnhjT9D.svg)}piece.promotedknight.gote,.sg-wrap.orientation-sente piece.promotedknight.gote,.sg-wrap.orientation-gote piece.promotedknight.sente,.hand-top piece.promotedknight,#promotion-choice.bottom piece.promotedknight{background-image:url(/assets/1NK--jRd9WA9.svg)}piece.promotedlance.gote,.sg-wrap.orientation-sente piece.promotedlance.gote,.sg-wrap.orientation-gote piece.promotedlance.sente,.hand-top piece.promotedlance,#promotion-choice.bottom piece.promotedlance{background-image:url(/assets/1NY-Kp868o3T.svg)}piece.king.gote,.sg-wrap.orientation-sente piece.king.gote{background-image:url(/assets/1OU-CWfof-dN.svg)}piece.dragon.gote,.sg-wrap.orientation-sente piece.dragon.gote,.sg-wrap.orientation-gote piece.dragon.sente,.hand-top piece.dragon,#promotion-choice.bottom piece.dragon{background-image:url(/assets/1RY-BUrNNqVg.svg)}piece.tokin.gote,.sg-wrap.orientation-sente piece.tokin.gote,.sg-wrap.orientation-gote piece.tokin.sente,.hand-top piece.tokin,#promotion-choice.bottom piece.tokin{background-image:url(/assets/1TO-DJMGICns.svg)}piece.horse.gote,.sg-wrap.orientation-sente piece.horse.gote,.sg-wrap.orientation-gote piece.horse.sente,.hand-top piece.horse,#promotion-choice.bottom piece.horse{background-image:url(/assets/1UM-BYaUmTMR.svg)}.ready-panel-container{margin-right:1rem;margin-left:1rem;text-align:center;font-size:16px}.ready-panel-container-hidden{display:none;margin-right:1rem;margin-left:1rem;text-align:center;font-size:16px}.button-ready{border:none;background-color:#04aa6d;color:#fff;padding:15px 20px;width:200px;text-align:center;display:inline-block;font-size:16px;cursor:not-allowed}.button-not-ready{border:none;color:#000;padding:15px 20px;width:200px;text-align:center;display:inline-block;font-size:16px}.text-ready{font-weight:700;color:#04aa6d}