.home,body,html{height:100%;padding:0;margin:0;font-family:Roboto,sans-serif}.home canvas,body canvas,html canvas{transition:all .3s ease-in-out;opacity:0}.home.start canvas,body.start canvas,html.start canvas{opacity:1}.home .controls,body .controls,html .controls{text-transform:uppercase;position:fixed;width:100%;height:100%;z-index:1;pointer-events:none;max-width:1200px;--background-color:#f5e5d7;--black-color:#ad734f;--border-radius:0.5rem}@media(min-width:1200px){.home .controls,body .controls,html .controls{margin-inline:calc((100% - 1200px)/2)}}.home .controls .data,body .controls .data,html .controls .data{border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);background-color:var(--background-color);transform:translateX(-50%);position:absolute;padding:1rem;left:50%}.home .controls .data .turn,body .controls .data .turn,html .controls .data .turn{font-size:2.5rem;font-weight:600}.home .controls .data.white,body .controls .data.white,html .controls .data.white{color:#fff}.home .controls .data.black,body .controls .data.black,html .controls .data.black{color:var(--black-color)}.home .controls .data .situation,body .controls .data .situation,html .controls .data .situation{transition:all .3s ease-in-out;transform:translateY(0) translateX(-50%);color:var(--black-color);position:absolute;padding:1rem;opacity:0;bottom:0;left:50%}.home .controls .data .situation.check,.home .controls .data .situation.checkmate,body .controls .data .situation.check,body .controls .data .situation.checkmate,html .controls .data .situation.check,html .controls .data .situation.checkmate{opacity:1;transform:translateY(100%) translateX(-50%)}.home .controls .options,body .controls .options,html .controls .options{position:absolute;background-color:var(--background-color);padding:1rem;border-bottom-right-radius:var(--border-radius);pointer-events:all;left:0;top:0}@media(min-width:1200px){.home .controls .options,body .controls .options,html .controls .options{border-bottom-left-radius:var(--border-radius)}}.home .controls .options button,body .controls .options button,html .controls .options button{background-color:transparent;color:#fff;border:none;cursor:pointer}.home .controls .end-menu,.home .controls .start-menu,body .controls .end-menu,body .controls .start-menu,html .controls .end-menu,html .controls .start-menu{transform:translate(-50%,-50%);position:absolute;left:50%;top:50%;background-color:var(--background-color);padding:1rem;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}.home .controls .end-menu .title,.home .controls .start-menu .title,body .controls .end-menu .title,body .controls .start-menu .title,html .controls .end-menu .title,html .controls .start-menu .title{font-size:2rem;font-weight:600;color:var(--black-color)}.home .controls .end-menu button,.home .controls .start-menu button,body .controls .end-menu button,body .controls .start-menu button,html .controls .end-menu button,html .controls .start-menu button{background-color:var(--black-color);color:#fff;font-weight:600;font-size:1.2rem;border-radius:var(--border-radius);text-transform:uppercase;pointer-events:all;cursor:pointer;padding:1rem;border:none;min-width:300px}