body{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;margin:0;padding:0;background-color:#000;font-family:'Helvetica', 'Arial', 'sans-serif'}

@media screen and (orientation: portrait) and (max-device-width: 900px){body{transform:rotate(90deg)}}


.gameBoard{display:flex;flex-direction:column;width:calc(4vmin * 32);height:calc(4vmin * 20 + 10vmin);user-select:none}.gameBoard .-grid{position:relative;display:flex;flex-wrap:wrap;width:100%;height:calc(4vmin * 20);background-color:#000}.gameBoard .-grid .-static-canvas,.gameBoard .-grid .-stones-canvas,.gameBoard .-grid .-ball-canvas{position:absolute;top:0;left:0;width:calc(4vmin * 32);height:calc(4vmin * 20)}.gameBoard .-panel{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:10vmin;width:calc(100% - 4vmin * 2);padding:0 4vmin;background-color:#000;color:#fff;font-size:2.5vmin}.gameBoard .-panel .-info{display:flex;flex-direction:row;align-items:center;flex-grow:2}.gameBoard .-panel .-info .-label{margin-right:1vmin}.gameBoard .-panel .-info .-value{margin-right:10vmin}.gameBoard .-panel .-goto,.gameBoard .-panel .-undo,.gameBoard .-panel .-help{position:relative;top:0;display:flex;align-items:center;justify-content:center;background-color:#fff;width:auto;height:4vmin;padding:0 calc(4vmin / 2);margin-left:calc(4vmin / 2);color:#000;cursor:pointer;border-radius:0.5vmin;text-align:center}.gameBoard .-panel .-goto:active,.gameBoard .-panel .-undo:active,.gameBoard .-panel .-help:active{top:calc(4vmin / 20)}

.goto-form{margin-top:2vmin}.goto-form .-input-container{display:flex;flex-direction:row;align-items:center}.goto-form .-input-container .-input{width:100%;font-size:2vmin}

.modal-container{position:absolute;top:0;left:0;width:100%;height:100vh}.modal-container .mask{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;z-index:101;height:100vh;background-color:rgba(0,0,0,0.5)}.modal-container .mask .modal-window{position:relative;height:auto;padding:2vmin;background-color:lightgrey;z-index:102;font-size:2vmin;user-select:none}.modal-container .mask .modal-window.large{width:80vmin}.modal-container .mask .modal-window.medium{width:50vmin}.modal-container .mask .modal-window.small{width:30vmin}.modal-container .mask .modal-window .modal-close{position:absolute;top:0.5vmin;right:0.7vmin;color:#555}.modal-container .mask .modal-window .modal-close:before{content:'✕';cursor:pointer}.modal-container .mask .modal-window .modal-close:hover{color:#000}.modal-container .mask .modal-window .modal{padding-right:2vmin}.modal-container .mask .modal-window .modal .modal-submit{display:flex;justify-content:center;margin-top:2vmin}.modal-container .mask .modal-window .modal .modal-submit .-button{font-size:2vmin;margin:0 1vmin}