/*/////////////////////// HTML CSS ///////////////////////////////*/
@font-face {
    font-family: gi-font;
    src: url(./assets/gi-font.ttf);
    font-display: swap;
}

html,body {
    height: 100%;
    cursor: url(./assets/icon/cursor.webp), auto;
}

html {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

img {  
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
 }

button {
    font: inherit;
}

#cache {
    position: absolute;
    height: 100%;
    width: 100%;
    top: -1000%;
    z-index: -1000;
    opacity: 0;
}

#cache > image {
    position: absolute;
}

#vers-number-start {
    position: absolute;
    bottom: 2%;
    font: inherit;
    font-size: 0.7em;
    color: white;
    text-align: center;
    filter: drop-shadow(0 0 0.15em rgba(0, 0, 0, 0.795)) drop-shadow(0 0 0.1em rgba(0, 0, 0, 0.604));
}

.version-text {
    position: absolute;
    color: rgb(255, 255, 255);
    bottom: 0;
    right: 0.2%;
    z-index: 10;
    font-size: 0.75em;
    text-shadow: 0.1em 0.1em 0.15em black;
}

.copyright-text {
    position: absolute;
    color: rgb(255, 255, 255);
    bottom: 0;
    left: 0.1%;
    z-index: 10;
    font-size: 0.45em;
    text-shadow: 0.05em 0.05em 0.07em black;
}

:root {
    --brightness:100%;
    --dropshadow:0 0 0 black;
    --grayscale:0%;
    --light-green: #DEE3BA;
    --bright-light-green: #ABD5A7;
    --pale-light-green: #AAD4A5;
    --pale-green: #DAEACB;
    --dull-green: #2a3a16;
    --olive-green: #50532c;
    --bright-green: #A4C95F;
    --medium-green: #8fa77e;
    --bright-medium-green: #CEE573;
    --pale-medium-green: #b3caa2;
    --dark-green: #4D613D;
    --bright-dark-green: #3D7250;
    --very-dark-green: #1c2f0e;
    --very-dark-red: #651418;
    --light-brown: #E9D5C1;
    --pale-brown: #B1A79A;
    --medium-brown: #C9C0A1;
    --dark-brown: #6e6240;
    --very-dark-brown: #452b0a;
    --text-shadow-100:
        #3C3C3C 0.201em 0.064em 0, 
        #3C3C3C 0.114em 0.152em 0, 
        #3C3C3C 0.0495em 0.182em 0,
        #3C3C3C 0.114em 0.172em 0, 
        #3C3C3C -0.0809em 0.198em 0, 
        #3C3C3C -0.140em 0.145em 0, 
        #3C3C3C -0.209em 0.0259em 0, 
        #3C3C3C -0.206em -0.0373em 0,
        #3C3C3C -0.138em -0.138em 0,
        #3C3C3C -0.0800em -0.159em 0, 
        #3C3C3C -0.0164em -0.165em 0, 
        #3C3C3C 0.0535em -0.159em 0,
        #3C3C3C 0.118em -0.148em 0,
        #3C3C3C 0.127em -0.102em 0, 
        #3C3C3C 0.183em -0.0524em 0;
    --text-shadow-075:
        #3C3C3C 0.151em 0 0, 
        #3C3C3C 0.151em 0.048em 0, 
        #3C3C3C 0.124em 0.094em 0, 
        #3C3C3C 0.104em 0.112em 0, 
        #3C3C3C 0.026em 0.147em 0, 
        #3C3C3C -0.060em 0.149em 0, 
        #3C3C3C -0.105em 0.109em 0, 
        #3C3C3C -0.135em 0.068em 0, 
        #3C3C3C -0.157em 0.020em 0, 
        #3C3C3C -0.155em -0.028em 0, 
        #3C3C3C -0.098em -0.070em 0, 
        #3C3C3C -0.078em -0.098em 0,
        #3C3C3C -0.060em -0.119em 0, 
        #3C3C3C -0.012em -0.124em 0, 
        #3C3C3C 0.040em -0.120em 0, 
        #3C3C3C 0.078em -0.098em 0,
        #3C3C3C 0.095em -0.076em 0, 
        #3C3C3C 0.137em -0.039em 0;
    --text-shadow-050:
        #3C3C3C 0.1005em 0.032em 0, 
        #3C3C3C 0.057em 0.076em 0,
        #3C3C3C 0.02475em 0.091em 0, 
        #3C3C3C 0.057em 0.086em 0, 
        #3C3C3C -0.04045em 0.099em 0, 
        #3C3C3C -0.07em 0.0725em 0, 
        #3C3C3C -0.1045em 0.01295em 0, 
        #3C3C3C -0.103em -0.01865em 0,
        #3C3C3C -0.069em -0.069em 0, 
        #3C3C3C -0.04em -0.0795em 0, 
        #3C3C3C -0.0082em -0.0825em 0, 
        #3C3C3C 0.02675em -0.0795em 0, 
        #3C3C3C 0.059em -0.074em 0, 
        #3C3C3C 0.0635em -0.051em 0, 
        #3C3C3C 0.0915em -0.0262em 0;
    --text-shadow-125: 
        #3C3C3C 0.266em 0 0, 
        #3C3C3C 0.251em 0.08em 0, 
        #3C3C3C 0.206em 0.156em 0, 
        #3C3C3C 0.143em 0.215em 0, 
        #3C3C3C 0.0619em 0.24em 0, 
        #3C3C3C -0.026em 0.248em 0, 
        #3C3C3C -0.108em 0.227em 0, 
        #3C3C3C -0.175em 0.181em 0, 
        #3C3C3C -0.225em 0.113em 0, 
        #3C3C3C -0.261em 0.0324em 0, 
        #3C3C3C -0.258em -0.0466em 0, 
        #3C3C3C -0.225em -0.116em 0, 
        #3C3C3C -0.172em -0.172em 0, 
        #3C3C3C -0.100em -0.199em 0, 
        #3C3C3C -0.0205em -0.206em 0, 
        #3C3C3C 0.0669em -0.199em 0, 
        #3C3C3C 0.149em -0.185em 0, 
        #3C3C3C 0.196em -0.128em 0, 
        #3C3C3C 0.228em -0.0655em 0;
}

/* <-- STRETCHING HORIZONTALLY---> */

@media (min-aspect-ratio: 28/9) {
    body {
        width: 50%;
        height: 100%;
        margin: 0;
        font-size: 0.7vw;
        border-left: 0.2em groove  #465E2B;
        border-right: 0.2em groove  #465E2B;
    }
}

@media (max-aspect-ratio: 28/9) {
    body {
        width: 68%;
        height: 100%;
        margin: 0;
        font-size: 0.952vw;
        border-left: 0.2em groove  #465E2B;
        border-right: 0.2em groove  #465E2B;
    }
}

@media (max-aspect-ratio: 24/9) {
    body {
        width: 80%;
        height: 100%;
        margin: 0;
        font-size: 1.12vw;
        border-left: 0.2em groove  #465E2B;
        border-right: 0.2em groove  #465E2B;
    }
}

@media (max-aspect-ratio: 22/9) {
    body {
        width: 90%;
        height: 100%;
        margin: 0;
        font-size: 1.26vw;
        border-left: 0.2em groove  #465E2B;
        border-right: 0.2em groove  #465E2B;
    }
}

@media (max-aspect-ratio: 19/9) {
    body {
        font-size: 1.5vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
}

@media (max-aspect-ratio: 14/9) {
    body {
        font-size: 1.4vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
}

@media (max-aspect-ratio: 12.5/9) {
    body {
        font-size: 1.7vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
}

@media (max-aspect-ratio: 11.5/9) {
    body {
        touch-action: manipulation;
        font-size: 1.9vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
}

@media (max-aspect-ratio: 9.5/9) {
    body {
        touch-action: manipulation;
        font-size: 2.2vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
}

 @media (max-aspect-ratio: 8/9){
    body {
        font-size: 2.6vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
} 

@media (max-aspect-ratio: 6/9){
    body {
        font-size: 3.2vw;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
    }
} 

@media (max-aspect-ratio: 3.9/9){
    .unsupported {
        opacity: 1 !important;
        z-index: 999999999 !important;
    }
} 

.unsupported {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    row-gap: 2%;
    opacity: 0;
}

.unsupported::before {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: black;
}

.unsupported > img {
    z-index: 9999999;
    width: 30%;
    max-height: 60%;
    object-fit: cover;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 0.5em solid #59BD8C;
    border-radius: 1em;
}

.unsupported > p {
    z-index: 9999999;
    width: 85%;
    text-align: center;
    font: inherit;
    font-size: 2em;
    color: white;
}


/*/////////////////////// GAME CSS ///////////////////////////////*/
* {
    scrollbar-width: 0.9vw;
    scrollbar-color: #d8c5ac #68563d;
    margin: 0;
    padding: 0;
    border: 0;
    touch-action: manipulation;
}

#game {
    width: 100%;
    height: 100%;
    background-color: white;
    position: relative;
    margin: 0 auto;
    display: none;
    overflow: hidden;
}

.overlay {
    position: absolute;
    background: url(./assets/bg/wood.webp);
    background-size:cover;
    z-index: 10000;
}

.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    width: 0.9vw;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #68563d;
  border-radius: 1em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/*/////////////////////// MAIN BODY CSS ///////////////////////////////*/
body {
    background-image: url(./assets/border.webp);
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    font-family: 'gi-font';
    display: flex;
    align-items: center;
    justify-content: center;
}

table, button, label {
    cursor: url(./assets/icon/cursor.webp), auto;
}

.score-container {
    display: flex;
    text-align: center;
    color:white;
    text-shadow:  0.1em 0.1em 0.15em black;
    flex-direction: column;
    position: relative;
    justify-content: space-around;
    top: 10%;
    width: 100%;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.727);
    padding-top: 1%;
    padding-bottom: 1%;
    z-index: 11;
    font-size: inherit;
}

#left-div {
    justify-content: unset;
}

.left-area {
    width: 35%;
    height: 100%;
    position: absolute;
    left: 0;
  }

.vignette {
    position: absolute;
}
  
.vignette::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, #ecd59100 0%,#c8a94e4a 40%,#c8a94e5b 60%,#c8a94e8d 80%, #cfa10ce2 100%);
    animation: vignette-animation 2s linear infinite;
}

.vignette-blue {
    position: absolute;
}
  
.vignette-blue::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, #88effb00 0%,#88effb33 40%,#88effb56 60%,#88effb99 80%, #3bd4e6 100%);
    animation: vignette-animation 2s linear infinite;
}

.middle-area {
    width: 5%;
    height: 100%;
    left: 35%;
    position: absolute;
    display:flex;
    flex-direction: column;
    border-left: 0.25em solid #1c2441;
    border-right: 0.25em solid #1c2441;
    box-sizing: border-box;
    background-image: url(./assets/frames/bar.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.right-area {
    width: 60%;
    height: 100%;
    position: absolute;
    right: 0;
    display:flex;
    flex-direction: column;
  }

.div-img {
    object-fit: cover;
}

.top-bar {
    position: absolute;
    width: 100%;
    height: inherit;
    object-fit: fill;
}

.main-table {
    position: relative;
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: row;
    z-index: 5;
}

.table-with-tooltip {
    flex-grow: 2;
    width: 70%;
    height: 92%;
    box-sizing: border-box;
    padding: 1.5%;
    overflow-y: auto;
}

.table-without-tooltip {
    width: 100%;
    height: 100%;
}

#start-screen {
    z-index: 1000;
    flex-wrap: wrap;
    gap: 4%;
}

.link {
    position: absolute;
    left: 1%;
    bottom: 1%;
    padding: 0.2%;
    border-radius: 0.5em;
    text-decoration: none;
    color: #cee0d4;
    background-color: #17321c;
}

.second-link {
    left: unset;
    right: 1%;
}

.second-link:visited,.link:visited { 
    color: #cee0d4;
}

#start-screen :first-child {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

#start-image {
    position: relative;
    bottom: 14%;
    width: 60%;
    object-fit: contain;
	-webkit-animation: pulsate-fwd 3s ease-in-out infinite both;
	        animation: pulsate-fwd 3s ease-in-out infinite both;
}

#start-idle-nahida {
    position: absolute;
    bottom: 0;
    right: 10%;
    height: 40%;
    object-fit: contain;
}

#start-idle-dori {
    position: absolute;
    bottom: 15%;
    left: 20%;
    height: 40%;
    object-fit: contain;
}

#start-idle-scara {
    position: absolute;
    bottom: 5%;
    left: 2%;
    height: 40%;
    object-fit: contain;
}

#start-screen > button {
    position: relative;
    bottom: 2%;
    z-index: 1010;
    font-family: 'gi-font';
    font-size: 1.4em;
    text-shadow: var(--text-shadow-075);
    color:white;
    width: 30%;
    aspect-ratio: 6.1;
    background-image: url(./assets/tutorial/tut-button.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}

#loading {
    z-index: 100;
    pointer-events: none;
}

#loading > p {
    position: absolute;
    bottom: 66.5%;
    font-size: 2em;
    color: #ACDE7E;
    text-shadow: 0 0 0.2em black, 0 0 0.15em black, 0 0 0.1em black;
}

.overlay-tutorial {
    width: auto!important; 
    height: 55% !important;
    object-fit: contain;
}

#score {
    font-size: 1.5em;
}

#dps {
    font-size: 0.9em;
}

.energy-primo-container {
    position: relative;
    width: 100%;
    height: 10%;
    z-index: 15;
    row-gap: 5%;
}

.pill-value {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    text-align: right;
    color:white;
    width: 140%;
    height: 40%;
    z-index: 13;
    font-size: 0.8em;
    background-color: #000000d8;
    border-radius: 1em;
}

.pill-value > img {
    transform: scale(1.2);
    position: relative;
    left: -2.5%;
}

.icon {
    height:80%;
    aspect-ratio: 0.7;
    filter: drop-shadow(0 0 0.05em #3e3a3a);
}

 .primogem {
    height:65%;
    aspect-ratio: 0.9;
}

/*/////////////* COMMONLY USED STYLES ///////////////*/
.flex-row {
    display: flex;
    flex-direction:  row;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.background-image-cover {
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cover-all {
    position: absolute;
    width: 100%;
    height: 100%;
}

.healthbar-container {
    position: relative;
    aspect-ratio: 17;
}

.healthbar-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: grid;
    overflow: hidden;
}

.healthbar-grid > b {
    z-index: 2;
}

.healthbar-container > img {
    z-index: 5;
    position: absolute;
    bottom: 50%;
    height: 200%;
    width: auto;
    object-fit: contain;
    transform: translate(-50%, 50%);

}

.healthbar-grid > div {
    position: absolute;
    left: 0;
    height: 100%;
    z-index: 1;
    border-radius: 0.2em;
}

.clickable {
    transition: 0.3s ease;
}

.clickable:hover {
    transform: scale(1.05);
}

/*/////////////////////////////// TEMP BUFFS CSS ///////////////////////////////*/
.temp-buff {
    position: relative;
    top: 1%;
    width: 100%;
    height: 20%;
    row-gap: 1%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.temp-buff > div {
    width: 80%;
    aspect-ratio: 1;
}

.countdown-number {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

/* TIMER SET TO 30 SECONDS */
.countdown-number::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: darken-animation 30s linear forwards;
}

/* BUTTON CSS */
.demo-img {
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.18s ease;
    animation: rotation 18s infinite linear forwards;
}

#demo-container {
    position: relative;
    top: 12.5%;
    width: auto;
    height: 47%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.floatingText {
    font-size: 1em;
    color: #022107;
    text-shadow: 0 0 0.25em white, 0 0 0.25em white, 0 0 0.15em white;
    position: absolute;
    animation: fadeOutOpacity 2.0s cubic-bezier(.02,.97,.91,.14) forwards;
    z-index: 10;
    pointer-events: none;
}

.floatingTextLow {
    font-size: 1.5em;
    color: #022107;
    text-shadow: 0 0 0.25em white, 0 0 0.25em white, 0 0 0.15em white;
    position: absolute;
    animation: fadeOutCritOpacity 2.0s ease-out forwards;
    z-index: 10;
    pointer-events: none;
}

.floatingCritText {
    font-size: 2em;
    color: #032509;
    text-shadow: 0 0 0.25em whitea2, 0 0 0.35em white9a, 0 0 0.15em white8e, 0 0 0.15em white8e;
    position: absolute;
    animation: fadeOutCritOpacity 2.0s ease-out forwards;
    z-index: 11;
    pointer-events: none;
}

.falling-image {
    position: absolute;
    width: 7%;
    aspect-ratio: 1;
}

.screen-tips {
    max-width: 94%;
    height: auto;
    position: absolute;
    z-index: 3;
    padding: 1%;
    font-size: 0.65em;
    text-align: center;
    justify-content: flex-start;
    background-color: #00000096;
    color: white;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.758), 0 0 0.2em rgba(0, 0, 0, 0.751), 0 0 0.2em black;
    border-radius: 0 0 0.5em 0.5em;
}

/*/////////////////////////////// TAB BODY CSS ///////////////////////////////*/
#flex-container-TAB {
    width: 100%;
    height: 10%;
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.tab-button {
    width: 100%;
    height: 100%;
    object-fit:contain;
    position: relative;
    z-index: 3;
}

.darken {
    filter: brightness(50%);
}

.tab-button-div {
    position: relative;
    width: 8%;
    height: 76%;
}

.tab-button:hover{
    filter: drop-shadow(0 0 0.3em white);
}

/*/////////////////////////////// ALL POP UP CSS (New/Tut) ///////////////////////////////*/
.pop-new {
    position: absolute;
    z-index: 103;
    content: url(./assets/icon/new.webp);
    width: 75%;
    object-fit: contain;
    top:0;
    right: -30%;
}

.pop-new-corner {
    position: absolute;
    z-index: 103;
    width: 55%;
    right: 0;
    bottom: 0;
}

.pop-new-corner > img {
    width:100%;
    height:100%;
    object-fit: contain;
}

.currency-pop {
    top: 11%;
    left: 32%;
    width: 10%;
    height: 9%;
    color: #385225;
    background-color: #CEE375;
    border-radius: 1em;
    border: 0.20em solid #6f895d;
    position: absolute;
    row-gap: 2%;
    z-index: 150;
    font-size: 1em;
    animation: slidedown-pop 0.8s ease-in-out both;
    pointer-events: none;
}

.currency-pop-first {
    height: 50%;
    column-gap: 2%;
}

.currency-pop-first > .icon {
    position: relative;
    left: 10%;
}

/*/////////////////////////////// TUTORIAL CSS ///////////////////////////////*/
.tutorial-dark {
    z-index: 200;
    background-color: rgba(0,0,0,0.90);
    pointer-events: all;
}

.play-button {
    width: auto;
    max-width: 90%;
    height: 12%;
    object-fit: contain;
    z-index: 200;
    pointer-events: all;
    transition: .15s ease;
}

.play-button:hover {
    filter: drop-shadow(0 0 0.4em #967c5f6c)  drop-shadow(0 0 0.2em #967c5fab);
}

.tutorial-text {
    width: 80%;
    height: 10%;
    object-fit: contain;
}

.tutorial-screen {
    width: 72%;
    height: 80%; 
    z-index: 200;
    row-gap: 1%;
}

.tutorial-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.idle-dark {
    height: 65%;
    width: 100%;
    background:url(./assets/tutorial/idle.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.idle-dark > p {
    position: relative;
    top: -8%;
    font: inherit;
    width: auto;
    font-size: 2.5em;
    color: #425d38;
    filter: drop-shadow(0 0 0.05em #98c887);
}

.idle-dark > img {
    position: relative;
    top: -9%;
    height: 25%;
    aspect-ratio: 1;
    filter: drop-shadow(0 0 0.2em #2c6119);
}

/*/////////////////////////////// HERO UPGRADES (TABLE1) CSS ///////////////////////////////*/
#table1 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    gap: 1%;
    overflow-y: auto;  
    overflow-x: hidden;
    font-size: inherit;
    transform: translateZ(0);
}

.upgrade {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;

    color: white;
    width: 98%;
    height: auto;
    max-height: 13%;
    aspect-ratio: 6.25;
    font-size: 0.85em;
    position: relative;
    transition: 0.4s ease;
    text-align: center;
    text-shadow: var(--text-shadow-100);
    filter: brightness(var(--brightness))  
            grayscale(var(--grayscale));
}

 .hero-button-frame {
    width: 100%;
    height: 100%;
    position: relative;
    top:0;
    left:0;
} 

.not-purchased {
    background: url(./assets/frames/button.webp) center center / 100% no-repeat;
    background-size: contain;
}

.not-dim {
    transition: 0.3s ease;
    --dropshadow:0 0 3px black;
}

.active-hero {
    transform:scaleY(1.08) scaleX(1.07);
    transition: 0.4s ease;
}

.dim {
    transition: 0.6s ease;
    --dropshadow:1px 1px 5px rgb(63, 63, 63);
    --grayscale:100%;
    --brightness:60%;
}

.milestone-upgrade {
    flex-basis: 15%;
    width: 15%;
    aspect-ratio: 1;
    position: relative;
    background-color: #362A1B;
    box-sizing: border-box;
    border: 0.2em solid #b3a177;
    border-radius: 0.5em;
}

.milestone-upgrade > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 0.1em rgba(255, 255, 255, 0.655))  drop-shadow(0 0 0.05em rgba(255, 255, 255, 0.477));
}

.milestone-selected {
    transition: 0.2s ease;
    transform: scale(1.10);
    filter: brightness(2);
}

.milestone-selected > img {
    filter:drop-shadow(0 0 0.1em rgb(0, 0, 0)) drop-shadow(0 0 0.05em rgb(0, 0, 0));
}


/*/////////////////////////////// INVENTORY (TABLE2) CSS ///////////////////////////////*/
.item-button {
    border: 0;
    width: 131px;
    height: 158px;
}

.flex-container-INVENTORY {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    gap: 2% 2%;
    transform: translateZ(0);
}

.inventory-selected {
    border: 0.5rem inset var(--dark-brown);
    border-radius: 1rem;
    transition: 0.2s ease;
    transform: scale(1.15);
}

.button-container {
    background-color: transparent;
    aspect-ratio: 13/17;
    flex-basis: 15%;
    position: relative;
}

.button-inv-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
} 

.new-item {
    width: 25%;
    height: auto;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    object-fit: contain;
}

.new-hero {
    width: 7%;
    height: auto;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    object-fit: contain;
    filter: drop-shadow(0.1em 0.1em rgba(0, 0, 0, 0.556));
}


.button-inv-stardiv {
    position: absolute;
    left: 0%;
    bottom: 10%;
    width: 100%;
    height: 17%;

}

.button-inv-star {
    width: 100%;
    height: 100%;
    object-fit:contain;
}

.button-inv-item {
    position: absolute;
    left:0%;
    bottom: 18%;
    width: 100%;
    height: 80%;
}

/* FILTER HEROES AND INVENTORY */
.filter-row {
    position: absolute;
    bottom: 0;
    width: 69%;
    height: 8%;
    background-color: var(--light-brown);
    box-sizing: border-box;
    border-top: 0.2em solid var(--dark-brown);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 1%;
    padding-right: 1%;
    box-sizing: border-box;
}

.filter-row > button {
    height: 70%;
    width: 20%;
    background-color: var(--pale-brown);
    color: white;
    text-shadow: var(--text-shadow-075);
    border: 0.15em solid var(--dark-brown);
    border-radius: 0.3em;
}

#upgrade-menu-button {
    width: fit-content;
    padding-left: 2%;
    padding-right: 2%;
    position: absolute;
    right: 1.5%;
    background-color: #AEC378;
    border: 0.15em solid #4d693b;
}

.filter-row > button:hover {
    filter: brightness(110%);
}

.filter-row div:nth-child(2) > button,.filter-row div:nth-child(3) > button {
    width: 95%;
    aspect-ratio: 1;
}

.filter-row div:nth-child(3), .filter-row div:nth-child(2) {
    position: absolute;
    bottom: 125%;
    left: 50%;
    width: 90%;
    grid-template-columns: repeat(auto-fill, minmax(3em, 1fr));
    box-sizing: border-box;
    transform: translate(-51%,0);
    background-color: var(--very-dark-brown);
    border: 0.25em solid var(--dark-brown);
    border-radius: 0.4em;
    padding: 1%;
}

.filter-row div:nth-child(3) {
    z-index: 11;
}

.filter-row div:nth-child(4) {
    position: relative;
    left: 2%;
    top: -2%;
    font-size: 1.1em;
    color: #3d311c;

}

.filter-row form:nth-child(3) {
    position: absolute;
    top: -300%;
    height: 280%;
    width: 90%;
    background-color: rgb(128, 124, 0);
}

/*/////////////////////////////// EXPEDITION (TABLE3) CSS ///////////////////////////////*/
.expedition-selected {
    transition: 0.4s ease;
    border-radius: 1em;
    opacity: 1 !important;
}

.flex-container-EXPEDITION {
    row-gap: 1%;
    padding: 1% 4% 1% 4%;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#adventure-button {
    position: relative;
    height: 12%;
    aspect-ratio: 3.61;
    background-image: url(./assets/tutorial/exped-button.webp);
    font-size: 1.4em;
    color: #E1D8CB;
    text-shadow: #40312b 0.05em 0.05em 0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s ease;
    opacity: 0.25;
}

#adventure-tutorial {
    position: relative;
    left: -2%;
    height: 11%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0.15em 0.15em 0.07em #485b91);
}

#wish-tutorial-text {
    z-index: 15;
    position: absolute;
    bottom: 25%;
    padding: 2%;
    width: auto;
    height: auto;
    font-size: 1.2em;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #6F4532;
    border-radius: 1em;
    border: 0.3em solid #876547;
    color: #f9d0bd;
    filter: drop-shadow(0.3em 0.5em 0.15em #291504d4);
}

#expedDiv {
    background-color: #ccb28f49;
    border-radius: 1em;
    width:100%;
    height:57%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.expedition {
    margin: auto;
    width: 20%;
    height: 100%;
    transition: 0.2s ease;
    opacity: 0.25;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/*/////////////////////////////// EXPEDITION TOOLTIP CSS ///////////////////////////////*/
.char-select {
    height: 9%;
    background-color: #3E4659;
    width: 100%;
}

.char-morale {
    position: relative;
    right: -2%;
    height: 12%;
    aspect-ratio: 1;
    width: auto;
    background-size: contain;
    z-index: 20;
}

.char-morale > p {
    position: absolute;
    bottom: 115%;
    filter: none;
    border: 0.2em solid #60453D;
    background-color: #A08167;
    padding: 5%;
    width: fit-content;
    white-space: nowrap;
    color: #36241e;
    filter: drop-shadow(0 0 0.3em #5E453D);
}


.exped-xpbar {
    position: absolute;
    width: 85%;
    height: 6%;
    bottom: 1%;
    left: 1%;
    border: 0.1em solid var(--bright-dark-green);
    box-sizing: border-box;
    background-color: var(--bright-dark-green);
}

.exped-xpbar > p {
    z-index: 3;
    width: auto;
    height: auto;
    background-color: var(--bright-green);
    border: 0.1em solid var(--bright-dark-green);
    box-sizing: border-box;
    color: var(--very-dark-green);
    padding: 1%;
    border-radius: 0.25em;
}

.exped-mesg-div {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: auto;
    height: auto;
    gap: 1%;
    z-index: 8;
    flex-direction: column-reverse;
}

.exped-mesg-div > p {
    color: white;
    background-color: #000000d5;
    box-sizing: border-box;
    padding: 5%;
    border-radius: 0.2em;
    white-space: nowrap;
    justify-content: flex-start;
}

.xpbar-bar {
    left: 0;
    background-color: var(--pale-medium-green);
    z-index: 2;
    transition: width 0.2s ease-in-out;
}

.tooltipEXPED {
    text-align: center;
    width: 100%;
    max-width: 100%;
    height: 80%;
    position: relative;
    display: flex;
    justify-content: center;
    color: white;
    text-shadow: 0.1em 0.1em 0.25em black;
    font-size: inherit;
    background-color: #3E4659;
    border: 0.2em solid var(--pale-brown);
}

.exped-table-img {
    object-fit:fill;
}

.tooltipTABLEEXPED {
    z-index: 20;
    width: 100%;
}

.tooltipTABLEEXPED > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 201;
}

.tooltipTABLEEXPED > img {
    z-index: 200;
    height: 20%;
    width: 70%;
    object-fit: contain;
}

.exped-text {
    position: relative;
    font-size: 1.4em;
    height: 22%;
    align-items: flex-end;
    column-gap: 1%;
    background-color: yellow;
}

.exped-text > img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.exped-text > div {
    height: auto;
    position: relative;
    z-index: 1;
    background-color: #000000de;
    padding: 1%;
    border-radius: 0.5em;
}

.exped-text > div > img {
    height: 1em;
}

.exped-lore {
    font-size: 1.1em;
    flex-grow: 1;
    align-items: flex-start;
    overflow-y: auto;
    justify-content: flex-start !important;
    padding: 2%;
    box-sizing: border-box;
    border-top: 0.2em solid rgb(139, 133, 124);
}

.exped-bottom {
    height: 45%;
}

.exped-container {
    width: 30%;
    height: 100%;
    gap: 2%;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: center;
    border-right: 0.2em solid rgb(139, 133, 124);
    overflow-y: auto;
    padding: 1%;
    box-sizing: border-box;
    align-content: flex-start;
}

.enemy-head {
    max-width: 42%;
    height: auto;
    border: 0.15em solid #826147;
    border-radius: 1em;
    background-color: #F2D2B9;
}

.exped-loot {
    width: 70%;
    height: 100%;
    text-align: left;
    padding: 1%;
    box-sizing: border-box;
    align-items: flex-start;
}

.inv-div {
    position: relative;
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    gap: 2%;
    padding: 1%;
    box-sizing: border-box;
    justify-content: flex-start;
    scrollbar-width: 0.5vw;
}

.inv-div::-webkit-scrollbar {
    height: 0.5vw;
}

.inv-div > div {
    position: relative;
    height: 100%;
    aspect-ratio: 0.70;
    flex-direction: column-reverse;
}

.inv-div > div > :first-child {
    height: 20%;
    width: 100%;
    object-fit: contain;
}

.inv-div > div > :nth-child(2) {
    width: 100%;
    flex-grow: 1;
    object-fit: contain;
    transition: 0.1s ease;
}

.inv-div > div > :nth-child(2):hover {
    transform: scale(1.1);
}

.pop-up-loot {
    z-index: 2;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 0.8em;
    pointer-events: none;
    color: #cfc0ac;
    white-space: nowrap;
    padding: 5%;
    background-color: #000000ee;
    border-radius: 0.5em;
}

.after-icon {
    content: url(./assets/icon/energyIcon.webp);
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.075em #ffefef);
}

.guild-table {
    top:0;
    left:0;
    z-index: 112;
    background: url(./assets/bg/exped-bg.webp) no-repeat center center/cover;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1%;
    padding: 1%;
}

.guild-table::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0; 
    background-color: #00000028;
    pointer-events: none;
}

.guild-button {
    box-sizing: border-box;
    width: auto;
    height: 10%;
    padding: 1.5%;
    text-align: center;
    background-color: #5B656D;
    border: 0.2em solid #2C3742;
    color: rgb(255, 255, 255);
    transition: background-color 0.3s ease;
}

.guild-selected {
    background-color: #2C3742;
}

.guild-menu {
    position: relative;
    top: -1%;
    width: 98%;
    left: -1%;
    height: 85%;
    max-height: 85%;
    background-color: rgba(1, 1, 1, 0.75);
    color: white;
}

.bounty-menu {
    padding: 1% 0.5% 1% 0.5%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 1%;
    overflow-y:auto;
    border: 0.5em inset #7b5629;
    background-image: url(./assets/bg/wood.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.bounty-menu > p {
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 80%;
    text-align: center;
    color:#F4D9A9;
    background-color: #95412d;
}

.bounty-button {
    border: 0.2em solid #542619;
    box-sizing: border-box;
    width: 31%;
    height: 43%;
    background-color: #E1D9C8;
    justify-content: space-between;
    position: relative;
}

.bounty-button > :first-child {
    height: 20%;
    width: 100%;
    color: #F4D9A9;
    background-color: #95412d;
    text-align: center;
    font-size: 0.9em;
}

.bounty-button > :first-child > img {
    width: 15%;
    max-height: 90%;
    object-fit: contain;
}

.bounty-button > img {
    height: 80%;
    object-fit: contain;
    width: 100%;
    filter: grayscale(0.5) sepia(0.7)  contrast(0.8) drop-shadow(0 0 0.2em black);
}

.bounty-button > button {
    position: absolute;
    height:  auto;
    width: auto;
    top: 50%;
    left: 50%;
    padding: 2% 10% 2% 10%;
    color: #f3e4cb;
    border: 0.2em solid #954434;
    border-radius: 1.5em;
    background-color: #B75B48;
    transform: translate(-50%, -50%);
}

.bounty-button > img:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30%;
    object-fit: contain;
    width: auto;
    filter: drop-shadow(0 0 0.1em black);
}

.rank-menu {
    padding: 1.5%;
    box-sizing: border-box;
    gap: 1%;
    color: white;
}

.rank-menu > :first-child {
    justify-content: flex-start;
    gap: 1%;
    height: 30%;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.rank-button {
    position: relative;
    height: 100%;
    flex-basis: 15%;
    aspect-ratio: 0.9;
    transition: 0.4s ease;
}

.active-rank {
    transform:scale(1.1) translateY(-0.1em);
}

.rank-button > :first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rank-ico {
    position: absolute;
    bottom: 7%;
    height: 20%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.2em black);
}

.rank-button > p {
    position: absolute;
    color: white;
    font-size: 2.3em;
    filter: drop-shadow(0 0 0.4em #3556B0) drop-shadow(0 0 0.4em #3556B0);
}

.rank-lore {
    color: #423126;
    background-color: #ECE4DA;
    border: 0.2em solid #c8b697;
    height: 60%;
    width: 100%;
    overflow-y: auto;
    text-align: center;
    font-size: 1.4em;
    padding: 2%;
    box-sizing: border-box;
    justify-content: flex-start;
}

.rank-lore > div {
    height: 40%;
    width: auto;
    aspect-ratio: 1;
    position: relative;
    display: inline-flex;
    margin-left: 1%;
}

.rank-menu > :last-child {
    border-radius: 2em;
    height: 10%;
    width: auto;
    padding: 2% 5% 2% 5%;
    box-sizing: border-box;
    font: inherit;
}

.rank-button-claimed {
    color: #c1c1c1;
    background-color: #2D3743;
    border: 0.2em solid #757D83;
}

.rank-button-available {
    color: #2f4e27 !important;
    background-color: #A6D19A !important;
    border: 0.2em solid #5B8550 !important;
}

.commision-menu img {
    max-height: 100%;
    object-fit: contain;
}

.commision-list {
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 7em;
    box-sizing: border-box;
}

.commision-cell {
    position: relative;
    margin: 1%;
    margin-top: 2em;
    color: #423126;
    background-color: #ECE4DA;
    border: 0.2em solid #c8b697; 
    justify-content: space-around;
    padding: 0 0 0 2%;
    box-sizing: border-box;
    border-radius: 0.2em;
}

.commision-cell > img {
    position: absolute;
    bottom: 105%;
    right: 2%;
    height: 1em;
}

.commision-text {
    max-width: 8em;
    text-align: center;
}

.commision-text > p {
  text-overflow: ellipsis;
}

.commision-items {
    height: 100%;
    flex-grow: 1;
    margin-left: 2%;
    background-color: #b9a47f;
}

.commision-items > img {
    width: 30%;
}

.commision-cell > p:first-of-type {
    position: absolute;
    left: 4%;
    bottom: 100%;
    padding: 1%;
    background-color: #c8b697;
    color: #584021;
    border-bottom: 0;
    border-radius: 0.2em 0.2em 0 0;
}

.current-commision {
    width: 100%;
    height: 3em;
    justify-content: space-between;
    color: #c1c1c1;
    background-color: #2D3743;
    border: 0.2em solid #757D83;
}

.current-commision-cell {
    height: 100%;
    width: 33%;
    border-right: 0.2em solid #757D83;
    gap: 2%;
}

.current-commision-button {
    color: #c1c1c1;
    background-color: transparent;
    border-radius: 0.25em;
    padding: 1%;
}

.current-commision-cell:last-of-type {
    border-right: none;
}

.commision-footer {
    height: 2.5em;
    width: fit-content;
    padding: 0 2%;
    margin: 0 8%;
    color: white;
    background-color: #757D83;
}

.current-commision > p {
    margin: unset;
    padding: unset;
    text-align: center;
    background-color: unset;
}

#select-comission {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    color: #423126;
}

.commision-setting {
    width: 100%;
    height: 6em;
    max-height: 6em;
    background-color: #ECE4DA;
    border: 0.2em solid #c8b697;
}

.commision-setting > p {
    font-size: 0.8em;
    text-align: center;
    width: 7em;
    min-width: 7em;
    padding: 0 1%;
}

.select-commision-items {
    min-width: fit-content;
    padding: 0 2%;
    background-color: #b9a47f;
    height: 100%;
}

.select-commision-items > div > img {
    width: 3em;
}

.select-commision-items > img {
    height: 1.3em;
}

#pick-items {
    margin: 1.5%;
}

#pick-items > img {
    width: 4em;
    margin: 0.25em;
    filter: drop-shadow(0 0 0.1em black);
}

.commision-char {
    width: 100%;
    flex-grow: 1;
    display: grid;
    overflow-y: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 5em;
    gap: 2% 1%;
    padding: 1%;
    box-sizing: border-box;
}

.commision-button {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 0.2em solid #c8b697;
    color: #423126;
}

.commision-char > img {
    max-height: 1em;
}

.comm-heroes {
    flex-grow: 1;
    display: grid;
    grid-template-rows: 2em 1fr;
    grid-template-columns: 1fr 1fr 2fr;
    height: 100%;
    box-sizing: border-box;
    background-color: #423126;
    color: #ECE4DA;
}

.comm-heroes > p {
    padding-top: 0.2em;
    box-sizing: border-box;
    text-align: center;
}

.comm-heroes > p:last-child {
    font-size: 0.8em;
    padding: 0 2%;
}

.comm-heroes > div {
    max-width: 100%;
    max-height: 100%;
}

.comm-heroes > div > img {
    max-width: 100%;
    max-height: 90%;
    object-fit: cover;
}

.commision-picture {
    width: 30%;
    height: 100%;
    background-color: #b9a47f;
}

.commision-picture > :first-child {
    filter: drop-shadow(0 0 0.2em black);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.commision-button > p {
    flex-grow: 1;
}

/*/////////////////////////////// WISH (TABLE4) CSS ///////////////////////////////*/
.wish-counter {
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: url(./assets/bg/wish-bg.webp);
    background-position: center;
    background-size: cover;
}

.wish-button {
    font-family: gi-font;
    position: absolute;
    top: 100%;
    width: 70%;
    height: unset;
    aspect-ratio: 4.3;
    font-size: inherit;
    color: #F8E8C7;
    text-shadow: #73603D 0.15em 0.15em 0.1em;
}

.wish-button-aranara {
    top: unset;
    bottom: 0%;
}

.wish-button-img {
    object-fit: contain;
}

.wish-button:hover{
    filter: drop-shadow(0 0 0.2em white);
    transition: .3s ease;
}

.wish-button-new:active {
    transform:scale(0.95);
    transition: 0.1s ease;
}

.wish-button-text {
    width: 100%;
    height: 100%;
    position: absolute;
    column-gap: 1%;
    font-size: 1.4em;
}

.wish-button-primo {
    width: 5%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.1em #40280b);
}

.wish-mail-container {
    position: relative;
    top: 0%;
    width: 100%;
    height: 100%;
}

.wish-mail-div {
    position: relative;
    top: -10%;
    width: 80%;
    height: 80%;
    object-fit:cover;
    display: flex;
    justify-content: center;
}

#wish-tutorial {
    position: absolute;
    bottom: 2%;
    left: 2%;
    height: 7%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0.15em 0.15em 0.07em #e6b880a1);
}

.wish-mail {
    object-fit: contain;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    -o-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
}

#wish-nps-display {
    position: absolute;
    top: 15%;
    left: 3%;
    height: auto;
    width: auto;
    padding: 1.5%;
    object-fit: contain;
    background-color: #7C503B;
    color: white;
    border: 0.2em solid #6E4431;
    border-radius: 0.1em;
    filter: drop-shadow(0.25em 0.25em 0.1em #90765584);
}

#wish-counter-display {
    position: absolute;
    top: 7%;
    left: 5%;
    height: 8%;
    width: 20%;
    background-color: #ae765c;
    color: white;
    border: 0.2em solid #6E4431;
    box-sizing: border-box;
    border-radius: 0.3em 0.3em 0 0;
    border-bottom: 0;
    color: #e5ddda;
    font-size: 1.25em;
}

#wish-counter-display > img {
    position: relative;
    left: 8%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.15em #b7a81e);
}

.wish-img {
    position: relative;
    height: 60%;
    width: auto;
    animation: dropDown 1.5s ease forwards;
    transition: 0.5s ease;
}

.wish-img:hover {
    transform: scale(1.05);
}

/*/////////////////////////////// ACHIEVEMENT (TABLE5) CSS ///////////////////////////////*/
#table5-container {
    font-size: 10;
    background: url(./assets/bg/achievementBG.webp);
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: inherit;
}

.achieve {                                         
    z-index:2;
    position: absolute;
    bottom: 18%;
    width:90%;
    height:10%;
    text-align: center;
    background:url(./assets/frames/achievement-temp.webp);
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: fadeInOut 4.5s cubic-bezier(.93,-0.24,.93,.81) forwards;
}

.achieveH1 {
    font-size: 0.9em;
}

.achieveH2 {
    font-size: 0.8em;
}

.achieve:hover {
    transition: 0.4s ease;
}

.table5-Image {
    position: absolute;
    width: 95%;
    height: 90%;
    top: 10%;
    background:url(./assets/bg/left.webp), url(./assets/bg/middle.webp), url(./assets/bg/right.webp);
    background-repeat: no-repeat;
    background-position: left, center, right;
    background-size: auto 100%, 90% 100%, auto 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table5-Image > div {
    width: auto;
    position: absolute;
    bottom: 98%;
    left: 8%;
    gap:1%;
    height: 10%;
    width: 100%;
    justify-content: flex-start;
}

.table5-Image > div > img {
    width: fit-content;
    height: 100%;
    position: relative;
    transition: 0.3s ease;
}

.table5-Image > div > img:hover {
    transform: translateY(-12%);
}

.flex-container-ACHIEVEMENT {
    position: absolute;
    width: 90%;
    height: 80%;
    top: 12%;
    
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 1% 1%;
}

.achievementImageContainer {
    width: 20%;
    height: auto;
    position:relative;
}

 .achievementImageNumber {
    position: absolute;
    bottom: 11%;
    width:25%;
    left: 38%;
    object-fit: contain;
 }

.achieve-stored-text {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 10%;
}

.achieve-stored {
    width: 49%;
    aspect-ratio: 4.5;
    display: flex;
    justify-content: space-evenly;
    font-family: 'gi-font';
    color: #5b4e32;
    text-align: center;
    background-image: url(./assets/frames/achievement.webp);
    background-size: 100%;
    background-position: center center;
}

.achieveStoredH1 {
    font-size: 0.85em;
    color: #343030;
    margin: 0;
}

.achieveStoredH2 {
    font-size: 0.75em;
    margin: 0;
}

#challenge-div {
    position: absolute;
    width: 90%;
    height: 80%;
    top: 12%;
    color: #D9BD85;
    font-size: 1em;
    overflow-y: auto;
    justify-content: flex-start;
    gap: 2%;
    transform: translateZ(0);
}

.tier-button {
    background-color: #1F2834;
    border: 0.2em solid #333D47;
    outline: 0.2em solid #1F2834;
    width: 95%;
    padding: 1%;
    box-sizing: border-box;
}

.tier-button:first-of-type {
    margin-top: 0.4em;
}

.tier-container {
    width: 85%;
}

.tier-container > div {
    padding: 1%;
    background-color: #C1A172;
    border: 0.15em solid #A79468;
    outline: 0.2em solid #C1A172;
    color: #343938;
    margin-bottom: 2%;
    flex-direction: row-reverse;
    gap: 4%;
}

.challenge-button {
    font-size: 0.8em;
    width: 25%;
    padding: 1%;
    background-color: #314151;
    border: 0.15em solid #162120;
    color: rgb(236, 236, 236);
    border-radius: 0.6em;
    transition: 0.15s ease;
}

.challenge-button-unclaimed {
    background-color: #d8c5ac; 
    border: 0.15em solid #68563d;
    color: #3a2e1e;
}

.challenge-button-claimed {
    background-color: #68563d;
    border: 0.15em solid #d8c5ac; 
    color: #efe2d0;
}

.tier-container > div > div {
    width: 80%;
    text-align: center;
}

.tier-container > div > div > p:first-of-type {
    position: relative;
    left: 2.5%;
    width: 95%;
    padding-bottom: 0.2em;
    border-bottom: 0.125em solid #3b4543;
    margin-bottom: 0.2em;
    color: #303a38;
}

.challenge-pop-up {
    position: absolute;
    bottom: 1%;
    left: 50%;
    z-index: 150;
    width: auto;
    height: 12.5%;
    aspect-ratio: 6.92;
    padding-left: 5%;
    padding-right: 2%;
    box-sizing: border-box;
    color: #f6f1f6;
    background: url(./assets/frames/challenge-temp.webp) no-repeat center center / cover;
    transform: translateX(-50%);
}

.challenge-pop-up > p {
    height: 100%;
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    text-align: center;
}
 

/*/////////////////////////////// TOOLTIP UI (TABLE6) CSS ///////////////////////////////*/
#table6 {
    padding: 1%;
    font: inherit;
    font-size: 1.08em;
    position: relative;
    width: 30%;
    height: 87.5%;
    display: flex;
    flex-direction: column;
    gap: 1%;
    align-items: center;
    color: var(--very-dark-brown);
}

#table6 > div, form {
    z-index: 5;
}

#table6 > form {
    font-size: 0.8em;
    width: 100%;
}

.prefer-container {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 0.25em;
}

.prefer-container > input:checked ~ .checked-prefer {
    background-color: #867256;
}

.checked-prefer:after {
    content: "";
    position: absolute;
    display: none;
}

.prefer-container > input:checked ~ .checked-prefer:after {
    display: block;
}

.prefer-container > .checked-prefer:after {
    left: calc(50% - 0.075em);
    top: 0.1em;
    width: 0.2em;
    height: 0.45em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    -webkit-transform: rotate(45deg) translate(-10%, 20%);
    -ms-transform: rotate(45deg) translate(-10%, 20%);
    transform: rotate(45deg) translate(-10%, 20%);
}

.checked-prefer {
    position: absolute;
    top: 0;
    left: 5%;
    height: 1em;
    width: 1em;
    background-color: #51432f;
  }

.prefer-container > input {
    -webkit-appearance: none;
    appearance: none;
    background-color: #51432f;
    margin: 0;
}

.prefer-container > p {
    display: inline;
    position: relative;
    left: 18%;
}

.toolInfo {
    width: 100%;
    height: fit-content;
    gap: 2%;
}

.toolImg {
    position: absolute;
    top: 2.5%;
    left: 2.5%;
    width: 95%;
    height: 95%;
    object-fit: contain;
    z-index: 10;
    border-radius: 6%;
}

.toolImgContainer {
    position: relative;
    width: 50%;
    aspect-ratio: 1;
    background-image:url(./assets/tooltips/border.webp);
}

.toolImgOverlay {
    position: relative;
    top: 2.5%;
    left: 2.5%;
    width: 95%;
    height: 95%;
    object-fit: contain;
    z-index: 50;
    border-radius: 6%;
    
}

.table6-background {
    position: absolute;
    object-fit: fill;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.tool-tip-name {
    font-size: inherit;
    text-align: center;
    height: fit-content;
    width: 100%;
}

.tool-tip-text {
    font-size:  0.8em;
    text-align: center;
    height: fit-content;
}

.tool-tip-lore {
    font-size: 0.9em;
    overflow-y: auto;
    flex-grow: 1;
}

.tool-tip-lore::-webkit-scrollbar {
    width: 0.3vw;
}

.tool-tip-extraimg {
    display: flex;
    gap: 5%;
    flex-direction: row;
    align-items: center;
    z-index: 5;
    width: 40%;
    aspect-ratio: 12;
}

.tool-tip-extraimg > img {
    width: 49%;
    aspect-ratio: 1;
}

#tool-tip-button {
    position: absolute;
    top: 99%;
    background-color: var(--dark-brown);
    border-top: 0.15em solid var(--very-dark-brown);
    border-bottom: 0.15em solid var(--very-dark-brown);
    box-sizing: border-box;
    height: 13%;
    width: 100%;
    z-index: 5;
    font-family: gi-font;
    font-size: 1.4em;
    color: white;
    text-shadow: var(--very-dark-brown) 0.08em 0.08em 0.1em;
}

#tool-tip-button:hover {
    filter: brightness(115%);
}

/*//////////// TREE CSS /////////////*/
#tree-table {
    height: 100%;
    padding: 2%;
    box-sizing: border-box;
    row-gap: 2% !important;
}

#tree-table::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    filter: opacity(0.9);
    background: url(./assets/bg/tree-bg.jpg) no-repeat center center/cover;
}

#tree-table > p {
    color: white;
    font-size: 1.5em;
    text-shadow: var(--text-shadow-075);
}

.options-container {
    width: 100%;
    max-height: 70%;
    gap:2%;
    justify-content: space-evenly;
}

.options-container > div {
    width: 20%;
    height: auto;
    aspect-ratio: 1;
    background-color: var(--bright-medium-green);
    border: 0.2em solid var(--bright-dark-green);
    border-radius: 1em;
    text-align: center;
    padding: 1%;
    color: var(--very-dark-green);
    transition: 0.3s ease;
}

.options-container > div:hover {
    transform: scale(1.05);
}

.options-container > div > img {
    height: 80%;
    filter: drop-shadow(0 0 0.1em black);
    object-fit: contain;
}

.options-container > div > p {
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 1.2em;
}

#seed-container {
    position: relative;
    width: 100%;
    gap: 1%;
}

.seed-column {
    padding: 1%;
    border-radius: 0.5em;
    width: 25%;
    text-align: center;
    border: 0.2em solid #88705B;
    border-radius: 0.3em;
    background-color: #E9D5C1;
    color: #48392b;
}

.seed-column > img {
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.2em black);
}

.seed-column > button {
    width: 20%;
    margin-right: 2.5%;
    font-size: 1.2em;
    margin-top: 0.2em;
    background-color: #B1A79A;
    color: #48392b;
}

.seed-column > button:last-of-type {
    margin-right: 0%;
}

#seed-container > button {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, 100%);
    background: transparent url(./assets/tutorial/exped-button.webp) center/contain no-repeat;
    height: auto;
    width: 33%;
    aspect-ratio: 4.61;
    color: #f0e5da;
}

#tree-side {
    background: linear-gradient(to bottom, #ACA9FC, #D2EEFC);
}

.tree-progress, .leyline-progress {
    position: absolute;
    top: 2%;
    width: 90%;
    height: auto;
    max-height: 5%;
    border-radius: 0.25em;
    border: 0.12em solid var(--very-dark-green);
    background-color: var(--bright-dark-green);
}

.tree-progress-value {
    position: absolute;
    right: 6%;
    top: 7%;
    color: white;
    font-size: 1.3em;
    text-shadow: var(--text-shadow-050);
}

.tree-sand {
    position: absolute;
    bottom: 0;
    min-width: 100%;
    height: 30%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.1em black);
}

.tree-two, .tree-three, .tree-four {
    position: absolute;
    bottom: 15%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.1em black);
    max-height: 70%;
}

.tree-health {
    position: absolute;
    right: 2%;
    bottom: 1%;
    height: 15%;
    aspect-ratio: 1;
}

.tree-health > img {
    max-height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 0.1em black);
}

.tree-health > p {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.756);
    color: white;
    border-radius: 0.2em;
    padding: 2%;
    text-align: center;
}

.tree-container {
    position: absolute;
    bottom: 10%;
}

.tree-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    z-index: 1;
    position: relative;
}

.tree-2::before, .tree-3::before, .tree-4::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    width: 30%;
    height: 10%;
    transform: translateX(-40%) translateY(15%);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    filter: blur(0.4em);
}

.tree-2::before {
    transform: translateX(-100%) translateY(10%);
}

.tree-3::before {
    width: 35%;
}

.tree-4::before {
    width: 40%;
    transform: translateX(-60%) translateY(20%);
}

.tree-1 {
    width: 5%;
    filter: drop-shadow(0.1em 0.1em 0.1em black);
}

.tree-2 {
    width: 50%;
    /* filter: drop-shadow(0em 0.15em 0.2em black); */
}

.tree-3 {
    width: 70%;
}

.tree-4 {
    width: 95%;
    height: 75%;
}

.cloud {
    z-index: -1;
    right: 100%;
    position: absolute;
    width: 20%;
    height: auto;
    touch-action: none;
    /* right: 100%; */
}

.affinity-container {
    width: auto;
    height: 10%;
    background-color: yellow;
    padding: 1%;
    gap:2%;
}

.affinity-container > div:first-of-type {
    margin-left: 5%;
}

.affinity-container > div {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    align-items: flex-end;
}

.affinity-container > div > p {
    transform: translateY(90%);
}

#tree-offer-container, #leyline-container {
    margin-top: 1em;
    position: relative;
    width: 100%;
    padding: 1% 1%;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.3em;
    color: white;
}

#tree-offer-container > p {
    font-size: 1.2em;
    margin: 0.4em;
    text-align: center;
}

#tree-offer-container > p:last-of-type {
    font-size: 1em;
    line-height: unset;
}

.tree-access {
    right: 24% !important;
    background: url(./assets/tree/tree-icon.webp) no-repeat center center/contain !important;
}

#tree-block {
    position: absolute;
    top: 0;
    left: 0;
}

#tree-store-currency {
    left: 2% !important;
    bottom: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: none !important;
}

#tree-offer-items {
    width: 95%;
    height: fit-content;
    padding: 2% 0;
    gap: 1%;
}

#tree-offer-items > img {
    margin: 0.5em;
    width: 8%;
    aspect-ratio: 1;
    object-fit: contain;
}

#tree-offer-items > div, .notif-item > div {
    width: 25%;
    max-width: 6em;
    height: auto;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--pale-light-green);
    border: 0.2em solid var(--bright-dark-green);
    box-sizing: border-box;
    border-radius: 0.2em;
    color: var(--very-dark-green);
}

#tree-offer-items > div:first-of-type > img:first-of-type {
    width: auto;
    max-width: 3.5em;
    flex-grow: 1;
}

#tree-offer-items > div > img:first-of-type {
    width: auto;
    max-width: 100%;
    height: 80%;
    object-fit: contain;
    aspect-ratio: 1;
    filter: drop-shadow(0.1em 0.1em 0.1em black);
}

#tree-offer-items > div > img:nth-of-type(2), .notif-item > div > img:nth-of-type(2) {
    height: 15%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.1em black);
}

#tree-offer-container > container, #leyline-container > div:last-of-type {
    width: 100%;
    gap: 2%
}

#tree-offer-container > container > button, #leyline-container > div:last-of-type > button {
    width: 33%;
    aspect-ratio: 4.61;
    font-size: 1em;
    color: white;
    text-shadow: var(--text-shadow-075);
    background: transparent url(./assets/tutorial/nutPill.webp) center/contain no-repeat;
}

.tree-enemy {
    position: absolute;
    background-color: #3E4758;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    padding: 1%;
    padding-bottom: 0;
    width: 80%;
    color: white;
    text-shadow: 0.1em 0.1em 0.25em black;
    font-size: inherit;
    background-color: #3E4659;
    border: 0.2em solid #8B857C;
}

.tree-enemy > img {
    width: 70%;
    margin: 2%;
    object-fit: contain;
    border: 0.2em solid #D5C8B8;
    box-shadow: 0 0 0.5em black;
}

.tree-enemy > p:first-of-type {
    font-size: 1.4em;
}

.tree-enemy > p:last-of-type {
    width: 90%;
    text-align: left;
}

.tree-enemy > button {
    margin: 2%;
    font-size: 1.1em;
    padding: 1%;
    background-color: #557a36;
    border-radius: 0.5em;
    color: white;
}

.chain-lock::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: url(./assets/bg/chains.webp) no-repeat center center/cover;
}

#leyline-container {
    margin-top: 0.5em;
    height: fit-content;
    justify-content: flex-start;
    text-align: center;
}

#leyline-container > p:first-of-type {
    font-size: 1.4em;
    color: #e39f2b;
}

#leyline-container > div:last-of-type {
     margin-top: 1em;
}

.leyline-progress {
    position: relative;
    top: unset;
    max-height: 2.5rem;
    margin: 2% 0;
    border-radius: 0.4em;
    border: 0.2em solid #c8b697;
    background-color: transparent;
}

/*//////////// OTHER CSS + ANIMATION CSS /////////////*/
.beta-warning {
    position: absolute;
    left: 50%;
    z-index: 99999999;
    background-color: yellow;
    color: purple;
    pointer-events: none;
}

.choice-ele, .notif-ele {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: 100%;
    color:white;
}

.choice-ele > *, .notif-ele > * {
    z-index: 10;
}

.choice-ele > div, .notif-ele > div {
    position: relative;
    top: -5%;
    background-color: var(--pale-green);
    border: 0.2em solid var(--bright-dark-green);
    border-radius: 0.5em;
    padding: 2% 4% 1% 4%;
    max-width: 40%;
    filter: drop-shadow(0.2em 0.2em 0.2em black);
    animation: scaleIn 1s ease-in-out forwards;
    animation-delay: -0.7s;
}

.choice-ele > div > img {
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.2em black);
    margin-top: 0.5em;
    margin-bottom: -1em;
}

.smaller-choice-ele > div {
    padding: 1%;
}

.notif-ele > div {
    padding: 1%;
    width: 70%;
}

#notif-list {
    font-size: 1.2em;
    margin: 1em;
    width: 100%;
    color: #233d10;
    text-shadow: unset;
    text-align: left;
    padding-left: 1em;
}

.notif-item {
    width: 95%;
    height: fit-content;
    margin-top: 0em;
    padding: 2% 0;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-auto-rows: auto;
    overflow: hidden;
}

.notif-item > div, .notif-item  > img {
    width: 95%;
    margin-bottom: 2%;
    max-width: unset;
}

.notif-item-number > div {
    flex-grow: 1;
    aspect-ratio: 1;
    width: unset;
}

.notif-item-number {
    background-color: unset !important;
    border: unset !important;
    color: white !important;
    text-shadow: var(--text-shadow-075);
}

.choice-ele > div > p, .notif-ele > div > p {
    font-size: 1.4em;
    text-shadow: var(--text-shadow-075);
    text-align: center;
}

.choice-ele > div > div {
    margin-top: 1.5em;
    gap: 5%;
}

.choice-ele > div > div > button, .notif-ele > div > div > button {
    font-size: 1.1em;
    padding: 5%;
    background-color: #557a36;
    border-radius: 0.5em;
    color: white;
    width: fit-content;
    white-space: nowrap;
}

.choice-ele > div > div > button:nth-of-type(2) {
    background-color: #a2443b;
}

.choice-ele:before, .notif-ele:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.80);
    pointer-events: all;
}

@keyframes vibrate {
	0% {transform: translate(0);}
    20% {transform: translate(2.5%, -5%);}
    40% {transform: translate(5%, 5%);}
    60% {transform: translate(-2.5%, 2.5%);}
    80% {transform: translate(-5%, -5%);}
	100% {transform: translate(0);}
}

@keyframes rubberband {
    0% {transform: scaleX(1);}
    30% {transform: scale3d(1.10, 0.85, 1);}
    40% {transform: scale3d(0.90, 1.10, 1);}
    50% {transform: scale3d(1.05, 0.90, 1);}
    65% {transform: scale3d(0.95, 1.05, 1);}
    75% {transform: scale3d(1.05, 0.95, 1);}
    100% {transform: scaleX(1);}
}

@keyframes vibrate-hard {
	0% {transform: translate(0);}
    20% {transform: translate(7%, -7%);}
    40% {transform: translate(3.5%, 3.5%);}
    60% {transform: translate(-3.5%, 3.5%);}
    80% {transform: translate(-7%, -7%);}
	100% {transform: translate(0);}
}

@keyframes slide {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(600%);}
}

@keyframes darkness-transition {
    0% {filter: brightness(1);}
    50% {filter: brightness(0);}
    100% {filter: brightness(1);}
}

@keyframes darkness-transition-slow {
    0% {filter: brightness(1);}
    40%, 65% {filter: brightness(0);}
    100% {filter: brightness(1);}
}

@keyframes vignette-animation {
    0% { filter: opacity(1);}
    50% { filter: opacity(0.5);}
    100% { filter: opacity(1);}
}

@-webkit-keyframes pulsate-fwd {
    0% { transform: scale(1);}
    50% { transform: scale(1.045);}
    100% { transform: scale(1);}
}

@keyframes pulsate-fwd {
    0% { transform: scale(1);}
    50% { transform: scale(1.045);}
    100% { transform: scale(1);}
}

@keyframes darken-animation {
    from { height: 0%; }
    to { height: 100%; }
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 125px;
  }
}

@keyframes blink {
    0%,50%,100% {
      opacity: 1;
    }
    25%,75% {
      opacity: 0.6;
    }
}

@keyframes rotation {
    from {transform: rotate(0deg);} 
    to {transform: rotate(359deg);}
}

@keyframes fadeOutOpacity {
    0% { 
        opacity: 1.0;
        transform: translateY(0);
    }
    50% { 
        opacity: 1.0;
    }
    100% {
        opacity: 0.5;   
        transform: translateY(-15em);
    }
}

@keyframes fadeOutCritOpacity {
    0% {    opacity: 1.0}
    75% {   opacity: 0.9}
    100% {  opacity: 0.25}
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

@keyframes fall {
    from {transform: translate(0,-1em);}
    to {transform: translate(0,40em);}
}

@keyframes slidedown-pop {
    0% { transform: translateY(-205%);}
    100% { transform: translateY(0); }
}

@keyframes pop-up-animation {
    0% {
      transform:translateX(-1em);
      opacity: 0;
    }
    100% {
      transform:translateX(0);
      opacity: 1;
    }
}
  
@keyframes shake {
    0%, 100% {
        transform: translate(-55%,0)
    }
    10%, 30%, 50%, 70% {
        transform: translate(-55%,3%)
    }
    20%, 40%, 60%, 80% {
        transform: translate(-55%,-3%)
    }
}

@keyframes tallyCount {
    0% {transform: scale(1.15)}
    100% {transform: scale(1)}
}

@keyframes fadeInOut {
    0% {opacity: 0.65}
    5% {opacity: 1}
    100% {opacity: 0}
}

@keyframes textFadeOut {
    0% {
        color:white;
        text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.758), 0 0 0.2em rgba(0, 0, 0, 0.751), 0 0 0.2em black;
    }
    50% {
        color:rgba(255, 255, 255, 0);
        text-shadow: none;
    }
    100% {
        color:white;
        text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.758), 0 0 0.2em rgba(0, 0, 0, 0.751), 0 0 0.2em black;
    }
}

@keyframes battle-text {
    15% { transform:translateY(0%); }
    30% { transform:translateY(-35%); }
    45% { transform:translateY(-15%); }
    65% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0); }
    95% { transform:translateY(-5%); }
    100% { transform:translateY(0); }
}

@keyframes tada {
    0%, 100% {
        -webkit-transform: scaleX(1);    
        transform: scaleX(1);
    }
    10%, 20% {    
        -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);;
        transform: scale3d(.9,.9,.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.2,1.2,1.2) rotate(3deg);
        transform: scale3d(1.2,1.2,1.2) rotate(3deg);
    }
    40%, 60%, 80% {  
        -webkit-transform: scale3d(1.2,1.2,1.2) rotate(-3deg);
        transform: scale3d(1.2,1.2,1.2) rotate(-3deg);
    }
}

@keyframes atk-delay {
    0% {
        filter: brightness(0);
        transform: scale(1);
    }
    80% {
        filter: brightness(0.7);
        transform: scale(1);
    }
    80.1% {
        filter: brightness(1) drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.3em white);
        transform: scale(1.2);
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.3em white);
        transform: scale(1.2);
    }
}

@keyframes explosion {
    0% {
        transform: scale(1);
    }
    50% {
        filter: brightness(1.35) drop-shadow(0 0 0.2em #BC86F0) drop-shadow(0 0 0.3em #BC86F0);
        transform: scale(1.3);
    }
    100% {
        filter: brightness(1.2) drop-shadow(0 0 0.2em #BC86F0) drop-shadow(0 0 0.3em #BC86F0);
        transform: scale(1.8);
    }
}

@keyframes slideOutOsu {
    0% {
      transform: scale(0.6) translateY(0);
      opacity: 0.7;
    }
    50% {
        transform: scale(0.5) translateY(12.5%);
        opacity: 0.25;
    }
    75% {
        transform: scale(0.45) translateY(20%);
        opacity: 0;
    }
    100% {
      transform: scale(0.45) translateY(25%);
      opacity: 0;
    }
  }

@keyframes glow {
    0% {transform: translateY(0)}
    50% {transform: translateY(-40%)}
    100% {transform: translateY(0)}
}

@keyframes rotate {
    0% {transform: rotate(0)}
    100% {transform: rotate(360deg)}
}

@keyframes flipIn {
    0% {transform: scaleX(0)}
    100% {transform: scaleX(1)}
}

@keyframes horizontalSway {
    0%, 100%, 50%  {
        translate: 0 0;
    }
    25% {
        translate: 50% 0;
    }
    75% {
        translate: -50% 0;
    }
}

@keyframes scaleIn {
    0% {transform: scale(0)}
    100% {transform: scale(1)}
}

@keyframes puffOut {
    0% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        filter: blur(0.5em);
        opacity: 0;
    }
}

@keyframes puffOutSmall {
    0% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        filter: blur(0.25em);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.1);
        filter: blur(0.5em);
        opacity: 0;
    }
}

@keyframes puffOutMirror {
    0% {
        transform: scale(1) scaleX(-1);
        filter: blur(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) scaleX(-1);
        filter: blur(0.5em);
        opacity: 0;
    }
}

@keyframes dropDown {
    0% {top: -100%}
    100% {top: 0%}
}

/* ----------------------------------------------
 * Generated by Animista on 2023-2-13 17:9:45
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 @-webkit-keyframes shadow-pop-tr {
    0% {
      -webkit-box-shadow: 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357;
              box-shadow: 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
    100% {
      -webkit-box-shadow:  0.05em -0.05em #867357, 0.1em -0.1em  #867357, 0.2em -0.2em #867357, 0.3em -0.3em #867357;
              box-shadow:  0.05em -0.05em #867357, 0.1em -0.1em  #867357, 0.2em -0.2em #867357, 0.3em -0.3em #867357;
      -webkit-transform: translateX(-0.3em) translateY(0.3em);
              transform: translateX(-0.3em) translateY(0.3em);
    }
}

@keyframes shadow-pop-tr {
    0% {
      -webkit-box-shadow: 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357;
              box-shadow: 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357, 0 0 #867357;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
    100% {
        -webkit-box-shadow: 0.05em -0.05em #867357, 0.1em -0.1em  #867357, 0.2em -0.2em #867357, 0.3em -0.3em #867357;
              box-shadow:  0.05em -0.05em #867357, 0.1em -0.1em  #867357, 0.2em -0.2em #867357, 0.3em -0.3em #867357;
         -webkit-transform: translateX(-0.3em) translateY(0.3em);
              transform: translateX(-0.3em) translateY(0.3em);
    }
}

@keyframes slit-in-horizontal {
    0% {
      transform: translateZ(-6em) rotateX(90deg);
      opacity: 0;
    }
    54% {
      transform: translateZ(-1em) rotateX(70deg);
      opacity: 1;
    }
    100% {
      transform: translateZ(0) rotateX(0);
    }
}

@keyframes sway {
    0%, 100% {
        transform: translateY(5%);
    }
      50% {
        transform: translateY(-5%);
    }
}