body{margin:0;padding:0;width:100vw;min-height:100vh;font:1em sans-serif;background-color:#000}.app{width:100vw;min-height:100vh;display:flex;justify-content:center;transition:background .2s ease;background:linear-gradient(45deg,#222,#333);z-index:-1;flex-flow:wrap}.app:before{transition:all ease .2s;position:absolute;content:"";display:block;min-height:100%;width:100vw;background:linear-gradient(45deg,#011,#233);z-index:0;opacity:0}.app.blue:before{opacity:1}.grid{flex:1;display:flex;flex-direction:column;transition:all .2s ease;outline:0px solid #622;z-index:2}.help{flex:1;z-index:2;color:#fff;padding:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.grid.errored{outline:30px solid #644}.row{display:flex}.cell{width:var(--square-size);height:var(--square-size);background-color:#555;box-sizing:border-box;border:1px solid #333}.cell-black{background-color:#000}.cell-blue{background-color:#244}.win{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:all .2s ease;z-index:3;opacity:0;color:#fff;pointer-events:none}.app.blue .win{background-color:#244}.app.black .win{background-color:#333}button{background-color:transparent;border-radius:10px;outline:2px solid white;color:#fff;padding:.5em 1em;margin:.5em;transition:all .1s linear;font-weight:700;font-size:large}button:hover{outline:4px solid white}.win.active{opacity:1;pointer-events:initial}