@import"https://fonts.googleapis.com/css2?family=Gloock&family=Metal+Mania&family=Nosifer&family=Orbitron:wght@500&family=Pixelify+Sans&family=Roboto:wght@100;400;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Gloock&family=Metal+Mania&family=Montserrat:wght@900&family=Nosifer&family=Orbitron:wght@500&family=Pixelify+Sans&family=Roboto:wght@100;400;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Gloock&family=Metal+Mania&family=Nosifer&family=Orbitron:wght@500&family=Pixelify+Sans&display=swap";.bodyWinning{width:100vw;height:100vh;background-color:#000000b3;position:fixed;z-index:150;display:flex;justify-content:center}.winningPhotoCointainer{width:350px;height:100%;position:relative;display:flex;flex-direction:column;align-items:center}.photoContainer{width:100%;height:100%}.photoContainer img{width:100%;height:100%;object-fit:contain}.bodyWinning.showUp{display:flex}.bodyWinning.showHide{display:none}.textContainer.bubbleContent,.voiceActor{color:#fff}:root{--fonts-Roboto: "Roboto";--fonts-Montserrat: "Montserrat";--color: rgba(66, 46, 48, 1)}.bubbleTextContainer{position:absolute;bottom:10%;width:80vw;height:40%;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}.bubbleText{width:max(60%,300px);height:max(30%,300px);background-color:var(--blur-color);border:3px solid var(--solid-color);display:flex;justify-content:center;align-items:center;position:relative;clip-path:polygon(0% 100%,0% 15%,5% 0%,100% 0%,100% 85%,95% 100%);cursor:default}.bubbleText:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);filter:blur(5px);background-color:var(--blur-color)}.bubbleContent p{opacity:0}.bubbleAcs{display:flex;justify-content:center;align-items:center;position:absolute;width:max(45%,200px);height:15%;background-color:var(--solid-color)}.bubbleAcs h2{font-family:var(--fonts-Montserrat);font-size:18px;font-weight:900}.titleName{color:#fff;left:0%;top:-1%;clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 0%,80% 100%)}.titleVoice{bottom:-1%;right:0;width:max(60%,200px);clip-path:polygon(0% 100%,20% 0%,100% 0%,100% 0%,100% 100%)}.closeBubble{animation:kelapKelip 1s linear infinite;margin-top:10px}.voiceIcon{width:25px;height:25px;cursor:pointer}.voiceIcon img{width:100%;height:100%;object-fit:contain}.voiceActor{font-family:Courier New,Courier,monospace;margin-left:5%;padding-top:5px;font-weight:bolder;font-size:12px}.bubbleTextContainer.bubbleShow .bubbleText{animation:showUp .5s ease-in forwards}.bubbleTextContainer.bubbleShow .bubbleContent p{animation:textOpacityShow .5s .5s ease-in forwards}.bubbleTextContainer.bubbleHide .bubbleText{animation:showHide .5s .5s ease-in forwards}.bubbleTextContainer.bubbleHide .bubbleContent p{animation:textOpacityHide .5s ease-in forwards}@keyframes kelapKelip{0%{opacity:.5}to{opacity:1}}@keyframes textOpacityShow{0%{opacity:0}to{opacity:1}}@keyframes textOpacityHide{0%{opacity:1}to{opacity:0}}@keyframes showUp{0%{width:0vw}to{width:max(60%,300px)}}@keyframes showHide{to{border:none;width:0vw}0%{width:max(60%,300px)}}@media (max-width: 430px){.titleName{top:-1%}.titleName h2{font-size:13px}.titleVoice{bottom:-1%}.titleVoice p{font-size:8px}.textContainer.bubbleContent p{font-size:12px}}:root{--fonts-Gloock: "nosifer";--fonts-Metal-Mania: "Metal Mania";--fonts-Pixelify-Sans: "Pixelify Sans";--fonts-Orbitron: "Orbitron"}:root{--engineering-orange-ghotic: #66225588;--imperial-ghotic: #66227799;--red-cmyk-ghotic: #77557777;--bittersweet-ghotic: #66002266;--chocolate-cosmos-ghotic: #00000055;--engineering-orange: rgba(186, 0, 0, 1);--imperial-red: rgb(255, 113, 110);--red-cmyk: rgb(255, 112, 107);--bittersweet: rgba(254, 79, 77, 1);--off-red-rgb: rgba(243, 9, 2, 1);--black: rgba(10, 3, 6, 1);--chocolate-cosmos: rgba(65, 11, 24, 1);--black-2: rgba(9, 4, 18, 1);--green-light-blue: #5ddcff;--green-shadow-blue: #0f5d72;--shadow-purple-light: #3c67e3;--solid-purple-half-dark: #4e00c2;--solid-purple-half-active: #7d2ff1;--square-rotating-color-1: var(--green-light-blue);--square-rotating-color-2: var(--solid-purple-half-dark);--square-rotating-color-3: var(--engineering-orange-ghotic);--square-rotating-color-1-disabled: var(--imperial-red);--square-rotating-color-2-disabled: var(--chocolate-cosmos);--square-rotating-color-3-disabled: var(--bittersweet);--box-shadow-1: var(--green-light-blue);--box-shadow-2: var(--solid-purple-half-dark);--history-title-text: var(--green-light-blue);--container-background: #212121;--character-overview: var(--shadow-purple-light);--character-overview-disabled: var(--engineering-orange-ghotic);--box-shadow-not-disabled: var(--green-light-blue);--box-shadow-disabled: var(--engineering-orange-ghotic);--P1-color: var(--solid-purple-half-active);--P2-color: var(--bittersweet);--P1-char-border: var(--solid-purple-half-dark);--P2-char-border: var(--off-red-rgb);--border-active: var(--green-light-blue);--not-unique-text-color: var(--green-light-blue)}@property --rotate{syntax: "<angle>"; initial-value: 132deg; inherits: false;}:root{--card-height: 100px;--card-width: 100px}body{width:min(100vw);height:min(100vh);color:var(--not-unique-text-color);background-color:var(--black-2);background-image:url(/assets/BackgroundContainer-0fe96803.webp);background-size:cover;overflow-x:hidden}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--fonts-Metal-Mania)}.bodyContainer{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;color:var(--not-unique-text-color);position:relative}.gameContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:350px;height:min(100vh);position:relative;z-index:99}.board{display:flex;flex-wrap:wrap;width:304px;height:304px;position:absolute;top:25%}.statusText{position:absolute;top:calc(25% - 40px);text-align:center;margin-bottom:20px}.square{width:100px;height:100px;background-color:var(--container-background);border:2px solid transparent;position:relative;z-index:2;cursor:pointer;transform-style:preserve-3d;transition:all .5s ease}@keyframes flipped{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.square.flipOn{animation:flipped .5s ease-in forwards}.backSquare{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}.frontSquare{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg)}.square.gameStart:before{content:"";width:102px;height:102px;border-radius:5px;background-image:linear-gradient(var(--rotate),var(--square-rotating-color-1),var(--square-rotating-color-2) 43%,var(--square-rotating-color-3));position:absolute;z-index:-1;top:-2px;left:-3px;animation:spin 2.5s linear infinite}.square.gameOver:before{content:"";width:102px;height:102px;border-radius:5px;background-image:linear-gradient(var(--rotate),var(--square-rotating-color-1-disabled),var(--square-rotating-color-2-disabled) 43%,var(--square-rotating-color-3-disabled));position:absolute;z-index:-1;top:-2px;left:-3px;animation:spin 2.5s linear infinite}.square.gameStart:after{position:absolute;content:"";top:calc(var(--card-height) / 6);left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(.86);filter:blur(calc(var(--card-height) / 6));background-image:linear-gradient(var(--rotate),var(--square-rotating-color-1),var(--square-rotating-color-2) 43%,var(--square-rotating-color-3));opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}.square.gameOver:after{position:absolute;content:"";top:calc(var(--card-height) / 6);left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));background-image:linear-gradient(var(--rotate),var(--imperial-red),var(--chocolate-cosmos) 43%,var(--bittersweet));opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}@keyframes spin{0%{--rotate: 0deg}to{--rotate: 360deg}}.square img{background-color:#212121;width:100%;height:100%;object-fit:cover}.square.squareDisabled:before{background-image:linear-gradient(var(--rotate),var(--imperial-red),var(--chocolate-cosmos) 43%,var(--bittersweet))}.square.squareDisabled:after{background-image:linear-gradient(var(--rotate),var(--imperial-red),var(--chocolate-cosmos) 43%,var(--bittersweet))}.historyContainer{position:relative;display:flex;flex-wrap:wrap;background-color:var(--black-2);background-image:url(/assets/GhoticPattern3-e67ec6c1.jpg);width:90vw;margin-left:5vw;margin-top:5%;min-height:30vh;border-radius:20px;padding:max(2%,20px);color:var(--history-title-text)}.historyContainer:after{position:absolute;content:"";top:calc(var(--card-height) / 6);left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(1);filter:blur(calc(var(--card-height) / 5));background-image:linear-gradient(var(--rotate),var(--square-rotating-color-1),var(--square-rotating-color-2) 43%,var(--square-rotating-color-3));opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}.historyContainer ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;height:auto}.historyContainer ul li{margin-right:10px;margin-top:10px}.historyListContainer{overflow:hidden;border:2px solid var(--box-shadow-2);box-shadow:1px 1px 10px var(--box-shadow-1);border-radius:10px;width:50px;height:50px;cursor:pointer;transition:box-shadow .5s}.historyListContainer:hover{box-shadow:1px 1px 5px 2px var(--box-shadow-2)}.historyListContainer img{width:100%;height:100%;object-fit:cover}.playerPickerContainer{height:100vh;width:calc((100vw - 350px)/2);position:absolute;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.player1{top:0;left:0}.player2{top:0;right:0}.charactersListContainer{width:90%;height:min(60%);margin-top:20px;background-color:var(--container-background);background-image:url(/assets/GhoticPattern4-4ff85c44.jpg);background-size:cover;overflow-x:hidden;border-radius:10px}.overviewList{width:100%;height:auto;list-style:none;display:flex;flex-wrap:wrap;justify-content:center}.overviewList li{margin-right:10px;margin-top:10px}.characterOverview{width:100px;height:100px;border-radius:30px 0;overflow:hidden;background-color:var(--container-background);border:2px solid;cursor:pointer;transition:all .5s ease-in;position:relative}.charactersListContainer.P1.charNotDisabled .characterOverview{border-color:var(--P1-char-border);box-shadow:2px 2px 5px var(--P1-char-border)}.charactersListContainer.P2.charNotDisabled .characterOverview{border-color:var(--P2-char-border);box-shadow:2px 2px 5px var(--P2-char-border)}.characterOverview .overviewImage{width:100%;height:100%;opacity:.2;object-fit:cover}.lock{position:absolute;width:100%;height:100%;background-color:transparent}.lock img{width:100%;height:100%;object-fit:contain;opacity:0}.lock.locked img{opacity:.7}.charactersListContainer.charDisabled{box-shadow:0 15px 30px var(--box-shadow-disabled)}.charactersListContainer.P1.charNotDisabled{box-shadow:0 15px 30px var(--P1-color)}.charactersListContainer.P2.charNotDisabled{box-shadow:0 15px 30px var(--P2-color)}.playerPickerContainer.player1 h2{color:var(--P1-color)}.playerPickerContainer.player2 h2{color:var(--P2-color)}.charactersListContainer.P1 li.active .characterOverview,.charactersListContainer.P2 li.active .characterOverview{border-color:var(--border-active);box-shadow:2px 2px 5px var(--border-active)}.charactersListContainer.P1 li.active .characterOverview .overviewImage,.charactersListContainer.P2 li.active .characterOverview .overviewImage,.characterOverview.charNotDisabled:hover .overviewImage{opacity:1}.characterOverview.charDisabled{border-color:var(--character-overview-disabled);cursor:default}.characterOverview.charDisabled:hover .overviewImage{opacity:.2}.charactersListContainer.P1 .characterOverview.charNotDisabled:hover,.charactersListContainer.P2 .characterOverview.charNotDisabled:hover{border-color:var(--border-active);box-shadow:2px 2px 5px var(--border-active)}.characterOverview.charDisabled:hover{border-color:var(--character-overview-disabled)}.buttonStart{width:70%;height:65px;position:absolute;bottom:calc(10% + 20px);left:50px;animation:spin 2.5s linear infinite;clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%);display:flex;justify-content:center;align-items:center;transition:background-image 1s .5s ease-in,background-color 1s .5s ease-in;cursor:pointer;z-index:99}.buttonStart.gameOver{background-image:linear-gradient(var(--rotate),#5ddcff,#3c67e3 43%,#4e00c2)}.buttonStart.gameStart{background-image:linear-gradient(var(--rotate),var(--imperial-red),var(--chocolate-cosmos) 43%,var(--bittersweet))}.buttonStart button{width:calc(100% - 8px);height:calc(100% - 6px);outline:none;border:none;background-color:#212121;clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%);z-index:1;font-size:30px;font-family:var(--fonts-Gloock);color:var(--not-unique-text-color);cursor:pointer;transition:color 1s ease-in-out}.buttonStart.gameOver:hover{background-image:none;background-color:#5ddcff}.buttonStart.gameOver:hover button{color:#5ddcff}.buttonStart.gameStart:hover{background-image:none;background-color:var(--imperial-red)}.buttonStart.gameStart:hover button{color:var(--imperial-red)}.backButton{display:none}.mobilePlayerPickerContainer{width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:1}.popUpContainer{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0e090980;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}.popUp{width:max(60vw,300px);height:max(30vw,200px);background-image:linear-gradient(var(--rotate),#5ddcff,#3c67e3 43%,#4e00c2);animation:spin 2.5s linear infinite;display:flex;justify-content:center;align-items:center;position:relative;clip-path:polygon(0% 100%,0% 10%,5% 0%,100% 0%,100% 90%,95% 100%);cursor:default}.popUp:before{content:"";position:absolute;top:4px;left:4x;width:calc(100% - 8px);height:calc(100% - 8px);clip-path:polygon(0% 100%,0% 10%,5% 0%,100% 0%,100% 90%,95% 100%);background-color:#212121;z-index:101}.textContainer{width:90%;height:80%;position:relative;z-index:102}.textContainer h1{color:var(--bittersweet);font-family:var(--fonts-Orbitron);font-size:15px;margin-left:5%}.textContainer p{font-family:monospace;font-size:min(1.3vw,15px);text-align:center;margin-top:5%}.textContainer .quoteser{font-family:var(--fonts-Metal-Mania);font-size:20px}.closePopUp{position:absolute;bottom:50px}.popUpAcs{position:absolute;background-color:#4e00c2;width:20%;height:40%;z-index:102;clip-path:polygon(0% 100%,0% 0%,10% 10%,10% 70%,30% 90%,90% 90%,100% 100%)}.bottom{bottom:4px;left:4px;animation:backgroundColorChange 2.5s 2s linear infinite}.top{top:4px;right:4px;rotate:180deg;animation:backgroundColorChange 2.5s .5s linear infinite}@keyframes backgroundColorChange{0%{background-color:#4e00c2}50%{background-color:#5ddcff}to{background-color:#3c67e3}}.featuresContainer{position:absolute;top:3%;left:0;width:100vw;height:65px;display:flex;justify-content:center;z-index:103}.features-on-top{width:50px;height:50px;margin-top:10px;position:relative;cursor:pointer}.circle-icon{border-radius:50%;overflow:hidden;border:2px solid #3c67e3}.features-on-top img{width:100%;height:100%;object-fit:cover}.changeMusicController{margin-top:10px;width:50px;height:50px;cursor:pointer;transition:filter .5s ease}.changeMusicController:hover{filter:drop-shadow(2px 2px 15px #5ddcff)}.changeMusicController img{width:100%;height:100%;object-fit:cover}#backMusic{transform:rotate(90deg)}#nextMusic{transform:rotate(270deg)}.featuresContainerByReact{position:absolute;z-index:104;top:0;left:1%;width:auto;height:65px;display:flex}.popUpContainer.error{display:flex}.popUpContainer.noError{display:none}@media (min-height: 1000px) and (max-height: 1285px){.buttonStart{bottom:35vh}}@media (max-width: 430px){.historyContainer{margin-top:10%}.textContainer h1{font-size:12px}.textContainer p{font-size:8px;margin-top:5%}.textContainer .quoteser{font-size:15px}.closePopUp{position:absolute;bottom:25%}.playerPickerContainer{position:absolute;top:0;left:0;width:100vw;z-index:1;transition:all 1s linear}.mobilePlayerPickerContainer{width:100vw;height:100vh}.backButton{display:flex;width:70%;height:65px;position:absolute;bottom:20px;left:50px}.playerPickerContainer.player2.player1NonSelected{display:flex;left:100%}.playerPickerContainer.player2.player1Selected{display:flex;left:0%}.playerPickerContainer.player1.player1NonSelected{display:flex;left:0}.playerPickerContainer.player1.player1Selected{display:flex;left:-100%}.playerPickerContainer.player2.player1Selected.player2Selected,.playerPickerContainer.player1.player1Selected.player2Selected,.backButton.player2Selected,#backToLobbyButton{display:none}#backToLobbyButton button{font-size:15px}#backToLobbyButton.player2Selected{display:flex;bottom:0;z-index:99}.gameContainer.gameNotReady{display:none}.gameContainer.gameReady{display:flex}}