html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.board-editor-grid{display:grid;flex-grow:1;max-width:100vw;max-height:100%;gap:.5rem}@media (orientation: landscape){.board-editor-grid{grid-template-columns:min(calc(100vh - 9em),calc(100% - 300px - .5rem)) minmax(300px,1fr);grid-template-rows:auto}.board-editor-board{display:flex;align-items:flex-start;justify-content:center;height:100%}.board-editor-controls{display:flex;align-items:flex-start;justify-content:center;min-width:300px}}@media (orientation: portrait){.board-editor-grid{grid-template-columns:1fr;grid-template-rows:1fr auto;min-width:300px;max-width:calc(100vw - 1rem)}.board-editor-board,.board-editor-controls{display:flex;align-items:flex-start;justify-content:center;min-width:300px;max-width:calc(100vw - 1rem);box-sizing:border-box}}.game-view-grid{display:grid;flex-grow:1;max-width:100vw;max-height:100%;gap:.5rem}@media (orientation: landscape){.game-view-grid{grid-template-columns:minmax(200px,30vw) minmax(min(calc(100vh - 18rem),calc(100% - 400px - 1rem)),1fr) minmax(200px,30vw);grid-template-rows:1fr auto;grid-template-areas:"player1 board player2" "controls controls controls"}}@media (orientation: portrait){.game-view-grid{grid-template-columns:1fr 1fr;grid-template-rows:calc(1fr - 2rem) auto auto;grid-template-areas:"board board" "player1 player2" "controls controls"}}.game-view-board{grid-area:board;display:flex;align-items:flex-start;justify-content:center;height:100%}.game-view-player1{grid-area:player1;display:flex;align-items:flex-start;justify-content:center}.game-view-player2{grid-area:player2;display:flex;align-items:flex-start;justify-content:center}.game-view-controls{grid-area:controls;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;min-width:100%;width:100%}:root{--bg-lighter: #e0edf8;--bg-light: #d4e5f5;--bg-medium: #b7ccec;--bg-dark: #b0c4e3;--bg-darker: #a5b8d8}*{font-family:Quicksand;font-weight:400}body{background-color:var(--bg-medium)}main{margin:.3rem}h1{margin:.8rem 0;text-align:center}h2{margin:.2rem 0}p{margin:0 0 .5em}button,input,select,textarea{margin-right:2px;border-color:#94a5be;border-width:1px;border-radius:5px}button,input[type=button],input[type=submit]{background-color:var(--bg-light)}input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),select,textarea{background-color:var(--bg-light)}input[type=checkbox],input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-light);width:1em;height:1em;border:1px solid #94a5be;display:inline-block;position:relative;vertical-align:middle}input[type=radio]{border-radius:50%}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"";position:absolute;background-color:#94a5be}input[type=checkbox]:checked:before{width:.6em;height:.6em;top:50%;left:50%;transform:translate(-50%,-50%)}input[type=radio]:checked:before{width:.5em;height:.5em;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}form>div{margin:.8em 0}.header-container{display:flex;align-items:center;gap:.5rem}@media (min-width: 768px){.header-container{gap:1rem}}.viewport{display:flex;flex-direction:column;flex-grow:1;height:calc(100vh - 1rem);max-height:calc(100vh - 1rem)}.panel{border-style:solid;border-color:#94a5be;border-width:1px;border-radius:.5em;padding:5px}.panel>.panel{flex:1}.controls{height:100%;width:100%}.controls>div{margin:.8em 0;flex:1}.controls>div:last-child{margin-bottom:0}.board-view-panel{display:flex;flex-direction:column;height:100%}.canvas-container{width:100%;height:0;padding-bottom:100%;min-height:200px;min-width:200px}table,th,td{border:solid;border-width:1px;border-color:#000;border-collapse:collapse;padding:3px}.menuItem{padding:.5em;display:block;text-decoration:none}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:flex-start;justify-content:center;padding-top:20vh;z-index:1000}.modal-content{background-color:#b7ccec;border-style:solid;border-color:#94a5be;border-width:1px;border-radius:.5em;padding:2rem;max-width:500px;text-align:center}