*{box-sizing:border-box;margin:0;padding:0}html{overflow:hidden}body{font-family:Arial,sans-serif;line-height:1.6;color:#fff;background-color:#22242a;background:linear-gradient(to bottom,#2f3640,#333);-webkit-user-select:none;user-select:none;overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}#contenedor{display:flex;flex-direction:column;align-items:center;height:100vh;width:500px;text-align:center;transform-style:flat!important}.finish-turn{margin-top:20px;padding:12px 24px;border:none;border-radius:8px;background-color:#333;color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:0 4px 8px #0000004d;outline:none;transition:1s ease-in;position:absolute;left:5%;top:15%}#finish-turn:hover{background-color:#555;box-shadow:0 6px 12px #0006}.lives{transition:1s ease-in}.lives div{position:absolute;display:flex}.lives #hero-lives{bottom:35%;left:87%}.lives #enemy-lives{top:35%;left:0%}.disabled{background-color:#0006!important;cursor:no-drop!important}.pointer{cursor:pointer!important}@media (max-width: 768px){#board{height:70vh}}@media (max-width: 480px){#board{height:80vh}}@keyframes latido{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}#hero{position:fixed;bottom:150px;scale:1.3;display:inline-block}#enemy{position:fixed;top:2%;opacity:0;transition:transform 1s ease,opacity 1s ease;z-index:10;display:inline-block}.tooltip{position:absolute;background-color:#3333339f;color:#fff;padding:10px 15px;border-radius:10px;z-index:1000;width:300px;pointer-events:none;opacity:0;transition:opacity .3s ease;margin-top:-20px;margin-left:-25px;box-shadow:0 0 10px #00000080}.tooltip.show{transform:translateY(0);opacity:1}.tooltip:after{content:"";position:absolute;top:100%;left:10%;margin-left:-15px;border-width:10px;border-style:solid;border-color:#3333339f transparent transparent transparent}.opacity{opacity:0}.absolute{position:absolute;top:0}#scene{pointer-events:auto!important}.board{display:flex;flex-direction:column;align-items:center;position:absolute;border:10px solid #1B1E22;background-color:#1b1e22;transform-origin:center;top:50%;left:50%;transform:translateY(-50%) translate(-50%);width:60%}#board{position:relative;height:100vh;width:100%;top:-35px;transition-duration:.5s}.perspective{transform:perspective(550px) rotateX(35deg) rotate(0)!important}.board-rotate{transform:rotate(-90deg);transform-origin:0% 50%;transition:transform .5s}.highlighted{box-shadow:0 0 5px #19a80066,0 0 10px #19a80033,0 0 15px #19a8001a;background:#00a51919!important}.highlightedBloqued{background:#65000083!important}.fila{display:flex;width:100%}.casilla{width:100px;height:100px;background-color:#22242a;display:flex;justify-content:center;align-items:center;font-size:36px;font-weight:bolder;cursor:pointer;color:#fff;margin:5px;cursor:initial;color:transparent}.casilla:not(:empty){color:#fff}.transition{transition:.2s ease-in}.casilla.eliminar{box-shadow:0 0 5px #a8000066,0 0 10px #a8000033,0 0 15px #a81c001a}.casilla.eliminar:hover{box-shadow:0 0 5px #19a80066,0 0 10px #19a80033,0 0 15px #19a8001a;background:#00a51919!important;cursor:pointer}.casilla:hover{background-color:#0000000d}.winColor{color:#115011!important;font-weight:bolder}.loseColor{color:#501111!important;font-weight:bolder}.win,.win:hover{background-color:#115011!important}.lose,.lose:hover{background-color:#501111!important}.backgroundGreen{background-color:#5c985cc3!important}.backgroundGreen:hover{background-color:#205e20!important;transition:.5s;font-size:26px}.deck{position:absolute;right:0;bottom:5%;width:100px;height:150px;transition:1s ease-in}.perspective .pile{transform:scale(.7)}.discarted{position:absolute;left:0;bottom:5%;width:100px;height:150px;z-index:10;opacity:.5;fill:#ccc}.pile .carta{position:absolute;cursor:grab}.carta svg{pointer-events:none}#discarted .carta{cursor:initial!important}.pila-robable{animation:latido 1.5s ease-in-out infinite;cursor:grab!important;box-shadow:0 0 4px #f0c80066,0 0 8px #f0c80033,0 0 12px #f0c8001a,inset 0 0 4px #f0c80066;animation:glow 1s infinite;background-color:#f0c80033}.deck .pila-robable:hover{top:-2px}@keyframes glow{0%{box-shadow:0 0 4px #f0c80033,0 0 8px #f0c8001a,0 0 12px #f0c8000d,inset 0 0 4px #f0c80033}50%{box-shadow:0 0 6px #f0c80066,0 0 12px #f0c80033,0 0 18px #f0c8001a,inset 0 0 6px #f0c80066}to{box-shadow:0 0 4px #f0c80033,0 0 8px #f0c8001a,0 0 12px #f0c8000d,inset 0 0 4px #f0c80033}}.discard-counter{display:flex;flex-wrap:wrap;justify-content:center;position:absolute;top:40%;right:10%;perspective:500px}.discard-counter .token{position:absolute;width:20px;height:20px;border-radius:50%;box-shadow:0 0 10px #0003;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:700;color:#333}.token-count{position:absolute;top:45%;right:-5%;padding-top:20px;transition:1s ease-in}@keyframes caida{0%{transform:translateZ(1px) translateY(-20px);opacity:0}to{transform:translateZ(1px) translateY(0);opacity:1}}.token-animation-container{position:absolute;top:-25px;left:75px;font-size:1em}.hand{display:flex;flex-wrap:wrap;justify-content:center;width:100%;height:10vh;color:#fff}.carta{width:100px;height:150px;border:2px solid #2f2f2f;border-radius:10px;background-color:#222;display:flex;justify-content:center;align-items:center;font-size:24px;margin:-5px;color:#fff;cursor:auto;transition:1s ease}.carta.custom{border:2px solid #6c5ce7!important;box-shadow:0 0 10px #695ce7b3!important;animation:border-glow 1s infinite}@keyframes border-glow{0%{border-color:#6c5ce7;box-shadow:0 0 10px #695ce7b3}50%{border-color:#8e7ce7;box-shadow:0 0 15px #695ce7e6}to{border-color:#6c5ce7;box-shadow:0 0 10px #695ce7b3}}#hero .carta{cursor:grab}#hero .carta:hover{scale:1.2;bottom:50px;z-index:10;border:2px solid #2f2f2f;border-radius:10px;box-shadow:0 0 10px #00000080;animation:border-pulse 1s infinite}@keyframes border-pulse{0%{border-color:#2f2f2f;box-shadow:0 0 10px #00000080}50%{border-color:#3c3c3c;box-shadow:0 0 20px #000000b3}to{border-color:#2f2f2f;box-shadow:0 0 10px #00000080}}.card-animation{animation:slide-up .3s linear}@keyframes slide-up{0%{transform:translateY(100vh)}to{transform:translateY(0)}}.pixel-container{position:absolute;top:0;left:0;width:100%;height:100%}.pixel{position:absolute;width:2px;height:2px;background-color:#fff;border-radius:50%}#hero .carta,#enemy .carta{position:absolute}@media only screen and (max-width: 768px){#enemy{top:-150px}}.warning-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#333a;border:1px solid #444;padding:20px;border-radius:10px;box-shadow:0 0 10px #00000080}.warning-message{font-size:18px;font-weight:700;color:#fff;margin-bottom:10px}.close-button{background-color:#666;color:#fff;border:none;padding:10px 20px;font-size:16px;cursor:pointer}.close-button:hover{background-color:#777}.contenedor{width:500px;margin:40px auto;text-align:center;position:absolute}.cartas{display:flex;justify-content:space-between;margin-bottom:20px}.cartas .carta:hover{scale:1.2}#boton-elegir{background-color:#4caf50;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}#boton-elegir:hover{background-color:#3e8e41}#shop{width:60%}#shop .card-container{display:inline-block;margin-top:10%;top:50%;left:50%;transform:translate(-50%,-50%)}#nameContainer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}#nameContainer h1{font-size:48px;font-weight:700;margin-bottom:20px}#nameContainer .tres-en-raya{font-size:36px;margin-bottom:40px}#nameContainer .tres-en-raya span{margin:0}#nameContainer h2{margin-bottom:20px}#nameContainer input[type=text]{font-size:24px;padding:10px;border:none;border-radius:10px;box-shadow:0 0 10px #0003;margin-top:20px}#nameContainer button{font-size:24px;padding:10px;border:none;border-radius:10px;background-color:#4caf50;color:#fff;cursor:pointer}#deck-info-container{width:100%;height:100vh;padding:20px 15%;border-radius:10px;box-shadow:0 0 10px #0000004d;position:absolute;top:0;overflow:auto;background:linear-gradient(to bottom,#2f3640,#333);z-index:1000}#deck-type-info-container,#normal-card-values-container{display:flex;flex-wrap:wrap;justify-content:center}.row-container{display:flex;flex-wrap:wrap;justify-content:space-between}.card-container{display:flex;align-items:center;justify-content:center;margin:10px;border-radius:10px;text-align:center;position:relative}#normal-card-values-container .card-container{width:calc(33.33% - 20px)}.card-container .disabled{filter:grayscale(100%);opacity:.5}.card-container img{width:100%;height:150px;object-fit:cover;border-radius:10px 10px 0 0;box-shadow:0 0 10px #0000004d}.card-container .card-info{padding:10px;font-size:20px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#fff}#deck-info-container .disabled{filter:grayscale(100%);opacity:.5}.special-card-container .card-container{display:inline-block;margin:10px 10px 10px 50px}.card-container .count-container{font-size:28px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#fff;z-index:1;position:absolute;top:0}#deck-info-container .close-button{position:absolute;top:10px;right:10px;font-size:20px;cursor:pointer;color:#fff}#shop-container{position:absolute;margin:40px auto;background-color:#333;border:1px solid #444;border-radius:10px;box-shadow:0 0 10px #0006}#shop-container h1{margin-left:20px}.shop-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.shop-background img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}.shop-decorations{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.shop-decoration-left{position:absolute;top:0;left:-50px}.shop-decoration-right{position:absolute;top:0;right:-50px}.card-container-shop{display:flex;flex-wrap:wrap;justify-content:center}.token-balance{position:absolute;bottom:20px;left:20px;font-size:18px;color:#aaa}.token-balance{transition:all .3s ease-in-out}.token-balance.animate{transform:scale(1.1);color:#fff}#shop-container .close-button{float:right;top:0}.card-cost{margin-top:10px;text-shadow:0 0 2px rgba(0,0,0,.5);border:1px solid #666;border-bottom:2px solid #444}