body{
    background-color: black;
}

.stage{
    width: 900px;
    height: 600px;
    background-color: rgb(21, 19, 26);
    position: relative;
    margin: auto;
    border-radius: 20px;
    margin-top: 40px;
    overflow: hidden;
    user-select: none;
}

@keyframes bobStart {
    0% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(10px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

#start {
    height: 80px;
    width: 300px;
    color: white;
    background-color: rgb(17, 17, 17);
    border: solid 4px rgb(0, 0, 0);
    border-radius: 5px;
    font-family: alagard;
    font-size: 50px;
    position: absolute;
    bottom: 0%;
    transform: translateX(-50%);
    display: none;
    left: 50%;
    z-index: 101;
    animation: bobStart 4s ease-in-out infinite;
}

@keyframes bobTitle {
    0% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(3px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

#title{
    position:absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: bobTitle 4s ease-in-out infinite;
}

#campingPic{
    position:absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#clearLocalStorage{
    height: 60px;
    width: 150px;
    color: white;
    background-color: rgb(17, 17, 17);
    border: solid 4px rgb(0, 0, 0);
    border-radius: 5px;
    font-family: alagard;
    font-size: 23px;
    position: absolute;
    bottom: 7.5%;
    transform: translateX(-50%);
    display: none;
    left: 22%;
}

#clearLocalStorage:hover,
#start:hover {
    border-color: white;
}

#slideCanvas{
    position: absolute;
    width: 60%;
    height: 50%;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    display: none;
}

#slidesText{
    position: absolute;
    width: 60%;
    height: 50%;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    text-align: center;
    font-family: alagard;
}

#slideCanvas,
#slidesText {
    user-select: none;          
    pointer-events: none;      
}

#blinker{
    position: absolute;
    height: 3%;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#tip1{
    position: relative;
    width: 80%;
    height: 10%;
    left: 50%;
    top: 79%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    font-family: alagard;
    font-size: 15px;
    animation: bobStart 4s ease-in-out infinite;
}

@font-face {
    font-family: alagard;
    src: url(fonts/alagard.ttf) format("truetype");
}

@font-face {
    font-family: minecraft;
    src: url(fonts/Minecraft.ttf) format("truetype");
}

@font-face {
    font-family: dogica;
    src: url(fonts/dogicapixel.ttf) format("truetype");
}

#inventoryPanel{
    position: absolute;
    display: none;
    bottom: 18%;
    height: 75%;
    left: 5%;
    width: 90%;
    background: rgb(6, 5, 20);
    border: 6px solid rgb(28, 16, 25);
    z-index: 100;
    border-radius: 10px;
}

#inventoryPanelfront{
    position: absolute;
    height: 100%;
    width: 100%;
    border: none;
    z-index: 101;
}

#inventorybod{
    margin: 0; 
    overflow: hidden;
}

#stageinventory{
    width: 810px;
    height: 450px;
    background-color: rgb(69, 40, 60); 
    position: relative;
    margin: auto;
}

#itemdescontainer{
    position: absolute;
    height: 95%;
    top: 2.5%;
    right: 1%;
}

#itemlistcontainer{
    position: absolute;
    height: 95%;
    top: 2.5%;
    left: 1%;
}

#trueitemlistcontainer{
    position: absolute;
    height: 84.25%;
    width: 26.3%;
    top: 6.5%;
    left: 3.29%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 13px;
}

#trueitemlistcontainer::-webkit-scrollbar {
    height: 8px;
    background: transparent;
}

#trueitemlistcontainer::-webkit-scrollbar-thumb{
    background: rgb(102, 57, 49);
    border-radius: 4px;
}

.itemlistheader{
    margin-top: -16px;
    margin-bottom: 35px;
}

#itemlistheadercontainer{
    position: absolute;
    height: 9.9%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

#itemlistheadertext{
    position: relative;
    left: 7%;
    margin-top: 5px;
    text-align: left;
    font-family: alagard;
    color: white;
    font-size: 20px;
    display: relative;
    top: 10px;
    text-align: left;
}

.itemlist{
    list-style: none;
    text-align: left;
    margin-left: -20px;
    margin-top: -3px;
    display: none;
}

.itemlist li:hover {
    background: rgb(143, 86, 59);
}

.itemlist li{
    padding: 2px 5px;
    font-family: alagard;
    color: white;
    font-size: 18px;
    background: rgb(102, 57, 49);
    border-top: 0 solid rgb(28, 16, 25);
    border-bottom: 6px solid rgb(28, 16, 25);
    border-left: 6px solid rgb(28, 16, 25);
    border-right: 6px solid rgb(28, 16, 25);
    margin-left: -17px;
    width: 170px;
}

.itemlist,
.itemlist li,
.itemlistheader
 {
    user-select: none;  
    cursor: pointer;           
}

#itemimagecontainer{
    position: absolute;
    z-index: 101;
    height: 50%;
    top: 9%;
    right: 8%;
}

#itemtextcontainer{
    position: absolute;
    z-index: 101;
    height: 19.45%;
    bottom: 9%;
    right: 8%;
}

#itemdesname{
    position: absolute;
    text-align: center;
    font-family: alagard;
    font-size: 30px;
    color: white;
    bottom: 24%;
    right: -16.4%;
    width: 100%;
}

#trueitemtextcontainer{
    position: absolute;
    z-index: 101;
    height: 17%;
    width: 50.3%;
    bottom: 10.15%;
    right: 8.9%;
    background: rgba(0, 0, 0, 0);
}

#itemtext{
    color: white;
    font-family: alagard;
    padding: 5px;
    margin-top: -3px;
    font-size: 18px;
}

#dialogueBox{
    position: absolute;
    height: 30%;
    top: 3%;
    z-index: 102;
    transform: translateX(-50%);
    left: 50%;
}

#dialogueBoxText{
    position: absolute;
    height: 25%;
    width: 59%;
    top: 0%;
    left: 29%;
    z-index: 103;
    background: rgba(0, 0, 0, 0);
    color: white;
    font-family: alagard;
    font-size: 35px;
}

#dialogueBlinker{
    position: absolute;
    height: 3%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 103;
    display: none;
}

.dialogueButton{
    position: absolute;
    height: 50px;
    width: 200px;
    background-color: #160a0a;
    color: white;
    border: 5px solid #39221d;
    border-radius: 3px;
    font-family: alagard;
    font-size: 20px;
}

#dialogueOption1{
    top: 33.9%;
    right: 31.8%;
}

#dialogueOption2{
    top: 33.9%;
    right: 9%;
}

#dialogueOption1, #dialogueOption2 {
    display: none;
}

#dialogueOption1:hover, #dialogueOption2:hover {
    border-color: #fff;
}

#dialogue {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 200;
    pointer-events: none;
    transform: translateY(-40%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(.4,0,.2,1), opacity 0.8s;
    pointer-events: auto;
}

#dialogue.dialogue-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#dialogueBox:hover, #dialogueBoxText:hover {
    cursor: pointer;
}

#floorNum{
    position: absolute;
    display: none;
    font-family: alagard;
    font-size: 30px;
    color: white;
    bottom: 14%;
    left: 8%;
}

#floorTag{
    position: absolute;
    display: none;
    bottom: 17%;
    left: -5%;
    height: 10%;
}


#hallway{
    position: absolute;
    height: 100%;
    transition: transform 0.1s ease;
    display: none;
    pointer-events: none;
    bottom: 15%;
}

#knight{
    position: absolute;
    height: 30%;
    bottom: 19%;
    left: 35%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

#knight2{
    position: absolute;
    height: 30%;
    bottom: 5%;
    left: 25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

#hallwaybag{
    position: absolute;
    height: 20%;
    bottom: 1%;
    right: 1%;
    display: none;
    z-index: 102;
}

#playerhpbar{
    position: absolute;
    height: 10%;
    bottom: 2.5%;
    left: 1%;
    display: none;
}

#playerhp{
    position: absolute;
    font-family: alagard;
    font-size: 30px;
    bottom: -0.5%;
    left: 8%;
    color: white;
    display: none;
}

#coinpouch{
    position: absolute;
    height: 5%;
    bottom: 5%;
    right: 33%;
    display: none;
}

#coinnum{
    position: absolute;
    font-family: alagard;
    font-size: 30px;
    width: 100%;
    bottom: -0.5%;
    left: 68%;
    color: rgb(255, 255, 255);
    display: none;
    text-align: left;
}

#shoptable{
    position: absolute;
    height: 100%;  
    display: none;
}

#shopbackground{
    position: absolute;
    height: 100%;  
    display: none;
}

#hkfullart{
    position: absolute;
    height: 100%;
    left: 4%;  
    bottom: 3%;
    display: none;
}

#hksprite{
    position: absolute;
    height: 50%; 
    bottom: -2%;
    left: 53%;
    transform: translate(-50%, -50%);
    display: none;
}

#shopbag{
    position: absolute;
    height: 25%;
    bottom: 2%;
    right: 1%;
    display: none;
    z-index: 99;
}

#shopleavebutton{
    position: absolute;
    height: 10%;
    bottom: 1%;
    left: 2%;
    cursor: pointer;
    display: none;
}

#shopleave{
    position: absolute;
    text-align: center;
    font-family: alagard;
    font-size: 25px;
    color: white;
    bottom: 0%;
    left: 5.5%;
    cursor: pointer;
    display: none;
}

#hkspeechbubble{
    position: absolute;
    height: 100%;
    display: none;
}

#hkspeechbubblecontainer{
    position: absolute;
    height: 45%;
    width: 56.7%;
    left: 40%;
    top: 5%;
    display: none;
}

#hktext{
    color: white;
    font-family: alagard;
    font-size: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

#buyableAttackRune{
    position: absolute;
    height: 17%;
    bottom: 23%;
    left: 10%;
    cursor: grab;
    display:none;
    z-index: 100;
}

#buyableDefenceRune{
    position: absolute;
    height: 17%;
    bottom: 23%;
    left: 26%;
    cursor: grab;
    display:none;
    z-index: 100;
}

#buyableHealthFlask{
    position: absolute;
    height: 25%;
    bottom: 23%;
    left: 42%;
    cursor: grab;
    display:none;
    z-index: 100;
}

#buyableAttackFlask{
    position: absolute;
    height: 25%;
    bottom: 23%;
    left: 58%;
    cursor: grab;
    display:none;
    z-index: 100;
}

#buyableDefendFlask{
    position: absolute;
    height: 25%;
    bottom: 23%;
    left: 74%;
    cursor: grab;
    display:none;
    z-index: 100;
}

#enemySpriteWrapper {
    position: absolute;
    height: 83%;
    top: 52%;
    right: -30%;
    transform: translate(-50%, -50%);
    display: none;
}

#enemySpriteWrapper2 {
    position: absolute;
    height: 170%;
    top: 52%;
    right: -92%;
    transform: translate(-50%, -50%);
    display: none;
}

#enemySpriteWrapper3 {
    position: absolute;
    height: 110%;
    top: 41%;
    right: -50%;
    transform: translate(-50%, -50%);
    display: none;
}

#melee1battle{
    height: 100%;
}

#brute1battle{
    height: 100%;
}

#boss1battle{
    height: 100%;
}

.playerWrapper {
    position: absolute;
    height: 24%;
    z-index: 98;
    transition: left 0.4s cubic-bezier(.4,2,.6,1);
}
#SWKwrapper {
    top: 47%;
    left: 250px;
    transform: translate(-50%, -50%);
    display: none;
}
#SHKwrapper {
    top: 57%;
    left: 250px;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 99;
}
#SWKbattle, #SHKbattle {
    height: 100%;
    position: static; 
    left: auto;
    top: auto;
    transform: none;
}

.swappedout{
    filter: brightness(60%);
    left: 180px !important; 
}

#arena1{
    position: absolute;
    height: 80%;
    transition: transform 0.1s ease;
    display: none;
    pointer-events: none;
    bottom: 21%;
    left: 0%;
    filter: brightness(60%);
}

#playerhpbarbattle{
    position: absolute;
    height: 8%;
    top:15%;
    left: 4%;
    display: none;
    z-index: 102;
}

#playerhpbattle{
    position: absolute;
    font-family: alagard;
    font-size: 25px;
    top: 19%;
    left: 9%;
    color: white;
    display: none;
    z-index: 103;
}

#playersquad{
    position: absolute;
    font-family: alagard;
    font-size: 25px;
    top: 7%;
    left: 10%;
    color: rgb(255, 255, 255);
    display: none;
    text-align: left; 
    width: 300px;
    z-index: 104;
}

#enemyhpbar{
    position: absolute;
    height: 8%;
    top: 15%;
    right: 4%;
    display: none;
}

#enemyhp{
    position: absolute;
    font-family: alagard;
    font-size: 25px;
    top: 19%;
    right: 10%;
    color: white;
    display: none;
    text-align: right;
}

#enemyname{
    position: absolute;
    font-family: alagard;
    font-size: 25px;
    top: 7%;
    right: 10%;
    color: rgb(255, 255, 255);
    display: none;
    text-align: right; 
    width: 300px;
}

#battlebag{
    position: absolute;
    height: 20%;
    bottom: 15%;
    right: 1%;
    display: none;
    z-index: 102;
}

#useHealthFlask{
    position: absolute;
    left: 400px;
}

#turnCounter{
    position: absolute;
    display: none;
    right: 38%;
    top: 0px;
    color: white;
    font-family: alagard;
    font-size: 30px;
    text-align: center;
    transform: translateX(-50%);
}

#coinsBattle{
    position: absolute;
    height: 5%;
    bottom: 24%;
    left: 4%;
    display: none;
}
#coinsBattleText{
    position: absolute;
    width: 20%;
    height: 5%;
    bottom: 18.8%;
    left: 8%;
    font-family: alagard;
    color: white;
    font-size: 30px;
    display: none;
}

.coin-gain-anim {
    position: absolute;
    font-family: alagard;
    font-size: 32px;
    color: #ffe066;
    font-weight: bold;
    pointer-events: none;
    opacity: 1;
    z-index: 999;
    animation: coinDrop 1s cubic-bezier(.4,0,.2,1) forwards;
    text-shadow: 2px 2px 8px #000;
    left: 0; 
    top: 0;  
    transform: translate(-50%, 0);
}
@keyframes coinDrop {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 30px) scale(0.8);
    }
}

#battleMenuBackground{
    position: absolute;
    display: none;
    bottom: 0%;
    background-color:#39221d;
    height: 22%;
    width: 100%;
     border-top: solid 6px #0e0707;
}

.movePanel {
     display: none;
    flex-direction: row;
    align-items: left;
    position: absolute;
    overflow-x: scroll;
    white-space: nowrap;
    gap: 5px;
    left: 15%;
    z-index: 110;
    bottom: 0%;
    max-width: 70.5%;
    padding-bottom: 10px;
}

.movePanel.open {
    display: flex;
}

.attackButton {
    
}

.moveButton,
.attackButton,
.defendButton,
.consumableButton {
    z-index: 104;
    height: 100px;
    min-width: 150px;
    max-width: 200px;
    margin-right: 10px;
    word-break: break-word;
    white-space: normal;
    text-align: center;
    padding: 8px 4px;
    display: inline-block;
    vertical-align: top;
    bottom: 3%;
    border-radius: 4px;
}

.consumableButton{
    font-family: alagard;
     font-size: 20px;
     background-color:rgb(143, 86, 59);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(102, 57, 49);
}

.attackButton{
    font-family: alagard;
     font-size: 20px;
     background-color:rgb(172, 50, 50);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(217, 87, 99);
}

.defendButton{
    font-family: alagard;
     font-size: 20px;
     background-color:rgb(91, 110, 225);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(91, 155, 255);
}

.moveButton:hover,
.attackButton:hover,
.defendButton:hover,
.consumableButton:hover {
    border-color: white;
}

.moveButton:disabled,
.attackButton:disabled,
.defendButton:disabled,
.consumableButton:disabled {
    filter: brightness(60%);
    opacity: 0.7;
    cursor: not-allowed;
}

.moveName,
.attackName,
.defendName,
.consumableName {
}

.moveUses,
.attackUses,
.defendUses,
.consumableUses {
    font-size: 15px;
    color: #1a0b0b;
}

#attackTab {
    position: absolute;
     left: 10%;
     font-family: alagard;
     font-size: 20px;
     background-color:rgb(172, 50, 50);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(217, 87, 99);
}

#attackDisable {
    position: absolute;
    left: 15%;
    bottom: 3%;
    height: 100px;
    z-index: 150;
    display: none;
}

#defendDisable {
    position: absolute;
    left: 33%;
    bottom: 3%;
    height: 100px;
    z-index: 150;
    display: none;
}

#defendTab {
    position: absolute;
     left: 30%;
     font-family: alagard;
     font-size: 20px;
     background-color:rgb(91, 110, 225);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(91, 155, 255);
}

#consumablesTab {
    position: absolute;
     left: 50%;
     font-family: alagard;
     font-size: 20px;
     background-color:rgb(143, 86, 59);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(102, 57, 49);;
}

#runButton{
    position: absolute;
    left: 70%;
    font-family: alagard;
     font-size: 20px;
     background-color:rgb(78, 29, 96);
     color: white;
     word-break: break-word;
     max-width: 150px;
     border: solid 4px rgb(118, 66, 138);
}

#attackTab,
#defendTab,
#consumablesTab,
#runButton {
    display: none;
}

#attackTab:hover,
#defendTab:hover,
#consumablesTab:hover,
#runButton:hover {
    border-color: white;
}

#attackPanel::-webkit-scrollbar,
#defendPanel::-webkit-scrollbar,
#consumablesPanel::-webkit-scrollbar {
    height: 8px;
    background: transparent;
}

#attackPanel::-webkit-scrollbar-thumb,
#defendPanel::-webkit-scrollbar-thumb,
#consumablesPanel::-webkit-scrollbar-thumb {
    background: rgb(102, 57, 49);
    border-radius: 4px;
}

#tabHolder{
    position: absolute;
    height: 100%;
    width: 90%;
    left: 6%;
}

@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.4s;
}

#swordPattern, #shieldPattern{
    display: none;
    position: absolute;
    bottom: 3%;
    z-index: 101;
    height: 17%;
}

#swordPattern{
left: 4.5%;
}

#shieldPattern{
right: 4.5%;
}

#gameOverCover{
    position: absolute;
    height: 120%;
    width: 120%;
    background-color: rgb(0, 0, 0, 0.9);
    z-index: 200;
    display: none;
}

#gameOver{
    position: absolute;
    height: 20%;
    left: 50%;
    transform: translateX(-50%);
    top: 35%;
    z-index: 201;
    display: none;
}

#restartButton{
    height: 60px;
    width: 150px;
    color: white;
    background-color: rgb(17, 17, 17);
    border: solid 4px rgb(0, 0, 0);
    border-radius: 5px;
    font-family: alagard;
    font-size: 23px;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 201;
    display: none;
}

#choiceNo, #choiceYes{
    height: 60px;
    width: 150px;
    color: white;
    background-color: rgb(17, 17, 17);
    border: solid 4px rgb(0, 0, 0);
    border-radius: 5px;
    font-family: alagard;
    font-size: 23px;
    position: absolute;
    bottom: 12%;
    transform: translateX(-50%);
    display: none;
}

#choiceYes:hover, #choiceNo:hover, #restartButton:hover {
    border-color: white;
}

#choiceYes{
    left: 40%;
}

#choiceNo{
    left: 60%;
}