:root{--bg-color:#e3ccaf;--font-size:40px;--popup-color:#fff;--font-size-small:20px;--border-color:#a6a5a5;--font-color:#000;--font-color-disappear:#00000000;--box-shadow:0px 0px 5px 0px #42445a}body,html{-webkit-overflow-scrolling:touch;background-attachment:fixed;background-color:#1a1a1a;background-image:url(chess-background.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;border:0;font-family:Roboto,sans-serif;min-height:100vh;overflow:hidden;position:relative;touch-action:pan-x pan-y}body,canvas,html{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;margin:0;padding:0;-webkit-user-select:none;width:100vw}canvas{background:transparent!important;border:8px solid #4a2c2a;border-radius:12px;box-sizing:border-box;display:block;left:0;position:absolute;top:0;touch-action:manipulation;z-index:1}.center-mid{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.btn{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:min(40px,6vw);min-height:44px;min-width:44px;padding:min(15px,3vw) min(20px,4vw)}.btn.promotion{margin-left:8px}.btn.promotion:last-child{margin-right:8px}.end-popup{background-color:var(--popup-color);border:1px solid var(--border-color);border-radius:8px;box-sizing:border-box;font-size:min(20px,4vw);max-height:70vh;max-width:90vw;overflow-y:auto;padding:2vh 3vw;position:relative;text-align:center;z-index:1000}.end-popup-btn{margin-top:10px;text-align:center;width:100%}.btn-small{font-size:var(--font-size-small)}.btn-small,.score{background-color:var(--bg-color)}.score{border:1px solid var(--border-color);border-radius:3px;box-shadow:var(--box-shadow);display:none;font-size:var(--font-size);height:45px;min-width:min(350px,90vw);padding:2px 10px;position:absolute}.score.player-score{bottom:10px;display:none;right:10px}.score.opponent-score{display:none;left:10px;top:10px}#opponent-turn-notification{font-size:30px;position:absolute;right:30px;top:10px}#opponent-turn-notification:after{animation:dots 1s steps(5) infinite;content:" ."}@keyframes dots{0%,20%{color:var(--font-color);text-shadow:.25em 0 0 var(--font-color-disappear),.5em 0 0 var(--font-color-disappear)}40%{color:var(--font-color);text-shadow:.25em 0 0 var(--font-color-disappear),.5em 0 0 var(--font-color-disappear)}60%{text-shadow:.25em 0 0 var(--font-color),.5em 0 0 var(--font-color-disappear)}80%,to{text-shadow:.25em 0 0 var(--font-color),.5em 0 0 var(--font-color)}}.chess-menu{background-color:var(--popup-color);border:2px solid var(--border-color);border-radius:12px;box-sizing:border-box;font-family:Roboto,sans-serif;left:50%;max-height:93vh;max-width:min(95vw,1200px);overflow-y:auto;padding:3vh 4vw;position:fixed;text-align:center;top:50%;transform:translate(-50%,-50%);width:85vw;z-index:2000}.chess-menu h2{color:var(--font-color);font-size:min(28px,5vw);margin:0 0 2vh}.chess-menu p{color:var(--font-color);font-size:min(18px,3.5vw);line-height:1.4;margin:1vh 0}.chess-menu-buttons{display:flex;flex-direction:column;gap:min(15px,2vh);margin-top:3vh;width:100%}.chess-menu-button{background-color:var(--bg-color);border:2px solid var(--border-color);border-radius:8px;box-sizing:border-box;color:var(--font-color);cursor:pointer;font-size:min(22px,4vw);font-weight:700;min-height:44px;padding:min(18px,3vh) min(25px,4vw);transition:all .2s ease;width:100%}.chess-menu-button:hover{background-color:#e6d3ab;transform:translateY(-1px)}.chess-menu-button:active{transform:translateY(0)}.side-selection-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:min(20px,3vw);justify-content:center}.side-selection-buttons .chess-menu-button{flex:1;max-width:min(200px,40vw);min-width:min(120px,25vw)}.btn.promotion{font-size:min(18px,3.5vw)!important;margin:0 min(8px,1vw);padding:min(12px,2vh) min(16px,3vw)!important}@media (max-height:600px){.chess-menu{max-height:98vh;padding:2vh 3vw}.chess-menu h2{font-size:min(24px,4vw);margin-bottom:1vh}.chess-menu-buttons{gap:min(10px,1.5vh);margin-top:2vh}.chess-menu-button{font-size:min(20px,3.5vw);padding:min(14px,2vh) min(20px,3vw)}}@media (max-width:400px){.chess-menu{padding:2vh 2vw}.side-selection-buttons{flex-direction:column;gap:min(15px,2vh)}.side-selection-buttons .chess-menu-button{max-width:100%}}