:root{--cardW:100px;--enemyCardW:100px}body{background-color:#131415;color:#f5f5f5;font-family:Arial,Helvetica,sans-serif;margin:0;padding:0}.wrapper{height:100vh;display:flex;flex-direction:column;justify-content:space-between}.cardArea{width:100%;max-height:40vh;padding:8px 0;overflow:scroll;flex-wrap:wrap}.cardArea,.deck{display:inline-flex;justify-content:center}.deck{position:relative}.deck>:not(:first-child){margin-left:calc(var(--cardW)*-.6)}.enemyDeck{margin:0 15px}.enemyDeck>:not(:first-child){margin-left:calc(var(--enemyCardW)*-.7)}.board{max-height:20vh;display:flex;align-items:center;justify-content:center}.board>div{margin:0 1%}.turnC:after,.turnC:before{background:red!important}.turnIndicator:after,.turnIndicator:before{content:"";position:absolute;top:-5px;background:linear-gradient(90deg,#01a6ff,#fff,#01a6ff);background:linear-gradient(90deg,green,green,#fff,green,green);background-size:40%;width:100%;height:5px;z-index:-1;animation:steam 8s linear infinite}.tipos:after,.tipos:before{inset:auto auto -5px auto}@keyframes steam{0%{background-position:0 0}to{background-position:400% 0}}.turnIndicator:after{filter:blur(5px)}.player{align-items:flex-end}.card-outer{position:relative;transform-style:preserve-3d;perspective:1000px;border:5px solid #fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);border-radius:4%;width:var(--cardW);aspect-ratio:1/1.7;max-height:calc(20vh - 10px)}.enemyDeck .card-outer{width:var(--enemyCardW)}.card-back,.card-front{transform-style:preserve-3d;width:100%;height:100%;backface-visibility:hidden}.card-front{font-size:1.9rem;position:relative;color:#fff;background-color:#01a6ff}.bf{transform:rotateY(180deg)}.card-back{position:absolute;top:0;background-color:#212223;background-image:linear-gradient(-45deg,transparent 75%,#d09595 75%),linear-gradient(45deg,transparent 75%,#d09595 75%),linear-gradient(135deg,transparent 75%,#d09595 75%),linear-gradient(-135deg,transparent 75%,#d09595 75%);background-size:calc(var(--cardW)/5) calc(var(--cardW)/5)}.enemyDeck .card-back{background-size:calc(var(--enemyCardW)/5) calc(var(--enemyCardW)/5)}#cardClone{float:left}.r{background-color:#fe5555;background:linear-gradient(45deg,#600000,#fe5555)!important}.g{background-color:#55aa59;background:linear-gradient(45deg,#316133,#55aa59)!important}.b{background-color:#01a6ff;background:linear-gradient(45deg,#002f49,#01a6ff)!important}.y{background-color:#ffaa01;background:linear-gradient(45deg,#926100,#ffaa01)!important}.d{background-color:#000;background:linear-gradient(45deg,#000,#191919)}.oval{position:absolute;background:#fff;inset:50% 50%;width:60%;aspect-ratio:1/2;border-radius:50%;box-sizing:border-box;border:5px solid #fff;transform:translate(-50%,-50%) rotate(45deg);backface-visibility:hidden;display:flex;flex-wrap:wrap;overflow:hidden}.oval>div{width:50%;height:50%}.tl{top:.1rem;left:.2rem}.br,.tl{position:absolute}.br{bottom:.1rem;right:.2rem;transform:rotate(180deg);backface-visibility:hidden}.card-outer:hover{border-color:green}.colorwheel{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.89);top:0;left:0}.colorwheel .oval{width:10%}.colorwheel .oval>div:hover{filter:brightness(190%)}.flexFF{display:flex;flex-wrap:wrap;margin-top:4%;justify-content:space-around;text-align:left}.landingPageWrapper{text-align:center}.roomCreated{margin:0 auto}.highlightText{color:red}@media screen and (max-width:600px){.card-outer{width:calc(var(--cardW)*.7);border-width:3px}.deck>:not(:first-child){margin-left:calc(var(--cardW)*-.4)}.enemyDeck .card-outer{max-width:calc(var(--cardW)*.4)}.colorwheel .oval{width:40%}}