canvas{width:100%;height:100%;background-color:#000}.correct{background-color:#6aaa64!important}.present{background-color:#c9b458!important}.gmod{background-color:#0f52e4!important}.absent{background-color:#787c7e!important}.tile{width:100%;font-size:2rem;line-height:2rem;font-weight:700;vertical-align:middle;user-select:none;position:relative}.tile.filled{animation:zoom .2s}.tile .front,.tile .back{box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .6s;backface-visibility:hidden;-webkit-backface-visibility:hidden}.tile .front{border:2px solid #979ea7}.tile.filled .front{border-color:#999}.tile .back,.tile.revealed .front{transform:rotateX(180deg)}.tile.revealed .back{transform:rotateX(0)}@keyframes zoom{0%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-height: 680px){.tile{font-size:3vh}}.message{position:absolute;top:10%;left:50%;color:#fff;background-color:#000000d9;padding:16px 20px;z-index:2;border-radius:4px;transform:translate(-50%);transition:opacity .3s ease-out;font-weight:600}.message.v-leave-to{opacity:0}#board{display:grid;grid-template-rows:repeat(6,1fr);grid-gap:5px;padding:10px;box-sizing:border-box;--height: min(420px, calc(var(--vh, 100vh) - 50px));height:var(--height);width:min(350px,calc(var(--height) / 6 * 5));margin:0 auto}.row{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:5px}.shake{animation:shake .5s}@keyframes shake{0%{transform:translate(1px)}10%{transform:translate(-2px)}20%{transform:translate(2px)}30%{transform:translate(-2px)}40%{transform:translate(2px)}50%{transform:translate(-2px)}60%{transform:translate(2px)}70%{transform:translate(-2px)}80%{transform:translate(2px)}90%{transform:translate(-2px)}99%{transform:translate(1px)}}.jump .tile .back{animation:jump .5s}@keyframes jump{0%{transform:translateY(0)}20%{transform:translateY(5px)}60%{transform:translateY(-25px)}90%{transform:translateY(3px)}99%{transform:translateY(0)}}#keyboard{margin:20px 8px 0;user-select:none}.krow{display:flex;width:100%;margin:0 auto 8px;touch-action:manipulation}#keyboard button{font-weight:700;border:0;height:55px;margin:0 3px;border-radius:4px;cursor:pointer;user-select:none;color:#ccc;background-color:#444;flex:1;transition:all .2s 1.5s}button.big{flex:1.5}#info{position:absolute;right:10px;top:10px;width:30px;height:30px;border:1px #fff solid;border-radius:100%;color:#ccc;background-color:#111;cursor:pointer;user-select:none}svg path{fill:none;stroke:#fff;stroke-width:1.5}#help{position:absolute;top:5%;left:50%;color:#fff;background-color:#000000d9;padding:16px 20px;z-index:2;border-radius:4px;width:80vw;height:50%;overflow-y:auto;transform:translate(-50%);transition:opacity .3s ease-out}#help.v-leave-to,#help.v-enter-from{opacity:0}