.result-panel{font-size:18px;width:460px;margin:40px auto 45px;background-color:var(--resultBackground);color:var(--colorForeground);padding:30px;border-radius:5px}.result-panel .row{display:flex}.result-panel .cell{width:120px;padding:5px;text-align:center}.result-panel .cell.left{text-align:left}.result-panel .label{line-height:24px}.result-panel .label.bold{font-weight:700}.playing .board-container .board{background-color:var(--playingBoardBackground);border:var(--playingBoardBorderStyle);box-shadow:var(--playingBoardShadowStyle)}.playing .board-container .center:before,.playing .board-container .center:after{background-color:var(--playingBoardBorder)}.playing .inner-square{background-color:var(--playingBoardSquareBackground)}.playing .square-0,.playing .square-1,.playing .square-3,.playing .square-4{border-right:thin solid var(--playingBoardBorder);border-bottom:thin solid var(--playingBoardBorder)}.playing .square-2,.playing .square-5{border-bottom:thin solid var(--playingBoardBorder)}.playing .square-6,.playing .square-7{border-right:thin solid var(--playingBoardBorder)}.board-container{position:relative;margin:0 auto;display:flex;flex-direction:column;align-items:center;row-gap:40px}.board-container .board{transition:all .3s ease;position:relative;width:80vw;height:80vw;max-width:calc(70vh - 100px);max-height:calc(70vh - 100px);border-radius:5px;background-color:var(--boardBackground);border:var(--boardBorderStyle);box-shadow:var(--boardShadowStyle)}.board-container .keybindings-notice{font-size:14px}.board-container .center{position:absolute;top:50%;left:50%;z-index:10}.board-container .center:before,.board-container .center:after{content:"";position:absolute;height:1px;width:15px;background-color:var(--boardBorder)}.board-container .center:before{transform:translate(-50%)}.board-container .center:after{transform:translate(-50%) rotate(90deg)}.playing .board{max-width:80vh;max-height:80vh}.square{flex:1 0 auto;position:relative;padding:25px;display:flex;align-items:center;justify-content:center}.square:after{content:"";float:left;display:block;padding-top:100%}.inner-square{opacity:0;transition:all .5s ease-in-out;background-color:var(--boardSquareBackground);height:100%;width:100%;border-radius:5px}.highlighted .inner-square{opacity:1}.square-0,.square-1,.square-3,.square-4{border-right:thin solid var(--boardBorder);border-bottom:thin solid var(--boardBorder)}.square-2,.square-5{border-bottom:thin solid var(--boardBorder)}.square-6,.square-7{border-right:thin solid var(--boardBorder)}.row{display:flex}.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:40px 20px 20px}.topbar .title{font-size:30px;font-weight:500}.topbar .settings-btn{cursor:pointer;margin-left:6px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.topbar .settings-btn:hover{color:var(--textForeground)}.topbar .game-notice .chip{background-color:transparent;color:var(--textForeground);border-color:var(--primary)}.topbar .game-notice .chip.level-chip{color:var(--background);background-color:var(--primary)}html{background-color:var(--background);color:var(--textBackground);font-family:Roboto,sans-serif;box-sizing:border-box}html *{box-sizing:border-box}body{background-color:var(--background)}.app-container{position:absolute;top:0%;left:0;width:100vw;height:100vh;display:flex;justify-content:center}.app-container.playing{cursor:none}.app-container.playing .app{justify-content:center}.app-container .app{height:100%;max-width:1250px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex:1;padding:30px}.flex-row{display:flex;align-items:center;column-gap:10px}.trials-notice{position:absolute;top:0;right:0;padding:15px;font-size:30px;font-weight:600}.footer{width:100%;display:flex;align-items:flex-end;justify-content:space-between;color:var(--textBackground)}.footer .notice{display:flex;align-items:center;column-gap:4px;font-size:12px;letter-spacing:1px}.footer .theme-notice{text-transform:capitalize}.keybindings-notice{font-size:12px;display:flex;flex-direction:column;align-items:flex-start;row-gap:6px}.keybindings-notice .keybinding-line{display:flex;align-items:center;column-gap:6px}.keybindings-notice .keybinding-line strong{font-weight:400;background-color:var(--textBackground);color:var(--background);padding:1px 4px;border-radius:3px;display:flex;align-items:center;justify-content:center}.keybindings-notice .keybinding-line strong svg{transform:scale(1.3)}.match-notice{position:absolute;width:100%;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:20px}.match-notice .keybinding-line.user-match-notice{transition:all .2s ease}.match-notice .keybinding-line.user-match-notice.btn-pressed{color:var(--btnPressed)}.match-notice .keybinding-line.user-match-notice.btn-pressed strong{background-color:var(--btnPressed)}.match-notice .keybinding-line.user-match-notice.btn-error{color:var(--btnError)}.match-notice .keybinding-line.user-match-notice.btn-error strong{background-color:var(--btnError)}.match-notice .keybinding-line.user-match-notice.btn-success{color:var(--btnSuccess)}.match-notice .keybinding-line.user-match-notice.btn-success strong{background-color:var(--btnSuccess)}
