:root{--border-width: calc(var(--diameter-tile) / 60);--diameter-board: min(85vw, 85vh);--diameter-tile: calc(1 / 8 * var(--diameter-board));--edge-width: calc((min(100vw, 100vh) - var(--diameter-board)) * .3);--color-danger: tomato;--color-success: #1d83e0;--color-white: #f0f0f0;--color-black: #222;--color-board-hue: 30;--color-board-sat: 40%;--color-shadow: hsl(var(--color-board-hue), var(--color-board-sat), 50%);--color-shadow-lighter: hsl(var(--color-board-hue), var(--color-board-sat), 55%);--transition-ease: cubic-bezier(.25, 1, .5, 1);--color-background: var(--color-black)}aside{display:flex;justify-content:space-between;left:0;position:absolute;top:calc(var(--edge-width) * -.55);transform:translateY(-50%);width:100%;z-index:999}aside div{align-items:center;color:#fff;display:flex}aside div>*{align-items:center;display:flex}aside div>*+*{margin-left:calc(var(--border-width) * 2)}aside div h3,aside div label{font-size:calc(var(--edge-width) * .3);height:calc(var(--edge-width) * .3);line-height:1;margin-bottom:0;margin-top:0;text-transform:uppercase}aside div label{cursor:pointer}aside div input{left:-99999px;position:absolute}aside div input+*{opacity:.5}aside div input:checked+*{font-weight:700;opacity:1}aside div svg{height:calc(var(--edge-width) * .5);width:auto}#game-setup-dialog{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),25%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),18%));border:3px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%);border-radius:16px;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff1a inset;color:#f0f0f0;max-width:500px;padding:2rem;width:90vw;animation:dialogFadeIn .3s ease-out}@media(max-width:600px){#game-setup-dialog{padding:1.5rem;width:95vw}}#game-setup-dialog::backdrop{background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#game-setup-dialog .chess-logo{display:block;margin:0 auto 1.5rem;max-width:220px;width:80%;height:auto}#game-setup-dialog h2{color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%);font-size:1.8rem;font-weight:700;margin:0 0 1.5rem;text-align:center;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}@media(max-width:600px){#game-setup-dialog h2{font-size:1.5rem}}#game-setup-dialog h3{color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),70%);font-size:1.1rem;font-weight:600;margin:0 0 .75rem;text-transform:uppercase;letter-spacing:1px}@media(max-width:600px){#game-setup-dialog h3{font-size:1rem}}#game-setup-dialog br{line-height:.5}#game-setup-dialog .setup-section{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;margin-bottom:1.5rem;padding:1rem;transition:background .3s ease}#game-setup-dialog .setup-section:hover{background:#0000004d}#game-setup-dialog label{cursor:pointer;display:inline-flex;align-items:center;font-size:1rem;padding:.5rem 0;transition:color .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(max-width:600px){#game-setup-dialog label{font-size:.9rem}}#game-setup-dialog label:hover{color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),85%)}#game-setup-dialog input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%);border-radius:50%;margin-right:.5rem;position:relative;cursor:pointer;transition:all .2s ease;flex-shrink:0}#game-setup-dialog input[type=radio]:hover{border-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%);box-shadow:0 0 8px #fff3}#game-setup-dialog input[type=radio]:checked{border-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%);background:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%);box-shadow:0 0 12px hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%)}#game-setup-dialog input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#fff}#game-setup-dialog .start-game-btn{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),55%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),45%));border:2px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),65%);border-radius:8px;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:700;letter-spacing:2px;margin-top:1rem;padding:.75rem 2rem;text-transform:uppercase;transition:all .3s ease;width:100%;box-shadow:0 4px 12px #0000004d}#game-setup-dialog .start-game-btn:hover{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%));border-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%);box-shadow:0 6px 20px #0006,0 0 20px hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%);transform:translateY(-2px)}#game-setup-dialog .start-game-btn:active{transform:translateY(0);box-shadow:0 2px 8px #0000004d}#game-setup-dialog .tutorial-btn{background:linear-gradient(135deg,#3380cc,#2966a3);border:2px solid hsl(210,60%,60%);border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:1px;margin-top:.75rem;margin-bottom:.5rem;padding:.65rem 1.5rem;text-transform:uppercase;transition:all .3s ease;width:100%;box-shadow:0 3px 10px #0000004d}#game-setup-dialog .tutorial-btn:hover{background:linear-gradient(135deg,#478cd1,#2e73b8);border-color:#85b3e0;box-shadow:0 5px 16px #0006,0 0 16px #5c99d6;transform:translateY(-2px)}#game-setup-dialog .tutorial-btn:active{transform:translateY(0);box-shadow:0 2px 8px #0000004d}.page-chess-logo{max-width:180px;width:100%;height:auto;pointer-events:none;text-align:center;margin:2em auto}@media(max-width:480px){.page-chess-logo{max-width:100px;min-width:80px}}@media(max-width:768px){.page-chess-logo{max-width:140px;min-width:100px}}html,body{height:100%}body{background:var(--color-background);overflow:hidden;transition:background-color .25s ease-in-out}#view{background:var(--color-shadow-lighter);box-shadow:0 0 0 calc(var(--border-width) * 3) var(--color-shadow-lighter),0 0 0 var(--edge-width) var(--color-shadow);height:var(--diameter-board);margin:calc((100vh - var(--diameter-board)) * .5) calc((100vw - var(--diameter-board)) * .5);position:relative;width:var(--diameter-board)}.board{display:flex;flex-direction:column-reverse;height:100%;width:100%}.board .row{display:flex;height:var(--diameter-tile);width:100%}.board .row:before{color:var(--color-white);font-size:calc(var(--edge-width) * .25);font-weight:700;opacity:.75;pointer-events:none;z-index:10}.board .row:last-child .tile:after,.board .row:first-child .tile:after{position:absolute;bottom:calc(var(--edge-width) * -.5);left:50%;transform:translate(-50%);color:var(--color-white);font-size:calc(var(--edge-width) * .25);font-weight:700;text-transform:uppercase;opacity:.75;line-height:1;pointer-events:none;z-index:10}.board .row .tile{background-color:currentcolor;border:none;box-shadow:inset 0 0 0 var(--border-width) var(--color-shadow-lighter);display:flex;flex-direction:column;height:var(--diameter-tile);justify-content:space-between;padding:0;position:relative;transition:background-color .35s var(--transition-ease);width:var(--diameter-tile)}.board .row .tile .move,.board .row .tile .moves,.board .row .tile .captures{box-sizing:border-box;display:flex;flex-wrap:wrap;height:var(--diameter-tile);justify-content:center;left:0;padding:calc(var(--diameter-tile) * .025);position:absolute;top:0;width:var(--diameter-tile);z-index:9}.board .row .tile .move,.board .row .tile .moves{align-content:center;align-items:center}.board .row .tile .captures{align-items:flex-start;justify-content:space-between}.board .row .tile:not(.occupied) .captures{align-items:center;justify-content:center}.board .row .tile>div>svg{--stroke: transparent;box-sizing:border-box;height:var(--di);line-height:var(--di);width:var(--di)}.board .row .tile .move svg{--di: calc(var(--diameter-tile) / 4);--fill: var(--color-shadow)}.board .row .tile .moves svg,.board .row .tile .captures svg{--di: calc(var(--diameter-tile) / 4);--fill: var(--color-shadow);opacity:.4}.board .row .tile.occupied .captures svg{position:absolute}.board .row .tile.occupied .captures svg:nth-child(1){top:0;left:0}.board .row .tile.occupied .captures svg:nth-child(2){top:0;right:0}.board .row .tile.occupied .captures svg:nth-child(3){bottom:calc(var(--di) * .1);left:0}.board .row .tile.occupied .captures svg:nth-child(4){bottom:calc(var(--di) * .1);right:0}.board .row .tile.occupied .captures svg:nth-child(5){top:calc(50% - var(--di) * .55);left:0}.board .row .tile.occupied .captures svg:nth-child(6){top:calc(50% - var(--di) * .55);right:0}.board .row .tile.occupied .captures svg:nth-child(7){top:0;left:calc(50% - var(--di) * .5)}.board .row .tile.occupied .captures svg:nth-child(8){bottom:calc(var(--di) * .1);left:calc(50% - var(--di) * .5)}.board .row .tile[class*=highlight-] .moves,.board .row .tile[class*=highlight-] .captures{display:none}.perspective-black .board .row:nth-child(2n) .tile:nth-child(odd),.perspective-black .board .row:nth-child(odd) .tile:nth-child(2n),.perspective-white .board .row:nth-child(2n) .tile:nth-child(2n),.perspective-white .board .row:nth-child(odd) .tile:nth-child(odd){color:hsl(var(--color-board-hue),var(--color-board-sat),62%)}.perspective-black .board .row:nth-child(2n) .tile:nth-child(2n),.perspective-black .board .row:nth-child(odd) .tile:nth-child(odd),.perspective-white .board .row:nth-child(2n) .tile:nth-child(odd),.perspective-white .board .row:nth-child(odd) .tile:nth-child(2n){color:hsl(var(--color-board-hue),var(--color-board-sat),70%)}.perspective-black .board{flex-direction:column}.perspective-black .board .row{flex-direction:row-reverse}.perspective-black .board .row:nth-child(1):before{content:"8"}.perspective-black .board .row:nth-child(2):before{content:"7"}.perspective-black .board .row:nth-child(3):before{content:"6"}.perspective-black .board .row:nth-child(4):before{content:"5"}.perspective-black .board .row:nth-child(5):before{content:"4"}.perspective-black .board .row:nth-child(6):before{content:"3"}.perspective-black .board .row:nth-child(7):before{content:"2"}.perspective-black .board .row:nth-child(8):before{content:"1"}.perspective-black .board .row:last-child .tile:nth-child(1):after{content:"H"}.perspective-black .board .row:last-child .tile:nth-child(2):after{content:"G"}.perspective-black .board .row:last-child .tile:nth-child(3):after{content:"F"}.perspective-black .board .row:last-child .tile:nth-child(4):after{content:"E"}.perspective-black .board .row:last-child .tile:nth-child(5):after{content:"D"}.perspective-black .board .row:last-child .tile:nth-child(6):after{content:"C"}.perspective-black .board .row:last-child .tile:nth-child(7):after{content:"B"}.perspective-black .board .row:last-child .tile:nth-child(8):after{content:"A"}.perspective-white .board .row:nth-child(1):before{content:"1"}.perspective-white .board .row:nth-child(2):before{content:"2"}.perspective-white .board .row:nth-child(3):before{content:"3"}.perspective-white .board .row:nth-child(4):before{content:"4"}.perspective-white .board .row:nth-child(5):before{content:"5"}.perspective-white .board .row:nth-child(6):before{content:"6"}.perspective-white .board .row:nth-child(7):before{content:"7"}.perspective-white .board .row:nth-child(8):before{content:"8"}.perspective-white .board .row:first-child .tile:nth-child(1):after{content:"A"}.perspective-white .board .row:first-child .tile:nth-child(2):after{content:"B"}.perspective-white .board .row:first-child .tile:nth-child(3):after{content:"C"}.perspective-white .board .row:first-child .tile:nth-child(4):after{content:"D"}.perspective-white .board .row:first-child .tile:nth-child(5):after{content:"E"}.perspective-white .board .row:first-child .tile:nth-child(6):after{content:"F"}.perspective-white .board .row:first-child .tile:nth-child(7):after{content:"G"}.perspective-white .board .row:first-child .tile:nth-child(8):after{content:"H"}.touching .board .row .tile .moves,.touching .board .row .tile .captures,.turn-black .board .row .tile .moves .white,.turn-black .board .row .tile .captures .white,.turn-white .board .row .tile .moves .black,.turn-white .board .row .tile .captures .black{display:none}button:focus{outline:none;position:relative;z-index:9}svg{--fill: var(--color-black);--stroke: var(--color-shadow);fill:var(--fill)}svg.white{--fill: var(--color-white)}svg.black{--fill: var(--color-black)}.pieces{display:block;height:var(--diameter-board);left:0;pointer-events:none;position:absolute;top:0;width:var(--diameter-board);z-index:99}.pieces .piece{--pos-col: 3.5;--scale: 0;--transition-delay: 0ms;--transition-duration: .2s;bottom:0;display:block;height:var(--diameter-tile);position:absolute;left:0;transform:translate(calc(var(--pos-col) * 100%),calc(var(--pos-row) * -100%)) translateZ(0);transform-origin:50% 50%;transition:all var(--transition-duration) var(--transition-ease) var(--transition-delay);width:var(--diameter-tile)}.pieces .piece.white{--pos-row: -1}.pieces .piece.black{--pos-row: 8}.pieces .piece.highlight-active svg{animation:wobble .5s linear infinite;--stroke: var(--color-success)}.pieces .piece.highlight-capture svg{--stroke: var(--color-danger)}.pieces .piece svg{display:block;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%) translateZ(0) scale(var(--scale));transform-origin:50% 50%;transition:transform var(--transition-duration) var(--transition-ease),fill var(--transition-duration) var(--transition-ease),opacity var(--transition-duration) var(--transition-ease)}.piece svg{--svg-di: calc(var(--diameter-tile) * .666);display:block;font-weight:700;height:var(--svg-di);left:50%;line-height:var(--svg-di);position:absolute;stroke-linejoin:round;text-align:center;top:50%;transform:translate(-50%,-50%);width:var(--svg-di)}.perspective-black .pieces .piece{transform:translate(calc((7 - var(--pos-col)) * 100%),calc((7 - var(--pos-row)) * -100%)) translateZ(0)}.turn-white .pieces .piece:not(.highlight-capture) svg.black,.turn-black .pieces .piece:not(.highlight-capture) svg.white,.turn-black .pieces .piece:not(.can-move):not(.can-capture) svg.black,.turn-white .pieces .piece:not(.can-move):not(.can-capture) svg.white{--stroke: transparent;opacity:.8}@keyframes wobble{0%,50%,to{transform:translate(-50%,-50%) translateZ(0) scale(1) rotate(0)}25%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(-2deg)}75%{transform:translate(-50%,-50%) translateZ(0) scale(1.1) rotate(2deg)}}.introjs-tooltip{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),25%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),18%))!important;border:3px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%)!important;border-radius:12px!important;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff1a inset!important;color:#f0f0f0!important;font-size:1rem;min-width:340px!important;max-width:390px!important}.tutorial-piece-icon{display:flex;justify-content:center;align-items:center;margin:0 auto 1.25rem;padding:1rem;background:#0003;border:2px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%);border-radius:8px;width:-moz-fit-content;width:fit-content;box-shadow:0 4px 12px #0006,0 0 20px hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),40%)}.tutorial-piece-icon svg{width:100px!important;height:100px!important;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}.tutorial-piece-icon svg.white{--fill: var(--color-white);--stroke: var(--color-shadow)}.tutorial-piece-icon svg.black{--fill: var(--color-black);--stroke: var(--color-shadow)}.introjs-tooltip-title{color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%)!important;font-size:1.4rem!important;font-weight:700!important;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.75rem!important;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.introjs-tooltiptext{color:#f0f0f0!important;line-height:1.6}.introjs-tooltiptext ul{margin:.5rem 0 0;padding-left:1.25rem}.introjs-tooltiptext li{margin:.4rem 0}.introjs-tooltiptext strong{color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),80%)}.introjs-tooltiptext em{color:#85b3e0;font-style:italic}.introjs-button{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),55%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),45%))!important;border:2px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),65%)!important;border-radius:6px!important;color:#fff!important;font-weight:600!important;letter-spacing:1px;padding:.5rem 1.25rem!important;text-shadow:1px 1px 2px rgba(0,0,0,.3)!important;text-transform:uppercase;transition:all .3s ease}.introjs-button:hover{background:linear-gradient(135deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%))!important;border-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),75%)!important;box-shadow:0 4px 12px #0006!important;transform:translateY(-2px)}.introjs-button:focus{box-shadow:0 0 0 3px #a5cef666!important;outline:none!important}.introjs-progressbar{background-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),30%)!important}.introjs-progress{background:linear-gradient(90deg,hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%),hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),70%))!important}.introjs-overlay{background-color:#000000b3!important}.introjs-helperLayer{background-color:#ffffff0d!important;border:3px solid hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),65%)!important;box-shadow:0 0 30px hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),60%),0 0 0 9999px #000000b3!important;border-radius:8px!important}.introjs-arrow{border-color:transparent}.introjs-arrow.top{border-bottom-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%)!important}.introjs-arrow.right{border-left-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%)!important}.introjs-arrow.bottom{border-top-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%)!important}.introjs-arrow.left{border-right-color:hsl(var(--color-board-hue, 30),var(--color-board-sat, 40%),50%)!important}@keyframes dialogFadeIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}