html,body{margin:0;padding:0;height:100%}body{margin:0;display:flex;justify-content:center;align-items:center;background:#6a6a6a}.gameScreenContainer{height:100%;max-height:800px;width:100%;max-width:450px;aspect-ratio:9/16;background:linear-gradient(to bottom right,#4c4c4c,#232323,#434343);display:flex;flex-direction:column;align-items:center;box-sizing:border-box;border-radius:10px}@media(orientation:portrait){.gameScreenContainer{width:100%;height:auto}}@media(orientation:landscape){.gameScreenContainer{width:auto;height:100%}}.canvasWrapper{position:relative;height:55%;width:98%;margin:1%;border-radius:110px}#gameCanvas{position:absolute;top:0;left:0;height:100%;width:100%;background:#b79292;border-radius:10px}#menuAreaTop{position:absolute;top:0;left:0;background-color:bisque;height:100%;width:100%;opacity:.5;border-radius:10px;z-index:2}.controllerAreaWrapper{position:relative;height:44%;width:98%;border-radius:10px;margin-bottom:1%}#controllerArea{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to bottom right,#e6e6e6,#c9c9c9,#a7a7a7);border-radius:10px}.topBottonContainer{display:flex;gap:1.5%;position:relative;width:100%;height:70%;padding:1%;box-sizing:border-box;border-top-left-radius:10px;border-top-right-radius:10px}.side.left{background:linear-gradient(to bottom right,#666,#474747,#585858);height:100%;width:50%;border-top-left-radius:10px;transition:transform .1s ease,background .1s ease;box-shadow:1px 1px 3px #000;cursor:pointer}.side.left:active{background:linear-gradient(to bottom right,#4f4f4f,#303030,#585858);transform:scale(.99)}.side.right{background:linear-gradient(to bottom right,#666,#474747,#585858);height:100%;width:50%;border-top-right-radius:10px;transition:transform .1s ease,background .1s ease;box-shadow:1px 1px 3px #000;cursor:pointer}.side.right:active{background:linear-gradient(to bottom right,#4f4f4f,#303030,#585858);transform:scale(.99)}.center{position:absolute;width:45%;aspect-ratio:1/1;background:linear-gradient(to bottom right,#e6e6e6,#c9c9c9,#b6b6b6);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) translateY(25%);display:flex;justify-content:center;align-items:center;z-index:1}.centerCenter{position:relative;width:90%;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(to bottom right,#666,#1b1b1b,#585858);border:1px solid rgb(255,255,255)}.moveBotton{position:absolute;background-color:#9c9c9c;display:flex;align-items:center;justify-content:center;border-radius:3%;z-index:3}.moveBottonCenter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#e4e4e4;width:53%;height:53%;z-index:2;display:flex;justify-content:center;align-items:center}.moveBottonCenterCenter{width:60%;aspect-ratio:1/1;border-radius:50%}.moveBotton.Top{top:10%;left:50%;transform:translate(-50%);width:52%;height:39%;border:1px solid rgb(255,255,255);clip-path:polygon(0 0,0 32%,50% 98%,100% 32%,100% 0);background:linear-gradient(to bottom right,#6e6e6e,#343434,#282828);transition:transform .1s ease,background .1s ease;cursor:pointer}.moveBotton.Top:active{background:linear-gradient(to bottom right,#5c5c5c,#1d1d1d,#3f3f3f)}.TopTriangle{background:linear-gradient(to bottom right,#fff,#a2fffd,#d3d3d3);width:22%;aspect-ratio:1/1;position:relative;top:-17%;clip-path:polygon(0 68%,50% 0,100% 68%)}.moveBotton.Bottom{bottom:10%;left:50%;transform:translate(-50%);width:52%;height:39%;clip-path:polygon(0 68%,0 100%,100% 100%,100% 68%,50% 2%);border:1px solid rgb(255,255,255);background:linear-gradient(to bottom right,#6e6e6e,#343434,#282828);transition:transform .1s ease,background .1s ease;cursor:pointer}.moveBotton.Bottom:active{background:linear-gradient(to bottom right,#606060,#1a1a1a,#292929)}.BottomTriangle{background:linear-gradient(to bottom right,#fff,#a2fffd,#d3d3d3);width:22%;aspect-ratio:1/1;position:relative;bottom:-17%;clip-path:polygon(0 32%,50% 100%,100% 32%)}.moveBotton.Left{left:10%;top:50%;transform:translateY(-50%);width:39%;height:52%;clip-path:polygon(0 0,0 100%,32% 100%,98% 50%,32% 0);border:1px solid rgb(255,255,255);background:linear-gradient(to bottom right,#6e6e6e,#343434,#282828);transition:transform .1s ease,background .1s ease;cursor:pointer}.moveBotton.Left:active{background:linear-gradient(to bottom right,#5c5c5c,#1d1d1d,#3f3f3f)}.LeftTriangle{background:linear-gradient(to bottom right,#fff,#a2fffd,#d3d3d3);height:22%;aspect-ratio:1/1;position:relative;left:-17%;clip-path:polygon(0 50%,68% 0%,68% 100%)}.moveBotton.Right{right:10%;top:50%;transform:translateY(-50%);width:39%;height:52%;clip-path:polygon(68% 0,100% 0,100% 100%,68% 100%,2% 50%);border:1px solid rgb(255,255,255);background:linear-gradient(to bottom right,#6e6e6e,#343434,#282828);transition:transform .1s ease,background .1s ease;cursor:pointer}.moveBotton.Right:active{background:linear-gradient(to bottom right,#5c5c5c,#1d1d1d,#2b2b2b)}.RightTriagnle{background:linear-gradient(to bottom right,#fff,#a2fffd,#d3d3d3);height:22%;aspect-ratio:1/1;position:relative;right:-17%;clip-path:polygon(32% 0%,100% 50%,32% 100%)}.bottomBottonContainer{height:30%;width:100%;border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:flex;justify-content:center;align-items:center;flex-direction:column}.startButtonContainer{width:98%;height:29%;display:flex;align-items:center;padding-left:10%;box-sizing:border-box}#startButton{width:20%;height:55%;border-radius:20px;background:linear-gradient(to bottom right,#b0b0b0,#676767,#b2b2b2);box-shadow:2px 2px 2px #595959;margin-top:-.85%;border:1px solid black;transition:transform .1s ease,background .1s ease;cursor:pointer}#startButton:active{background:linear-gradient(to bottom right,#8a8a8a,#414141,#8b8b8b);transform:scale(.96)}#myMonsterContainer{background:linear-gradient(to bottom,#fff,#a9a9a9,#fff);width:98%;height:70%;margin-bottom:1%;border-radius:10px;border:1px solid black;padding:1% 0;box-shadow:1px 1px 1px #181818;display:flex;justify-content:space-evenly;align-items:center;flex-direction:row;box-sizing:border-box}.eachThumbnail-container{position:relative;width:15%;height:100%;background-color:#b4b4b4;display:flex;justify-content:center;align-items:center;border-radius:5px;border:1px solid rgb(59,59,59);overflow:hidden;box-shadow:1px 1px 1px #181818}.party-thumbnail{width:100%}.hp-bar-bg{position:absolute;bottom:2%;left:50%;transform:translate(-50%);height:10%;background-color:gray;border:1px solid black;border-radius:3px;width:90%}.hp-bar-fg{position:absolute;bottom:2%;left:5%;height:10%;border-radius:3px}#menuAreaBottom{position:absolute;top:0;left:0;background-color:#86a285;height:100%;width:100%;border-radius:10px;z-index:2}#battleScreen{position:absolute;top:0;left:0;background:linear-gradient(to bottom right,#e6e6e6,#c9c9c9,#a7a7a7);height:100%;width:100%;border-radius:10px;z-index:2;padding:.5%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}#battleScreenBottomArea{width:100%;height:100%;background-color:sienna;border-radius:10px;display:flex;justify-content:center;align-items:center}#commandContainer{height:100%;width:30%;background:linear-gradient(to bottom right,#d3d3d3,#a4a4a4,#b7b7b7);display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:inset 0 0 10px #00000080}#selectedMonsterDataContainer{background-color:#2c2c2c;height:25%;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box}.selectedMosnterThumbnailContainer{height:72%;aspect-ratio:1/1;background-color:#b4b4b4;display:flex;justify-content:center;align-items:center;border-radius:50%;border:1px solid rgb(59,59,59);box-shadow:1px 1px 1px #181818;overflow:hidden}#selectedMonsterThumbnail{height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-direction:row;box-sizing:border-box}.selectedMonsterThumbnail{height:100%}#selectedDataContainer{height:100%;width:70%;background:linear-gradient(to bottom right,#d3d3d3,#a4a4a4,#b7b7b7);border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:inset 0 0 10px #00000080}#fight-battle,#myMonsters-battle,#items-battle,#escape-battle,#goBack-battle{background:linear-gradient(to bottom right,#8b8b8b,#252525,#505050);width:80%;height:10%;display:flex;justify-content:center;align-items:center;border-radius:7px;font-size:90%;border:1px solid rgb(255,255,255);color:#d7d7d7;box-shadow:1px 1px 1px #fff}#skillButtons1{background-color:#73f68d;height:100%;width:100%;border-radius:10px;border:3px solid black;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-content:flex-start;gap:2%;padding:2% 0;box-sizing:border-box}.skill-button{width:45%;height:20%;display:flex;justify-content:center;align-items:center;border-radius:10px;border:3px solid black}#goBackBtn1{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background-color:#8cb695;padding:10px 20px;border-radius:5px;cursor:pointer;z-index:3}#myMonstersBtn2{background-color:#e5f673;height:100%;width:100%;border-radius:10px;display:flex;align-items:center;box-sizing:border-box}.monsterIconsContainer-Left{width:50%;height:100%;background-color:violet;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}.monsterIconsContainer-Right{width:50%;height:100%;background-color:#8ac468;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}.eachMonsterIconContainer{background-color:#1a1a1a;width:90%;height:32%;border:4px solid transparent;border-radius:10px;box-sizing:border-box;overflow:hidden;position:relative}.monster-icon{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transform-origin:center}.active-monster{border-color:#01f}.select-target{border-color:red}#swapBtn2{position:absolute;bottom:10px;left:0%;transform:translate(-50%);background-color:#b85fcc;padding:10px 20px;border-radius:5px;cursor:pointer;z-index:3}#goBackBtn2,#goBackBtnSwapPage{position:absolute;bottom:10px;left:100%;transform:translate(-50%);background-color:#b0b68c;padding:10px 20px;border-radius:5px;cursor:pointer;z-index:3}#nextMessageBtn{position:absolute;top:0;left:0;background-color:#f673e7;height:100%;width:100%;border-radius:10px;z-index:2}.hidden{display:none!important}