*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}img{display:block;width:100%;height:auto}html{overflow:clip}body{display:grid;place-items:center;height:100dvh;background:linear-gradient(#1c121a,#7573d3);font-family:Bungee Spice,sans-serif;font-weight:400;font-style:normal;overflow:clip}.game{display:grid;grid-template-columns:100%;gap:1rem}.game-header{display:flex;justify-content:space-between;align-items:baseline}.game-turns{color:#fff;font-family:Bungee Spice,sans-serif;font-weight:400;font-style:normal}.game-complete{position:absolute;inset:0;display:grid;place-items:center;place-content:center;background:#000;backdrop-filter:blur(6px);animation:jello-vertical .9s both;box-shadow:0 0 0 100vmax #000;h2{font-size:7vmin;margin-bottom:3rem}p{font-size:3vmin}._turns{font-size:10vmin}a{margin-top:3rem;font-size:8vmin;text-decoration:none;transition:.25s;will-change:scale;&:hover{scale:1.1}}}.grid{--color-border: rgba(255, 255, 255, .25);display:inline-grid;grid-template-columns:repeat(var(--size, 4),20vmin);grid-auto-rows:20vmin;border:2px solid var(--color-border);.card{order:var(--_i);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--color-border);cursor:pointer;transition:.25s;user-select:none;img{opacity:0;scale:.2;height:75%;width:75%;object-fit:contain;transition:.25s;user-select:none}@media (pointer: fine){&:hover{z-index:1;outline:2px solid orange}}&.flipped{opacity:1!important;color:#000!important;font-size:2rem;font-weight:700;pointer-events:none;img{opacity:1;scale:1}}&.cleared{pointer-events:none;img{opacity:.1;scale:1}}}}@keyframes jello-vertical{0%{transform:scaleZ(1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}to{transform:scaleZ(1)}}