.playArea-wrapper--start{transform:translate(100%)}.playArea-wrapper--enter{animation:slideIn 1s forwards;animation:slideIn 1s backwards}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.card-wrapper{position:relative;display:grid;aspect-ratio:3 / 5;width:33.333333%;min-width:8rem;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));--tw-brightness: brightness(1);--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.card-wrapper:enabled{cursor:pointer}.card-wrapper:hover:enabled{--tw-translate-y: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-brightness: brightness(1.05);--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.card{grid-column:1 / -1;grid-row:1 / -1;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform-origin:center;transform-style:preserve-3d;backface-visibility:hidden}.card--back{position:absolute;height:100%;width:100%;padding-left:.5rem;padding-right:.5rem;transform:rotateY(0)}.card--front{position:absolute;height:100%;width:100%;padding-left:.5rem;padding-right:.5rem;transform:rotateY(180deg)}.card-chosen{--tw-translate-y: -.5rem;--tw-scale-x: 1.02;--tw-scale-y: 1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-brightness: brightness(1.05);--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.card-chosen:hover{--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.card-flip--front{animation:flip .75s forwards;transform-style:preserve-3d;perspective:450px;backface-visibility:hidden}.card-flip--back{--tw-translate-y: 0px;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:flip-back .75s forwards;transform-style:preserve-3d;perspective:450px;backface-visibility:hidden}@keyframes flip{0%{transform:rotateY(180deg) scale(1);perspective:450px}to{transform:rotateY(0) scale(1);perspective:450px}}@keyframes flip-back{0%{transform:rotateY(0) scale(1);perspective:450px}to{transform:rotateY(180deg) scale(1);perspective:450px}}