body{margin:0;padding:0;height:100dvh;width:100%;background-color:#fff;background-image:url(/images/bg.png);touch-action:none;overflow:hidden}#controls{position:absolute;top:0;left:0;padding:1rem;z-index:1000}button{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;font-weight:400;display:inline-block;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0px .5rem;border-radius:4px;text-decoration:none;cursor:pointer;background-color:#f9fbfa;border:1px solid rgb(137,151,155);box-shadow:#0616214d 0 1px 2px;color:#3d4f58;height:2rem;-webkit-user-select:none;user-select:none;margin-right:.5rem}button:hover{color:#3d4f58;background-color:#fff;border:1px solid rgb(93,108,116);box-shadow:#e7eeec 0 0 0 2px}button:active{background-color:#edf1f2;border:1px solid rgb(93,108,116);box-shadow:#0616211a 0 1px 1px inset;transform:translateY(1px)}#viewport{position:absolute;width:100%;height:100%;transform-origin:0 0;cursor:move;will-change:transform}.deck{position:relative;height:100dvh;display:flex;justify-content:center;align-items:center}.card{position:absolute;width:100px;height:170px;border-radius:.3125rem;background:#118299 url(/images/cards/back.png);background-size:100% 100%;box-shadow:0 0 0 1px #c8c8c8,1px 1px #c8c8c8;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform}.card img{width:100%;height:100%;border-radius:.3125rem;object-fit:contain}.card.dragging{cursor:grabbing}.card.flipped img{display:none}.card.reversed img{transform:rotate(180deg)}