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}.selectedMonsterNameHpBarCotnainer{position:absolute;top:0;left:130%;height:90%;opacity:0;width:0;display:flex;flex-direction:column;justify-content:space-between;z-index:3;transition:width .3s ease,opacity .3s ease}.open{width:315%;opacity:1}.selectedMonsterNameLevelContainer{width:100%;height:50%;display:flex;flex-direction:row;justify-content:space-between;padding-left:5%;padding-right:5%;box-sizing:border-box}.selectedMonsterName,.selectedMonsterLevel{white-space:nowrap;overflow:hidden}.selectedMonster-hp-bar-bg{position:relative;bottom:3%;left:50%;transform:translate(-50%);height:36%;background-color:gray;border:1px solid black;border-radius:3px;width:90%;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center}.selectedMonster-hp-bar-fg{position:absolute;bottom:0%;left:0%;height:100%;border-radius:3px}.selectedMonster-hpText{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}#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{position:relative;height:22%;width:70%;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box}#selectedMonsterDataContainer:after{content:"";position:absolute;left:-10;bottom:0;width:120%;height:1px;background-color:#727272}.selectedMosnterThumbnailContainer{height:83%;aspect-ratio:1/1;background-color:#e4e4e4;display:flex;justify-content:center;align-items:center;border-radius:50%;border:1px solid rgb(59,59,59);box-shadow:1px 1px 1px #fff;overflow:hidden;cursor:pointer;transition:transform .2s ease}.selectedMosnterThumbnailContainer:active{transform:scale(.94)}.selectedMosnterThumbnailContainerRight{height:83%;aspect-ratio:1/1;background-color:#e4e4e4;display:flex;justify-content:center;align-items:center;border-radius:50%;border:1px solid rgb(59,59,59);box-shadow:1px 1px 1px #fff;overflow:hidden;cursor:pointer;transition:transform .2s ease}.selectedMosnterThumbnailContainerRight:active{transform:scale(.94)}.selectedMonsterThumbnail,.selectedMonsterThumbnailRight{height:93%;border:1px solid rgb(59,59,59);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-direction:row;box-sizing:border-box}#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;display:flex;flex-direction:column;justify-content:center;align-items:center}.selectedData-TopAreaContainer{position:relative;height:26%;width:100%;display:flex;justify-content:center;align-items:flex-end}.selectedData-TopAreaContainer:after{content:"";position:absolute;left:5%;bottom:0;width:90%;height:1px;background-color:#727272}.selectedData-TopArea{position:relative;width:100%;height:86%;display:flex;justify-content:center;align-items:flex-start}.selectedMonsterMoreDetailedCotnainer{position:absolute;top:0%;left:50%;transform:translate(-50%);height:0;opacity:0;width:97%;background:linear-gradient(to bottom right,#bfbfbf,#a7a7a7,#b7b7b7);display:flex;flex-direction:column;z-index:3;transition:height .3s ease,opacity .3s ease;border-bottom-right-radius:10px}.openDropDown{height:99%;opacity:1}.nameLvHpbarContainer-moreDetailed{background:linear-gradient(to bottom right,#d7d7d7,#b8b8b8,#d2d2d2);width:97%;height:19%;margin:1% auto auto;border-radius:5px;border:1px solid rgb(72,72,72);display:flex;flex-direction:column;gap:3%}.NameLevelContainer-moreDetailed{width:100%;height:45%;display:flex;flex-direction:row;justify-content:space-between;padding-left:2%;padding-right:5%;box-sizing:border-box}.MonsterName-moreDetailed{white-space:nowrap;overflow:hidden;font-size:15px}.MonsterLevel-moreDetailed{white-space:nowrap;overflow:hidden;font-size:15px;font-weight:500}.monster-hpbar-bg-moreDetailed{position:relative;bottom:0%;left:50%;transform:translate(-50%);height:40%;background-color:gray;border:1px solid black;border-radius:3px;width:90%;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center}.monster-hpbar-fg-moreDetailed{position:absolute;bottom:0%;left:0%;height:100%;border-radius:3px;width:10%}.hpText-moreDetailed{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}.statusExpSkillsContainer-moreDetailed{height:81%;width:100%;display:flex;padding:1%;box-sizing:border-box;gap:1%}.statusContainer-moreDetailed{width:25%;height:100%;background:linear-gradient(to bottom right,#ffdbdb,#ffd0d0,#ffe6e6);display:flex;flex-direction:column;justify-content:space-between;align-items:center;border-radius:5px;padding:1%;box-sizing:border-box;border:1px solid rgb(87,87,87)}.attackStatus-moreDetailed{width:97%;height:19%}.attackStatus-moreDetailed div:first-child{height:50%;font-size:15px}.attackStatus-moreDetailed div:last-child{height:50%;text-align:end;font-weight:500;margin-right:4%;text-decoration:underline;font-size:15px}.defenseStatus-moreDetailed{width:97%;height:19%}.defenseStatus-moreDetailed div:first-child{height:50%;font-size:15px}.defenseStatus-moreDetailed div:last-child{height:50%;text-align:end;font-weight:500;margin-right:4%;text-decoration:underline;font-size:15px}.specialAttackStatus-moreDetailed{width:97%;height:19%}.specialAttackStatus-moreDetailed div:first-child{height:50%;font-size:15px}.specialAttackStatus-moreDetailed div:last-child{height:50%;text-align:end;font-weight:500;margin-right:4%;text-decoration:underline;font-size:15px}.specialDefenseStatus-moreDetailed{width:97%;height:19%}.specialDefenseStatus-moreDetailed div:first-child{height:50%;font-size:15px}.specialDefenseStatus-moreDetailed div:last-child{height:50%;text-align:end;font-weight:500;margin-right:4%;text-decoration:underline;font-size:15px}.speedStatus-moreDetailed{width:97%;height:19%}.speedStatus-moreDetailed div:first-child{height:50%;font-size:15px}.speedStatus-moreDetailed div:last-child{height:50%;text-align:end;font-weight:500;margin-right:4%;text-decoration:underline;font-size:15px}.expSkillsContainer-moreDetailed{width:75%;height:100%;border-top-right-radius:10px;display:flex;flex-direction:column;gap:1%}.skillsContainer-moreDetailed{width:100%;height:78%;background:linear-gradient(to bottom right,#d3eaff,#d0e7ff,#dcefff);display:flex;flex-direction:column;align-items:flex-start;padding:1%;border-radius:5px;box-sizing:border-box;border:1px solid rgb(87,87,87);overflow:scroll}.eachSkill-moreDetailed{height:3211px;width:100%;font-size:15px;display:flex;align-items:center}.eachSkill-moreDetailed.hidden{display:none}.expContainer-moreDetailed{width:100%;height:22%;background:linear-gradient(to bottom right,#f0efcc,#ebeac6,#e4e4c8);display:flex;flex-direction:column;border-radius:5px;border:1px solid rgb(87,87,87);box-sizing:border-box;gap:3%}.expBarBg-moreDetailed{position:relative;bottom:3%;left:50%;transform:translate(-50%);height:37%;background-color:gray;border:1px solid black;border-radius:3px;width:90%;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center}.expBarFg-moreDetailed{position:absolute;bottom:0%;left:0%;height:100%;border-radius:3px}.expBarText-moreDetailed{margin-left:2%;font-size:15px}.expBarValue-moreDetailed{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}#swapBtn2{position:absolute;bottom:16%;left:-1%;width:30%;height:40%;transform:translateY(-50%);background-color:#000;border-radius:5px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#e6e6e6;font-size:15px}.triangleRight-swapBtn2{position:absolute;right:.5%;top:-44%;width:60%;height:46%;background-color:#000;clip-path:polygon(0 0,0 100%,100% 100%)}.triangleLeft-swapBtn2{position:absolute;left:3%;bottom:-37%;width:60%;height:40%;background-color:#000;clip-path:polygon(0 0,100% 100%,100% 0)}.selectedData-BottomAreaContainer{position:relative;width:100%;height:74%;border-bottom-right-radius:10px}#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:15px;border:1px solid rgb(255,255,255);color:#d7d7d7;box-shadow:1px 1px 1px #fff;cursor:pointer}#skillButtons1{height:100%;width:100%;border-bottom-right-radius:10px;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{height:100%;width:100%;border-radius:10px;display:flex;align-items:center;box-sizing:border-box}.monsterIconsContainer-Left,.monsterIconsContainer-Right{width:50%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}.eachMonsterIconContainer{background:linear-gradient(to bottom right,#b8b8b8,#939393,#707070);width:90%;height:31%;border:2px solid rgb(59,59,59);border-radius:10px;box-sizing:border-box;overflow:hidden;position:relative;box-shadow:2px 2px 2px #363636;cursor:pointer}.monster-icon{border-radius:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transform-origin:center}.active-monster{border-color:#01f}.select-target{border-color:red}#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}