:root{--board-size:min(calc(98vh - 7.5rem), calc(94vw - 9rem));--square:calc(var(--board-size) / 8);--piece-scale:.8;--light:#e8d3a1;--dark:#8a5a2b;--frame:#4a3418;--selected:#f5d442;--target:#4ade80d9;--path:#f5d44280;--hint:#38bdf8}body{box-sizing:border-box;color:#eee;background:#232323;justify-content:flex-start;align-items:stretch;min-height:100vh;margin:0;padding:2vh 2rem 0;font-family:system-ui,-apple-system,sans-serif;display:flex}.game{flex-direction:column;align-items:flex-start;display:flex}.status-bar{box-sizing:border-box;width:var(--board-size);background:#141414d1;border-radius:8px;flex-flow:wrap;flex:1;justify-content:flex-start;align-items:center;gap:.75rem;min-height:2.4rem;margin-top:.5rem;padding:.4rem .8rem;display:flex}.status-bar>:not(.hidden)+:not(.hidden){border-left:1px solid #555;padding-left:.75rem}.status-bar>p{margin:0}.board-row{align-items:center;display:flex}.page-bg{object-fit:cover;z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.panel{box-sizing:border-box;width:var(--board-size);background:#141414d1;border-radius:8px;flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem .8rem;display:flex}.status{text-align:center;min-height:1.3em;margin:0;font-size:1rem}.level-select{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.35rem .5rem;font-size:.95rem}.level-select:disabled{opacity:.4;cursor:default}.controls{flex-flow:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.controls-divider{background:#555;flex:none;align-self:stretch;width:1px}.confirm{justify-content:center;align-items:center;gap:.75rem;display:flex}.hidden{display:none}.controls button,.confirm button,.modal-dialog button{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.5rem 1rem;font-size:1rem}.controls button:hover:not(:disabled),.confirm button:hover:not(:disabled),.modal-dialog button:hover:not(:disabled){background:#4a4a4a}.controls button:disabled{opacity:.4;cursor:default}.confirm .btn-confirm-yes{background:#7a2b2b;border-color:#a33}.offer-msg{text-align:center;overflow-wrap:break-word;color:#cdd;min-height:1.2em;margin:0;font-size:.95rem}.modal-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-overlay.hidden{display:none}.modal-dialog{color:#eee;text-align:center;background:#2a2a2a;border-radius:10px;flex-direction:column;align-items:center;gap:1rem;max-width:min(22rem,90vw);padding:1.5rem 1.75rem;display:flex;box-shadow:0 8px 30px #00000080}.modal-msg{margin:0;font-size:1.15rem}.board{grid-template-columns:repeat(8, var(--square));grid-template-rows:repeat(8, var(--square));width:var(--board-size);height:var(--board-size);border:6px solid var(--frame);box-sizing:content-box;-webkit-user-select:none;user-select:none;display:grid}.square{justify-content:center;align-items:center;display:flex;position:relative}.square.light{background:var(--light)}.square.dark{background:var(--dark);cursor:pointer;touch-action:none}.square.dark:has(.piece.black){cursor:grab}.board.grabbing,.board.grabbing .square{cursor:grabbing}.square.selected{outline:4px solid var(--selected);outline-offset:-4px}.square.path{background:var(--path)}.square.target:after{content:"";background:var(--target);pointer-events:none;border-radius:50%;width:34%;height:34%;position:absolute}.square.hint-from{outline:4px dashed var(--hint);outline-offset:-4px}.square.hint-to:after{content:"";border:4px solid var(--hint);box-sizing:border-box;pointer-events:none;border-radius:50%;width:44%;height:44%;position:absolute}.board.board-img{background:url(/assets/game_board-DZZg8bcE.webp) 50%/100% 100% no-repeat}.board.board-img .square{background:0 0}.board.board-img .square.path{background:var(--path)}.piece{width:calc(var(--piece-scale) * 100%);height:calc(var(--piece-scale) * 100%);box-sizing:border-box;filter:drop-shadow(calc(var(--square) * .03) calc(var(--square) * .045) calc(var(--square) * .045) #00000080);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.piece.moving{z-index:5;position:relative}.piece.dragging{z-index:10;filter:drop-shadow(calc(var(--square) * .06) calc(var(--square) * .09) calc(var(--square) * .11) #0000008c);position:relative}.piece.black{background:radial-gradient(circle at 35% 30%,#555,#111);border:2px solid #000}.piece.white{background:radial-gradient(circle at 35% 30%,#f26b5e,#b81f14);border:2px solid #7a1a12}.piece.king:before{content:"♛";font-size:calc(var(--square) * .42);line-height:1}.piece.black.king:before{color:#e8c34a}.piece.white.king:before{color:#ffd24a}.board.pieces-img .piece{background:50%/contain no-repeat;border:none}.board.pieces-img .piece.black{background-image:url(/assets/black-D4c9GDJF.webp)}.board.pieces-img .piece.white{background-image:url(/assets/white-BAlGjVht.webp)}.board.pieces-img .piece.black.king{background-image:url(/assets/black_queen-BA0eoBKN.webp)}.board.pieces-img .piece.white.king{background-image:url(/assets/white_queen-HO-LBXal.webp)}.board.pieces-img .piece.king:before{display:none}.board.variant-italian.board-img{background:url(/assets/right_game_board-Chnqq2S0.webp) 50%/100% 100% no-repeat}.board.variant-italian.pieces-img .piece.black{background-image:url(/assets/red-DRqycPw9.webp)}.board.variant-italian.pieces-img .piece.black.king{background-image:url(/assets/red_queen-Gzubf5kc.webp)}.turn-indicator{flex:none;justify-content:center;align-items:center;margin-left:1rem;display:flex}.turn-indicator.hidden{display:none}.turn-indicator .piece{width:calc(var(--square) * var(--piece-scale) * 1.6);height:calc(var(--square) * var(--piece-scale) * 1.6);box-shadow:0 0 calc(var(--square) * .18) #ffffffb3}.turn-indicator--img .piece{background:50%/contain no-repeat;border:none}.turn-indicator--img .piece.black{background-image:url(/assets/black-D4c9GDJF.webp)}.turn-indicator--img .piece.white{background-image:url(/assets/white-BAlGjVht.webp)}.turn-indicator--img.variant-italian .piece.black{background-image:url(/assets/red-DRqycPw9.webp)}@media (width<=768px){body{flex-direction:column;justify-content:flex-start;align-items:center;gap:.6rem;padding:1vh .75rem}:root{--board-size:min(70vh, calc(100vw - 1.5rem - 12px))}.game{align-items:center;width:100%}.board-row{flex-direction:column;align-items:center}.status-bar{flex:none;margin-top:.6rem}.controls-divider{display:none}.controls button,.confirm button{white-space:nowrap;flex:1 1 0;padding:.45rem .35rem;font-size:.85rem}.turn-indicator,.pvp-turn{margin-top:.6rem;margin-left:0}}.lobby{box-sizing:border-box;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.lobby-card{box-sizing:border-box;background:#141414d1;border-radius:10px;flex-direction:column;gap:1rem;width:min(28rem,100%);padding:1.75rem;display:flex;box-shadow:0 8px 30px #00000080}.lobby-header{justify-content:space-between;align-items:center;gap:.75rem;min-height:2rem;display:flex}.lobby-title{text-align:left;margin:0;font-size:1.5rem}.lobby-lang{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;flex-shrink:0;padding:.3rem .45rem;font-size:.85rem}.lobby-join{flex-direction:column;gap:.6rem;display:flex}.lobby-nick{color:#eee;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.55rem .7rem;font-size:1rem}.lobby-nick:disabled{opacity:.5}.lobby-card button{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.55rem 1rem;font-size:1rem}.lobby-card button:hover:not(:disabled){background:#4a4a4a}.lobby-card button:disabled{opacity:.4;cursor:default}.lobby-divider{border:none;border-top:1px solid #555;width:100%;height:0;margin:1rem 0 0}.lobby-solo-heading{color:#eee;margin:.8rem 0 .6rem;font-size:1.05rem;font-weight:600}.lobby-solo{flex-wrap:nowrap;align-items:stretch;gap:.6rem;display:flex}.lobby-solo .lobby-solo-btn{flex:none}.lobby-variant{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;flex:auto;min-width:0;padding:.55rem .7rem;font-size:1rem}.lobby-msg{text-align:center;color:#cdd;overflow-wrap:break-word;margin:0;font-size:.95rem}.lobby-room{flex-direction:column;display:flex}.lobby-room-header{justify-content:flex-start;align-items:center;gap:.6rem;margin-bottom:.6rem;display:flex}button.lobby-nick-line{color:#cdd;text-align:left;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;background:0 0;border:none;min-width:0;margin:0;padding:.1rem 0;font-size:1rem;font-weight:600;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}button.lobby-nick-line:hover{color:#fff;background:0 0}.modal-dialog .lobby-nick{box-sizing:border-box;width:100%}.lobby-nick-lang{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.4rem .5rem;font-size:.9rem}.lobby-accordion{flex-direction:column;gap:.4rem;display:flex}.lobby-section{background:#2a2a2a;border:1px solid #444;border-radius:8px;overflow:hidden}.lobby-section.is-mine{border-color:#5a7a3a}.lobby-section-header{text-align:left;cursor:pointer;background:#333;border:none;border-radius:0;justify-content:space-between;align-items:center;gap:.5rem;width:100%;padding:.6rem .8rem;font-size:1.05rem;display:flex}.lobby-section.is-mine>.lobby-section-header{background:#3a4a2f}.lobby-section-name{font-weight:600}.lobby-section-count{color:#eee;text-align:center;background:#555;border-radius:999px;flex:none;min-width:1.6rem;padding:.05rem .4rem;font-size:.85rem}.lobby-section-body{flex-direction:column;gap:.5rem;padding:.6rem .8rem;display:flex}.lobby-empty{color:#9aa;font-style:italic}.lobby-enter-btn{align-self:flex-start}.lobby-roster{flex-direction:column;gap:.35rem;max-height:40vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.lobby-roster-item{background:#2f2f2f;border-radius:6px;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .7rem;display:flex}.lobby-roster-item.is-self{background:#3a4a2f;font-weight:600}.lobby-you{color:#9ab;font-weight:400}.lobby-disconnected{text-align:center;flex-direction:column;gap:.6rem;display:flex}.lobby-join.hidden,.lobby-room.hidden,.lobby-disconnected.hidden{display:none}.lobby-challenge-btn{flex:none}.lobby-outgoing{color:#cdd;margin:0 0 .5rem;font-size:.95rem}.lobby-notice{color:#d9c98a;margin:0 0 .5rem;font-size:.95rem}.lobby-challenges{flex-direction:column;gap:.4rem;margin:0 0 .6rem;padding:0;list-style:none;display:flex}.lobby-challenge-item{background:#34402f;border:1px solid #4a5a3a;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .7rem;display:flex}.lobby-challenge-label{flex:auto}.lobby-accept-btn,.lobby-reject-btn{flex:none}.lobby-challenge-item .lobby-accept-btn{background:#3a5a2f}.pvp-controls{justify-content:flex-start}.pvp-variant-label{color:#bbb}.pvp-variant,.game-variant{font-weight:700}.pvp-opponent-label{color:#bbb}.pvp-opponent{overflow-wrap:anywhere;min-width:0;font-weight:700}.pvp-turn{flex:none;justify-content:center;align-items:center;margin-left:1rem;display:flex}.pvp-turn.hidden{display:none}.pvp-turn-stone{width:calc(var(--square) * var(--piece-scale) * 1.6);height:calc(var(--square) * var(--piece-scale) * 1.6);box-sizing:border-box;box-shadow:0 0 calc(var(--square) * .18) #ffffffb3;border-radius:50%}.pvp-turn-stone.black{background:radial-gradient(circle at 35% 30%,#555,#111);border:2px solid #000}.pvp-turn-stone.white{background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf);border:2px solid #999}.pvp-turn--img .pvp-turn-stone{background:50%/contain no-repeat;border:none}.pvp-turn--img .pvp-turn-stone.black{background-image:url(/assets/black-D4c9GDJF.webp)}.pvp-turn--img .pvp-turn-stone.white{background-image:url(/assets/white-BAlGjVht.webp)}.pvp-turn--img.variant-italian .pvp-turn-stone.black{background-image:url(/assets/red-DRqycPw9.webp)}.pvp-error{color:#e88;margin:0;font-size:.95rem}.pvp-notice{color:#cdd;margin:0;font-size:.95rem}.modal-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.modal-dialog .btn-resign-yes{background:#7a2b2b;border-color:#a33}.modal-dialog .btn-draw-accept{background:#2b6a3a;border-color:#3a8}.modal-dialog .btn-rematch{background:#2b4d7a;border-color:#3a7}.modal-notice{color:#cdd;margin:0;font-size:.95rem}.modal-dialog a.modal-link{color:#eee;background:#2b4d7a;border:1px solid #3a7;border-radius:6px;padding:.5rem 1rem;text-decoration:none}.modal-dialog a.modal-link:hover{background:#34608f}
