:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;place-items:center;min-width:320px;min-height:100vh}#viewport{width:100%;min-height:100vh;display:grid;padding:1rem;box-sizing:border-box;gap:1rem;grid-template-columns:20rem 1fr}aside{background-color:#808873;border-radius:.5rem;padding:1rem}main{background-color:#074e0a;border-radius:.5rem;overflow:hidden;display:grid;padding:1rem;gap:1rem;grid-template-columns:1fr 3fr 1fr;grid-template-rows:repeat(3,1fr);grid-template-areas:"l t r" "l c r" "l b r"}.player{padding:1rem;border:3px dashed rgba(0,0,0,.2);border-radius:.5rem;display:flex}.player:nth-child(1){grid-area:b}.player:nth-child(2){grid-area:l}.player:nth-child(3){grid-area:t}.player:nth-child(4){grid-area:r}.cards{display:flex;width:max-content;margin:auto}.player:nth-child(1) .cards,.player:nth-child(3) .cards{flex-flow:row nowrap;padding:0 0 0 6rem}.player:nth-child(1) .card,.player:nth-child(3) .card{margin-left:-6rem;display:block}.player:nth-child(2) .cards,.player:nth-child(4) .cards{flex-flow:column nowrap;padding:10rem 0 0}.player:nth-child(2) .card,.player:nth-child(4) .card{margin-top:-10rem;transform:rotate(90deg)}.card{transition:all ease .2s;transform:translateY(0);width:9rem;display:block}.player:nth-child(1) .card:hover{transform:translateY(-2rem);cursor:pointer}#center{grid-area:c;border-radius:.5rem;position:relative}#center .card{top:50%;left:50%;position:absolute}#center .card[data-position="0"]{transform:translate(-50%,-50%) translateY(3rem) rotate(13deg)}#center .card[data-position="1"]{transform:translate(-50%,-50%) translate(-5rem) rotate(93deg)}#center .card[data-position="2"]{transform:translate(-50%,-50%) translateY(-4rem) rotate(-6deg)}#center .card[data-position="3"]{transform:translate(-50%,-50%) translate(4rem) rotate(92deg)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}