:root{--visual-padding:0px}*{box-sizing:border-box}html,body{background:#222;height:100%;margin:0;overflow:hidden}#app{width:100vw;height:100vh;padding:var(--visual-padding);padding-bottom:calc(var(--visual-padding) + env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}#center-col{flex-direction:column;align-items:center;gap:8px;max-width:100%;min-height:0;max-height:100%;display:flex}#board-wrap{flex:none;justify-content:center;align-items:center;width:min(100vw,100vh - 80px);height:min(100vw,100vh - 80px);min-height:0;display:flex}#board{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform;width:100%;max-width:100%;max-height:100%;transition:transform .25s ease-out}#board>svg{width:100%;height:100%;display:block}#toolbar{color:#eee;background:#2a2a2a;flex:none;align-items:center;gap:8px;padding:8px 12px;display:flex}#toolbar button{color:#eee;cursor:pointer;touch-action:manipulation;background:#3a3a3a;border:1px solid #555;border-radius:6px;flex:none;min-width:48px;min-height:48px;font-size:24px;line-height:1}#toolbar button:active{background:#4a4a4a}#toolbar button:disabled{opacity:.4}#status{text-align:right;flex:auto;padding-right:4px;font:24px system-ui,sans-serif}#stones{pointer-events:none;position:absolute;inset:0}.stone.black{background:#170218}.stone.white{background:#e6edee;border:1px solid #333}