:root{--card-width: max(8vmin, 80px);--card-outline: calc(var(--card-width) * .05);--card-gap: calc(var(--card-width) * .1);--table-color: hsl(350 70% 40%);--table-outline: hsl(0 0% 92% / .6)}*{box-sizing:border-box;touch-action:none;transform-style:preserve-3d}body{display:grid;place-items:center;min-height:100vh;text-align:center;background:var(--table-color);font-family:sans-serif,system-ui}.table{transform:translateZ(100vmin)}.shuffle-button{transition:transform .1s;transform:translateY(var(--y, 0)) scale(var(--scale, 1));background:#8a0f24;border:2px solid white;padding:8px 16px;color:#fff;font-weight:700}.shuffle-button:hover{--y: -10%;--scale: 1.1}.shuffle-button:active{--y: 5%;--scale: .9}label{color:#fff}[type=range]{accent-color:hsl(215 50% 85%)}.shuffler__controls{display:flex;flex-direction:column;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.control-group{position:absolute;top:calc(100% + 1rem);left:50%;transform:translate(-50%)}.shuffler__placeholder,.card--placeholder{pointer-events:none}img{height:100%;width:100%}.river__cards{--rotate: 0deg;display:grid;position:absolute;grid-auto-flow:column;gap:var(--card-gap);top:50%;left:50%;transform:translate(-50%,-50%)}button{cursor:pointer}[aria-pressed=true]{--rotate: 180deg}.card{transform-style:preserve-3d;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:var(--card-width);aspect-ratio:40 / 58;order:var(--order);position:relative;background:transparent;padding:0;transform:rotateY(var(--rotate, 0deg));transition:transform .2s}.card__side{position:absolute;inset:0}.card__side--front{backface-visibility:hidden;z-index:2}.card__side--back{z-index:1;transform:rotate(180deg)}.table .table__shuffler{position:relative;margin-top:10vmin;padding:calc(var(--card-width) * .25) calc(var(--card-width) * .5);border-radius:var(--card-gap);border:var(--card-outline) solid var(--table-outline);display:inline-flex}.shuffler__placeholder{display:inline-grid;grid-template-columns:repeat(5,calc(var(--card-width) * .5));place-items:center}.shuffler__cards{--rotate: 180deg;place-items:center;display:inline-grid;grid-template-columns:repeat(5,calc(var(--card-width) * .5));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.shuffler__cards .card__side--front{display:none}.river{border-radius:var(--card-gap);position:relative;padding:calc(var(--card-width) * .5);border:var(--card-outline) solid var(--table-outline)}.river__placeholder{display:flex;gap:var(--card-gap);z-index:-1}.river__placeholder .card{background:transparent;border:var(--card-outline) solid var(--table-outline)}