*{box-sizing:border-box;margin:0;padding:0}:root{--smallest-side:min(100vw, 100vh)}html{font-family:serif;font-size:calc(var(--smallest-side) * .025)}body{display:flex;justify-content:center;align-items:center;width:calc(100vw - (100vw - 100%));min-height:100vh;background-color:#000}.red{color:red}.black{color:#000}#gameboard,#ui{position:fixed;width:var(--smallest-side);height:var(--smallest-side)}#gameboard{background-image:url(imgs/table-1.jpeg);background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden}
@keyframes playerAppears{from{bottom:100%}to{bottom:0}}@keyframes playerRevealsHand{0%{bottom:0}5%{bottom:-1%}30%{bottom:200%}60%{bottom:200%}95%{bottom:-1%}100%{bottom:0}}@keyframes displayWinnerAnnouncement{from{opacity:0}to{opacity:1}}
#ui{display:flex;justify-content:center;align-items:center}#ui .btn{width:25%;height:2rem;margin-bottom:4.5rem;font-size:1rem;font-weight:bolder}#ui .btn:hover{transform:scale(1.125)}#ui .btn:active{transform:scale(1);opacity:.65}#winner-announcement{margin-bottom:4.5rem;padding:1rem;background-color:rgba(225,0,0,.3);border:.125rem dotted #fff;color:#fff;font-size:1rem;text-align:center;box-shadow:0 0 1rem rgba(225,0,0,.6);opacity:0;animation:displayWinnerAnnouncement .3s ease-in 1.5s 1 normal forwards}
.hand{list-style:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%,25%);width:75%;text-align:center;z-index:-1}.player[data-player="0"] .hand,.player[data-player="0"]>p{transform:translate(-50%,25%) rotate(180deg)}.card{position:relative;display:inline-block;margin:.25rem;padding:.5rem;border-radius:.3rem;width:calc(20% - .5rem);aspect-ratio:.7;overflow:hidden;background-color:#fff;font-size:1rem;text-align:center;pointer-events:none;box-shadow:0 .125rem .25rem rgba(0,0,0,.5)}.card::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0}.player.hiding-card .card::after{background-color:#000;border:1px solid #fff}.player:not(.hiding-card) .card::after{background-color:transparent;border:0 solid transparent;transition:background-color 0s linear 1s,border 0s linear 1s}.card .suit{margin-top:-.125rem;font-size:1.25rem;font-weight:bolder}.card .rank{font-size:.75rem;font-weight:400;color:#333}
.player{position:absolute;width:min(45vw,45vh);height:min(45vw,45vh);transform-origin:center top;border:transparent solid 0}.player .hand,.player>img{animation-timing-function:ease-in-out;animation-iteration-count:1;animation-direction:normal;animation-fill-mode:forwards}.player.hiding-card .hand,.player.hiding-card>img{bottom:100%;animation-name:playerAppears;animation-duration:.5s}.player:not(.hiding-card) .hand,.player:not(.hiding-card)>img{bottom:0;animation-name:playerRevealsHand;animation-duration:1.25s}.player[data-player="0"]{bottom:0;left:50%;transform:translate(-50%,100%) rotate(180deg)}.player[data-player="0"]>.hand,.player[data-player="0"]>img{animation-delay:0s}.player[data-player="1"]{top:0;left:50%;transform:translate(-50%,-25%) rotate(0)}.player[data-player="1"]>.hand,.player[data-player="1"]>img{animation-delay:125ms}.player[data-player="2"]{top:0;left:0;transform:translate(-80%,30%) rotate(-65deg)}.player[data-player="2"]>.hand,.player[data-player="2"]>img{animation-delay:375ms}.player[data-player="3"]{top:0;right:0;transform:translate(85%,30%) rotate(65deg)}.player[data-player="3"]>.hand,.player[data-player="3"]>img{animation-delay:.5s}.player[data-player="4"]{top:50%;left:0;transform:translate(-85%,70%) rotate(-105deg)}.player[data-player="4"]>.hand,.player[data-player="4"]>img{animation-delay:.25s}.player[data-player="5"]{top:50%;right:0;transform:translate(85%,65%) rotate(105deg)}.player[data-player="5"]>.hand,.player[data-player="5"]>img{animation-delay:625ms}.player>img{position:relative;bottom:100%;width:100%;height:100%}.player>p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.25rem;font-weight:bolder;color:#fff;outline:#000;text-shadow:0 0 5px #000,1px 0 5px #000,0 1px 5px #000,1px 1px 5px #000}.player:not(.hiding-card)>p::after{content:attr(data-hand-type);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.5rem;width:max-content;font-family:sans-serif;font-size:.65rem;font-weight:400;text-align:center;text-transform:uppercase;color:red;opacity:0;animation:displayWinnerAnnouncement .3s ease-in 1.5s 1 normal forwards}.player:not(.hiding-card)[data-is-winner=true]{transition:border .5s ease-in 1.5s;border:red solid .25rem}