@keyframes fade-out{0%{transform:translate(-100%);opacity:1}4%{transform:translate(0);opacity:1}50%{opacity:1}to{opacity:0}}.message-wrapper{position:absolute;bottom:calc((var(--space-2) + var(--card-height)) * 2);left:var(--space-2);max-width:25%}.message{font-size:1rem;color:#fff;background-color:#000000bf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:calc(var(--space-1) * 1.5) var(--space-2);border-radius:6px;box-shadow:2px 2px 8px #000000bf;margin-top:1rem;animation:fade-out 7s ease-in-out forwards}.hand-cards{position:relative;height:var(--card-height)}.hand-cards .card{position:absolute;transition:left .3s ease-in-out}.hand-cards .card:hover{cursor:pointer}.played-cards-wrapper{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:calc(15 * var(--space-2));padding-right:calc(15 * var(--space-2))}.played-cards-wrapper.active .played-cards{animation:pulsate-red 2s infinite}.played-cards-wrapper.active .played-cards:hover{background:red;cursor:pointer}.played-cards-wrapper .played-cards{width:var(--card-width);height:var(--card-height);border-radius:6px;position:relative;background-color:#00000026}.played-cards-wrapper .played-cards.completed .card{background-color:#0000004d;box-shadow:2px 2px 8px green}.played-cards-wrapper .played-cards .card{position:absolute}.played-cards-wrapper .played-cards .card:hover{z-index:81!important}.played-cards-wrapper .played-cards .card:nth-child(1){left:0;z-index:73}.played-cards-wrapper .played-cards .card:nth-child(2){left:calc(var(--space-2) * 2);z-index:74}.played-cards-wrapper .played-cards .card:nth-child(3){left:calc(var(--space-2) * 4);z-index:75}.played-cards-wrapper .played-cards .card:nth-child(4){left:calc(var(--space-2) * 6);z-index:76}.played-cards-wrapper .played-cards .card:nth-child(5){left:calc(var(--space-2) * 8);z-index:77}.played-cards-wrapper .played-cards .card:nth-child(6){left:calc(var(--space-2) * 10);z-index:78}.played-cards-wrapper .played-cards .card:nth-child(7){left:calc(var(--space-2) * 12);z-index:79}.played-cards-wrapper .played-cards .card:nth-child(8){left:calc(var(--space-2) * 14);z-index:80}.played-cards-wrapper .played-cards .card:nth-child(9){left:calc(var(--space-2) * 16);z-index:81}.player{position:absolute}.player .played-cards-wrapper{bottom:calc(var(--card-height) + var(--space-2) * 2)}.player .points{position:absolute;bottom:var(--space-2);left:0;transform:translate(-100%);font-size:1.2rem;color:#fff;padding:var(--space-1) var(--space-2);background-color:#0000004d;border-radius:6px}.player .card.not-selected{opacity:0}#player1{bottom:0;left:50%;transform:translate(-50%)}#player2{top:0;left:25%;transform:rotate(180deg) translate(50%) scale(.5)}#player2 .points{transform:rotate(180deg) translate(100%)}#player2 .card:hover{transform:rotate(180deg) scale(2)}#player3{top:0;left:75%;transform:rotate(180deg) translate(50%) scale(.5)}#player3 .points{transform:rotate(180deg) translate(100%)}#player3 .card:hover{transform:rotate(180deg) scale(2)}.end-turn-button,.cancel-button{position:absolute;bottom:calc((var(--space-2) + var(--card-height)) * 2);right:var(--space-2);padding:var(--space-1) var(--space-2);background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.end-turn-button:hover,.cancel-button:hover{background-color:#0056b3}.tutorial{position:absolute;top:0;left:0;width:100%;height:100vh;overflow-y:auto;display:flex;justify-content:center;align-items:center;z-index:101;padding:2rem;background-color:#00000080}.tutorial>div{background-color:#ffffffe6;margin:auto;width:100%;max-width:640px;padding:1rem;box-shadow:2px 2px 8px #00000080;border-radius:12px}.tutorial>div img{width:16%;height:auto;border-radius:6px}.tutorial>div button{background-color:red;color:#fff;padding:calc(var(--space-1)) var(--space-2);border-radius:6px;border:none;cursor:pointer;font-size:1rem;margin-top:1rem}.tutorial>div button:hover{background-color:#8b0000}:root{font-size:16px;--card-width: 14vh;--card-height: 21vh;--space-1: .5rem;--space-2: 1rem}html,body{font-family:sans-serif;margin:0;background-image:url(/background.jpg);background-size:cover;background-repeat:no-repeat;height:100vh;width:100%;overflow:hidden}*{box-sizing:border-box}img{max-width:100%;height:auto}.card{width:var(--card-width);height:var(--card-height);background-image:url(/card-back.png);background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:3px 3px 5px #0000001a;cursor:pointer;transition:transform .2s;border-radius:6px}.card .card-name{width:100%;height:100%;text-align:center;background-color:#0000001a;color:#fff3;padding:calc(2 * var(--space-2)) var(--space-1);font-size:1.5rem;border-radius:6px;word-break:break-all}.card:hover{transform:scale(1.1)}@keyframes pulsate-red{0%{box-shadow:0 0 #ff0000b3}50%{box-shadow:0 0 1rem .5rem #ff0000b3}to{box-shadow:0 0 #ff0000b3}}.pulsed{animation:pulsate-red 2s infinite}#draw-stack{position:absolute;top:calc(50% - var(--card-height) / 1.1);left:50%;z-index:70;background-color:#00000026;width:var(--card-width);height:var(--card-height);border-radius:6px}#draw-stack .card{position:absolute;top:0;left:0}#discard-stack{position:absolute;top:calc(50% - var(--card-height) / 1.1);left:calc(50% - var(--card-width) - var(--space-2));background-color:#00000026;width:var(--card-width);height:var(--card-height);border-radius:6px;z-index:70}#discard-stack .card{position:absolute;top:0;left:0;z-index:100}.game-info{position:absolute;top:calc(var(--space-2) * 2);left:calc(var(--space-2) * 2);z-index:80;color:#fff;font-size:1.2rem;padding:var(--space-1) var(--space-2);background-color:#00000080;border-radius:6px}