* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--dark2) var(--dark1);

    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

::-webkit-scrollbar-track {
    background: var(--dark2);
}

@font-face {
  font-family: 'Winky Sans'; 
  src: url('font/WinkySans.ttf');
  font-weight: 500;
}

@font-face {
  font-family: 'Megrim'; 
  src: url('font/Megrim.ttf');
}

* {
  font-family: 'Winky Sans', sans-serif;
  letter-spacing: 1px;
}


:root {

    --dark1: #36342F;
    --dark2: #444138;

    --light1: #94886B;
    --light2: #ECDEB7;
    
    --accent: #ffe15e;

    --type-bug: #92BD2D;
    --type-dark: #595761;
    --type-dragon: #0C6AC8;
    --type-electric: #F2D94E;
    --type-fairy: #EF90E6;
    --type-fighting: #D3425F;
    --type-fire: #FBA64C;
    --type-flying: #A1BBEC;
    --type-ghost: #5F6DBC;
    --type-grass: #60BE58;
    --type-ground: #DA7C4D;
    --type-ice: #76D1C1;
    --type-normal: #A0A29F;
    --type-poison: #B763CF;
    --type-psychic: #FA8582;
    --type-rock: #C9BC8A;
    --type-steel: #5795A3;
    --type-water: #539DDF;
}

body {
        background-color: var(--dark1);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: fixed;
}


#game-version{
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: white;
    font-size: 1.2rem;
    opacity: 0.3;

}

#debug-panel{
    position: absolute;
    left: 2rem;
    top: 2rem;
    border-radius: 1rem;
    height: 15rem;
    width: 10rem;
    background: var(--dark1);
    outline: white solid 2px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

#debug-panel div{
    background: var(--dark2);
    color: var(--light1);
    width: 100%;
    text-align: center;
    cursor: pointer;    
}

#bg-pattern {
    height: 100%;
    width: 100%;
    position: fixed;
    background-image: url('img/bg/main-bg.png');
    background-repeat: repeat-x;
    background-position: 0 0;
    opacity: 0.1;
    animation: bg-horizontal 600s linear infinite reverse;
}



#main-content{
    width: 50%;
    height: 100%;
    position: fixed;
    background: red;
    background-color: var(--dark2);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 10px;
    overflow: scroll;
    overflow-x: hidden;
    background-image: url(img/bg/empty.jpg);
    background-position: bottom middle;
    background-size: cover;
}

@media (max-width: 1000px) {
    #main-content {
        width: 100%;
    }
}


#content-explore{
    position: fixed;
    height: 100%;
    width: 50%;
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;
    padding: 0rem;
    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 20;
    background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ; 
}

@media (max-width: 1000px) {
    #content-explore {
        width: 100%;
    }
}



#explore-header{
    height: auto;
    width: 100%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background-image: url(img/bg/forest.png);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 5px 2px;
    background-size: contain;
    background-position: bottom left;
    image-rendering: pixelated;
    margin-bottom: 0.5rem;
}

@media (max-width: 1000px) {
    #explore-header {
            background-size: cover;
    }
}

.explore-header-infobox{
    height: 100%;
    width: 100%;
    background: var(--light2);
    border-radius: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 0.3rem;
    flex-direction: column;
    gap: 0.3rem;
    
}

.explore-sprite{
    height: 11rem;
    width: 10rem;
    cursor: help;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0rem;
}


.explore-sprite img{
    image-rendering: pixelated;
    animation: pkmn-active 0.5s infinite;
    z-index: 3;
    margin-top: auto;
    scale: 2;
    transform-origin: center bottom;
}

@keyframes pkmn-active{
    0% { transform: translateY( 0%);}
    49% { transform: translateY( 0%);}
    50% { transform: translateY( -5%);}
    100% { transform: translateY( -5%);}
}

@keyframes selectPoke{
    0% { }
    100% { scale: 0.9; filter: brightness(2);}
}

.explore-header-hpbox{
    background: var(--dark1);
    height: auto;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 0.3rem;
    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 1px 2px;
    gap: 0.2rem;
    flex-shrink: 0;
    white-space: nowrap;
}




.explore-hp{
    width: 100%;
    height: 0.5rem;
    background: rgb(130, 211, 130);
    border-radius: 0.1rem;
    transition: 0.5s all;
    flex-shrink: 0;
    
}

.explore-hp-wild{
        position: absolute;
    width: 100%;
    height: 0.5rem;
    background: rgb(130, 211, 130);
    border-radius: 0.1rem;
    transition: 0.5s all;
    flex-shrink: 0;
}

.explore-header-moves{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 0.2rem;
flex-direction: column;
}

.header-help{
    padding: 1.3rem 0.4rem !important;
    transition: 0.1s;
    cursor: help;
}

.header-help svg{
    margin: 0  !important;
}

.header-help:hover{
    background: var(--dark1) !important;
    scale: 1.1;
}


.pkmn-movebox-progress{
    width: 0%;
    height: 100%;
    position: absolute;
    left: 0;
    background: var(--type-ice);
    z-index: 0;
    opacity: 0.5;
}

.pkmn-movebox strong{
    color: gray;
    font-weight: 300;
    margin-left: 0.5rem;
    opacity: 0.7;
}

@keyframes wildPokemonDown{
    0%{}
    100%{opacity: 0; transform: translateY(1rem);}
}

@keyframes wildPokemonSpawn{
    0%{opacity: 0; scale: 1;}
    100%{opacity: 1; scale: 2;}
}


@keyframes moveboxFire {
    0%{scale: 0.95; filter: brightness(1.5);}
    100%{scale: 1; filter: brightness(1);}
}

.pkmn-movebox{
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--type-dark) solid 2px;
    padding-left: 0.5rem;
    background: var(--dark1);
    color: white;
    border-radius: 0.3rem;
    position: relative;
    cursor: help;
    transition: 0;
    white-space: nowrap;
}

.pkmn-movebox:hover{
    scale: 1.01;
}

.pkmn-movebox img{
    height: 2rem;
    width: 2rem;
    background-color: var(--type-dark);
    padding: 6px;
    margin-left: auto;
    z-index: 2;
}

.pkmn-movebox span{
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    pointer-events: none;
}

.pkmn-movebox span svg{
    margin-left: 0.3rem;
    height: 70%;
    width: auto;
}

#explore-team{
    height: auto;
    width: 100%;
    border: solid 2px var(--light1);
    border-radius: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.3rem;
        background: var(--dark2);

}

.explore-team-member{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--light1);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    
}

.explore-team-member .explore-header-infobox{
    background: transparent;
}

.explore-team-member-flair{
    position: absolute;
    height: 18rem;
    width: 18rem;
    animation: rotate 10s infinite linear;
    opacity: 0.3;
    left: -7rem;
    top: -7rem;
    z-index: 0;
}

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


.explore-team-member .explore-header-hpbox{

    box-shadow: none;
}

.explore-team-member .explore-sprite{
    pointer-events: none;
}

.explore-team-member .explore-sprite img{
    margin: initial;
    pointer-events: initial;
}

.member-inactive .explore-sprite{
    height: 4rem;
    pointer-events: none;
}

.floating-pkmn{
    padding-bottom: 1rem;
}

.explore-team-member .explore-sprite img{
    transform-origin: center;
    image-rendering: pixelated !important;
    pointer-events: initial;
}


.member-inactive .explore-sprite img{
    scale: 1;
    max-height: 4rem;
}



.member-inactive{
    height: 4rem;
    background: var(--dark1);
    cursor: pointer;
}

.member-inactive .pkmn-movebox{
    display: none;
}

.member-inactive .explore-team-member-flair{
    display: none;
}

.explore-pkmn-level{
    padding: 0 0.3rem;
    background: var(--light1);
    color: var(--light2);
    border-radius: 0.2rem;
    text-align: center;
    white-space: nowrap;
}

.pkmn-editor-name{
    font-size: 1.2rem;
    font-weight: 100;
    color: var(--light2);
}




#explore-drops{
    height: auto;
    width: 100%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.explore-item{
    background: var(--light1);
    border-radius: 100%;
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 0.8rem;
    
}

.explore-item img{
    height: 2rem;
    width: auto;
    scale: 2;
    image-rendering: pixelated;
    z-index: 1;
    cursor: help;
}

.explore-item img:hover{
    animation: itemShake 0.3s 1;
}

@keyframes itemShake {
    0%{rotate: 0deg; transform: scale(1);}
    30%{rotate: -20deg; transform: scale(1.1);}
    70%{rotate: 10deg;}
    100%{rotate:0deg; transform: scale(1);}
}

.explore-item span{
    position: absolute;
    bottom: -1rem;
    padding: 0 0.4rem;
    border-radius: 0.6rem;
    color: var(--light2);
    background: var(--light1);
    font-size: 1.2rem;
    text-align: center;
    z-index: 0;
}

#menu-button-parent{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

#menu-button{
    height: 6rem;
    width: 6rem;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: var(--light2);
    border-radius: 0 0 100% 0;
    padding: 0.5rem;
    overflow: hidden;
}

.menu-button-open {
    height: auto !important;
    width: 100% !important;
    border-radius: 0.3rem !important;
    box-shadow: rgba(0, 0, 0, 0.4) 5px 0 5px;
    

}

.menu-button-open #menu-items{
    display: flex;
}

#menu-items {
    height: 100%;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#menu-button svg{
    height: 4rem;
    width: 4rem;
    color: var(--light1);
    flex-shrink: 0;
    cursor: pointer;

}

.menu-item{
    background: var(--light1);
    height: 6rem;
    width: 6rem;
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    border: var(--light1) solid 3px;
    cursor: pointer;
    transition: 0.1s;
    line-height: 0.8rem;
}

.menu-item:active{
    scale: 0.9;
}

.menu-item:hover{
        filter: brightness(0.8) !important;
}

#area-end-item-title{
    height: auto;
}


.menu-item span{
    width: 100%;
    height: 2rem;
    background: var(--dark2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-top: dotted var(--dark2) 3px;
    border-radius: 0.3rem;
}

.menu-item img{
    height: 4rem;
    width: 4rem;
    image-rendering: pixelated;
}

.menu-item-locked{
    background: var(--dark1);
    border-color: var(--dark1);
}

.menu-item-locked img{
    filter: brightness(0);
}

#tooltipBackground {
    position: fixed;
    height: 100%;
    width: 50%;
    background: red;
    z-index: 1000;

background: rgba(41, 36, 36, 0.7);
box-shadow: 0 4px 50px rgba(158, 152, 152, 0.3) inset;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);

    display: none;
    justify-content: center;
    align-items: start;
    padding: 1rem;
        animation: tooltipBoxAppear 0.2s 1;

}

@media (max-width: 1000px) {
    #tooltipBackground {
        width: 100%;
    }
}

#tooltipBox{
    height: auto;
    width: 100%;
    background: var(--dark1);
    border-radius: 0.5rem;
    border: var(--light2) solid 2px;
    outline: var(--dark1) 10px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
}

#tooltipTop {
    height: auto;
    width: auto;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#tooltipTop img{
    height: 7rem;
    width: auto;
    image-rendering: pixelated;
}

#tooltipMid{
    width: 100%;
    height: auto;
    background: var(--dark2);
    border-radius: 0.5rem;
    color: var(--light1);
    text-align: center;
    padding: 1rem;
    flex-shrink: 0;
}

#tooltipBottom{
    width: 100%;
    height: auto;
    background: var(--light2);
    border-radius: 0.5rem;
    color: var(--dark1);
    text-align: center;
    padding: 1rem;
    flex-shrink: 0;
}

#tooltipTitle{
    width: 100%;
    height: auto;
    background: transparent;
    color: var(--light2);
    text-align: center;
    flex-shrink: 0;
    font-size: 2rem;
}

#tooltipClose{
    position: fixed;
    height: 5rem;
    width: 5rem;
    background: var(--dark1);
    color: var(--light2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 3rem;
    outline: var(--light2) solid 2px;
    bottom: 10%;
    animation: tooltipCloseAppear 0.5s 1;
    cursor: pointer;
}

@keyframes tooltipCloseAppear{
    0%{opacity: 0; rotate: 200deg; bottom: -10%;}
    100%{ opacity: 1; rotate: 0deg; bottom: 10%;}
}

@keyframes tooltipBoxAppear {
    0%{transform: translateY(-10%); opacity: 0}
    100%{transform: translateY(0%); opacity: 1}
}


#tooltip-inspect-pkmn{
    height: auto;
    width: 100%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: 10;
    flex-direction: column;
}



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

.editor-stat-number{
    width: 1.6rem;
    text-align: end;
    margin-right: 3px;
}

.pkmn-stats-panel-bst svg{
    color: var(--dark2);
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
}

.pkmn-stats-panel-bst {
    display: flex;
    justify-content: start;
    align-items: center;
    white-space: nowrap;
    background: transparent;
    color: var(--light1);
    font-size: 0.9rem;
}

.inspect-pkmn-types div{
    background: transparent !important;
    color: var(--light1);
}

.pkmn-stats-panel-info{
    height: 9rem;
    min-width: 7rem;
    padding-top: 0.5rem;
    position: relative;
}

.pkmn-stats-panel-info img{
    margin-top: -2rem;
}


.pkmn-stats-panel-info span{
   color: var(--dark1);
}

.pkmn-stats-panel-info .explore-sprite{
    position: absolute;
    width: 100%;
    height: 100%;
}

.pkmn-stats-panel-info .explore-sprite img{
    margin-top: auto;
    padding-bottom: 0.5rem;
    scale: 1;
}

#pkmn-stats-lore{
    width: 100%;
    max-width: 30.3rem;
    margin-top: 0.3rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    border-radius: 6px;
    background: var(--dark2);
    font-size: 0.9rem;
    color: var(--light2);
    padding: 0;
    outline: rgb(102, 98, 98) 1px solid;
    position: relative;
    background-image: url(img/bg/mini/space.png);
    color: white;
    background-size: cover;
}

#pkmn-stats-lore div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 2px;
    background: var(--dark2);
    opacity: 0.8;
    cursor: pointer;
    height: 1.8rem;
    padding: 0 0.5rem;
}

#pkmn-stats-lore div svg{
    margin-left: auto;
}

#pkmn-stats-lore-info{
    padding: 0rem;
    margin-bottom: -0.3rem;
    max-height: 0;
    transition:0.5s;
    overflow: hidden;
}

.pkmn-stats-stat-abilities{
    width: 100%;
    max-width: 30.3rem;
    margin-top: 0.3rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    border-radius: 0.2rem;
    background: var(--dark2);
    font-size: 1.1rem;
    color: var(--light2);
    padding: 0.5rem;
    outline: rgb(102, 98, 98) 1px solid;
    position: relative;
}

.pkmn-stats-stat-abilities div{
    height: 1.8rem;
    padding: 0.5rem;
    background: var(--dark1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    white-space: nowrap;
    color: var(--light2);
    cursor: help;
    width: 100%;
}

.pkmn-stats-stat-abilities div span{
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    width: 100%;
}

.pkmn-stats-stat-abilities div svg{
    height: 1.3rem;
    width: auto;
    pointer-events: none;
}

.inspect-info{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    align-content: flex-start;
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 0.2rem;
    background: var(--dark2);
    margin-top: 0.3rem;
    position: relative;
    padding: 4px;
    gap: 1rem;
    flex-wrap: wrap;
}

.inspect-info .tier-letter{
    margin-bottom: -4rem;
    transform: translateY(-2rem);
    cursor: default;
}

.inspect-info div{
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 1.5rem;
    cursor: help;
}

.pkmn-stats-stat-switch{
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 0.2rem;
    outline: rgb(102, 98, 98) 1px solid;
    background: var(--dark2);
    margin-top: 0.3rem;
    position: relative;
    padding: 4px;
    max-width: 30.3rem;

}

.pkmn-stats-stat-switch div{
    height: 100%;
    background: var(--light2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.1rem;
    white-space: nowrap;
    color: var(--dark2);
    cursor: pointer;
    transition: 0.1s;
    width: 100%;
}

.pkmn-stats-stat-switch div:active{
    scale: 0.9;
}



.separator-solid{
    height: 0.2rem;
    width: 15rem;
    background: var(--light1);
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
}




#pkmn-editor {
    position: fixed;
    height: 100%;
    width: 50%;
    background: red;
    z-index: 250;

  background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ; 
    overflow: scroll;

    display: flex;
    justify-content: start;
    align-items: center;
    animation: tooltipBoxAppear 0.2s 1;
    flex-direction: column;

}

@media (max-width: 1000px) {
    #pkmn-editor {
        width: 100%;
    }
}

.pkmn-editor-exit{
    width: 100%;
    background: rgb(219, 91, 74);
    outline: 2px solid rgb(255, 146, 146);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 151;
    font-size: 1.8rem;
    cursor: pointer;
}

.pkmn-leave-exit{
    width: 95%;
    background: rgb(219, 91, 74);
    border: 2px solid rgb(255, 146, 146);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 151;
    font-size: 1.8rem;
    cursor: pointer;
    margin-top: 1rem;
    border-radius: 0.3rem;
    transition: 0.1s;
}

.pkmn-leave-exit:hover{
        background: rgb(189, 78, 63);
}

#area-rejoin{
    width: 95%;
    background: rgb(119, 171, 192);
    border: 2px solid rgb(146, 242, 255);
    color: white;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
    border-radius: 0.3rem;
    transition: 0.1s;
}

#area-rejoin:hover{
        background: rgb(95, 146, 167);
}

.auto-build-confirm{
    border-radius: 0.2rem;
    background: var(--light1);
    color: white;
    margin-top: 1rem;
    transition: 0.1s;
}

#pokedex-filters-remove, #pokedex-filters-cancel{
    cursor: pointer;
}

.auto-build-confirm:hover{
    filter: brightness(1.1);
}

.leave-button{
    width: 95%;
    background: rgb(119, 192, 137);
    border: 2px solid rgb(146, 255, 152);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
    border-radius: 0.3rem;
    transition: 0.1s;
    white-space: nowrap;
    flex-wrap: wrap;
    padding: 0 0.2rem;
}

#battle-summary{
        background: rgb(151, 119, 192);
    border: 2px solid rgb(202, 146, 255);
}

.leave-button span img{
    margin: 0 -0.3rem;
    margin-top: -1rem;
    transform: translateY(30%);
    
}

.leave-button span{
    opacity: 0.8;
    margin-left: 0.5rem;
    font-size: 1rem;
}


.leave-button:hover{
        background: rgb(103, 167, 95);
}

#pkmn-editor-header{
    background-color: #404555;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23898097' fill-opacity='0.29'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
    top: 0;
    z-index: 10;
   background-color: #404555;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23898097' fill-opacity='0.29'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 7rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 5px 2px;
    image-rendering: pixelated;
    border-radius: 0 0 0.5rem 0.5rem;
    position: relative;
    padding-top: 0.5rem;
}

.pkmn-editor-side{
    background: var(--dark2);
    width: 55%;
    max-width: 15rem;
    overflow: hidden;
    border-radius: 0.3rem;
    outline: rgb(102, 98, 98) 1px solid;
}

.pkmn-editor-side-2{
    background: transparent;
    width: 45%;
    max-width: 15rem;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    height: 100%;
}



#pkmn-editor-side-content{
    background-image: url(img/bg/mini/forest.png);
    padding: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0.3rem;
    image-rendering: pixelated;
    background-size: cover;
}


.pkmn-editor-side svg{
    background: var(--dark1);
    color: white;
    border-radius: 0.3rem;
    padding: 0.2rem;
    height: 2.5rem;
    width: 2.5rem;
    margin-top: 0.8rem;
    cursor: pointer;
    transition: 0.1s;
    position: absolute;
    z-index: 4;
}

#pkmn-edit-dictionary{
    display: flex;
    right: 0;
    margin-right: 0.5rem;
}

.pkmn-editor-side svg:hover{
    background: var(--dark2);
}


.pkmn-editor-side svg:active{
    scale: 0.9;
}

.pkmn-editor-side .explore-sprite img{
    margin: initial;
    transform-origin: center;
    filter: drop-shadow(rgba(0,0,0,0.5) 2px 2px);
}


.pkmn-editor-move-container{
    height: auto;
    width: 100%;
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.3rem;
}

#pkmn-editor-stats, #pkmn-editor-ivs{
    background: var(--dark2);
    border-radius: 0.3rem;
    padding: 0.5rem;
    outline: rgb(102, 98, 98) 1px solid;
    font-size: 1rem;
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

#pkmn-editor-stats svg, #pkmn-editor-ivs svg{
    color: var(--light2);
    color: var(--light2);
    
}

#pkmn-editor-extra-info{
    width: 100%;
    max-width: 30.2rem;
    font-size: 0.9rem;
}

#pkmn-editor-extra-info span{
    padding: 0.3rem;
    text-align: center;
    background: var(--dark2);
    color: var(--light1);
    margin-top: 0.3rem;
    outline: rgb(102, 98, 98) 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    width: 100%;
    max-width: 30.2rem;

}

.pkmn-editor-move-title{
    margin: 1rem 0.5rem;
    padding: 0.5rem;
    width: 95%;
    text-align: center;
    background: var(--dark2);
    color: var(--light2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
}

#pkmn-editor-current-moves{
    width: 95%;
    padding: 0;
    margin-bottom: 1rem;
}

.pkmn-editor-learnt-move-list{
    background: var(--light2);
    height: auto;
    width: 95%;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.3rem;
    margin-bottom: 2rem;
}

.pkmn-editor-learnt-move-title{
    background: var(--light2);
    height: 2rem;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-align: center;
    border-radius: 0.3rem;
    font-weight: 100 !important;
    border-bottom: solid 2px var(--light1);
    color: var(--light1);
}

.highlighted-move{
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239876cf' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    animation: bg-horizontal infinite 600s linear;
}

@keyframes bg-horizontal {
    0%{background-position-x: -1000%;}
    100%{background-position-x: 1000%;}
}

#explore-leave {
    height: 2.5rem;
    font-size: 1.5rem;
    width: 95%;
    border-radius: 0.3rem;
    background: rgb(219, 91, 74);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;
    margin-bottom: 2rem;
    outline: 2px solid rgb(255, 146, 146);
    cursor: pointer;
    transition: 0.1s;
    flex-shrink: 0;
}

#explore-leave:hover{
    scale: 1.02;
}

#explore-leave:active{
    scale: 0.95;
}

#explore-leave svg {
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;

}


#auto-refight-info {
    height: auto;
    font-size: 1rem;
    width: 95%;
    border-radius: 0.3rem;
    background: rgb(87, 101, 180);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: 0.1s;
    flex-shrink: 0;
    padding: 0.5rem;
}

#auto-refight-info span{
    color: rgb(167, 167, 167);
}

#auto-refight-info span img{
    margin: -1rem -0.2rem;
    transform: translateY(-20%);
}

#auto-refight-info:hover{
    scale: 1.02;
}

#auto-refight-info:active{
    scale: 0.95;
}

#auto-refight-info svg {
    height: 2rem;
    width: 2rem;
    margin-right: 1rem;
    flex-shrink: 0;
    

}

#area-end {
    position: fixed;
    height: 100%;
    width: 50%;
    background: red;
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    animation: bg-horizontal 600s infinite;
    flex-direction: column;
    padding-bottom: 3rem;
    background-color: var(--light1);
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");

}

@media (max-width: 1000px) {
    #area-end {
        width: 100%;
    }
}

.area-end-category {
    height: 2rem;
    width: 95%;
    background: var(--dark1);
    color: var(--light2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    border-radius: 0.3rem 0.3rem 0 0;
    border: var(--dark2) solid 2px;
    font-size: 1.2rem;
}

.area-end-container {
    background: var(--dark2);
    height: auto;
    width: 95%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    border-radius: 0 0 0.2rem 0.2rem;
}

.area-end-container div{
    background: var(--dark1);
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: help;
    transition: 0.1s;
}

.area-end-container div:hover{
    background: var(--light1);
}



.area-end-container div img{
    position: absolute;
    image-rendering: pixelated;
}

.area-end-container span{
    position: absolute;
    top: -0.5rem;
    white-space: nowrap;
    background: rgb(149, 255, 211);
    color: var(--dark2);
    padding: 0 0.5rem;
    border-radius: 0.2rem;
     box-shadow: 0px 0px 5px 0px rgba(45,255,196,0.93);
    animation: pkmn-active 0.5s infinite;
}

.area-end-item img{
    scale: 2;
}

.area-end-item span{
    animation: none;
    box-shadow: none;
    background: var(--light1);
    color: var(--light2);
}

#area-end-moves-title{
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1rem;
    gap: 0.3rem;
    padding: 0.3rem;
}

#area-end-moves-title span{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--dark2);
    border-radius: 0.3rem;
    padding: 0.3rem;
}

#white-transition {
    position: fixed;
    height: 100%;
    width: 50%;
    background: rgb(255, 255, 255);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    display: none;
    animation: transition 0.8s 1 linear !important;
}

@keyframes transition {
    0%{opacity: 1;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}



@media (max-width: 1000px) {
    #white-transition {
        width: 100%;
    }
}

#explore-menu {
    position: fixed;
    height: 100%;
    width: 50%;
    background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;


    background-size: 1.5rem;
    z-index: 150;
    overflow: none;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 0.8rem;
    z-index: 30;

}

@media (max-width: 1000px) {
    #explore-menu {
        width: 100%;
    }
}

#explore-listing{

    margin-top: 1rem;
    height: 100%;
    overflow-y: scroll;
    width: 95%;
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    padding-bottom: 5rem;

}

.hitbox {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}




.explore-ticket{
    height: 6rem;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
    transition: 0.1s;
    font-size: 1rem;
    image-rendering: pixelated;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.3rem;

}

.explore-ticket vs-card-flair{z-index: 0;}

.ticket-unlock{
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 101;
    color: white;
    font-size: 1.1rem;
    border-radius: 0.3rem;
    padding: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

.ticket-unlock svg{
    height: 100%;
    width: auto;
    padding: 1rem;
    border-radius: 0.3rem;
    border: rgba(255, 255, 255, 0.3) solid 2px;
    background: rgba(0, 0, 0, 0.3);
    margin-right: 1rem;
    flex-shrink: 0;
}

.ticket-unlock img{
    transform: translateY(30%);
}

.explore-ticket:hover{
    margin: 0.5rem 0;
    box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px 0;
}

.explore-ticket:hover .explore-ticket-sprite{
    animation: pkmn-active 0.5s infinite;

}


.explore-ticket:active{
    scale: 0.98;
}




.explore-ticket div{
    height: 100%;
    width: 100%;
    background: var(--light2);
    background: 
    var(--light2);
    display: flex;
    justify-content: start;
    align-items: center;
}

.ticket-dungeon div{
    background: 
    linear-gradient(180deg,rgb(209, 101, 101) 0%, rgb(211, 97, 97) 15%, rgba(0,0,0,0) 15%)
    , var(--light2);
}

.ticket-event div{
    background: 
    linear-gradient(180deg,rgb(139, 101, 209) 0%, rgb(179, 97, 211) 15%, rgba(0,0,0,0) 15%)
    , var(--light2);
}

.encounter-ticket div{
    background: 
    linear-gradient(180deg,rgb(184, 114, 114) 0%, rgb(184, 114, 172) 15%, rgba(0,0,0,0) 15%)
    , var(--light2);
}

.explore-ticket-left {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 1rem;
    padding-top: 0.7rem;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    width: 100%;
    
}

.explore-ticket-left strong{
    padding: 0.3rem 0.5rem;
    background: var(--dark2);
    color: white;
    border-radius: 0.2rem;
    text-align: center;
    z-index: 1;
    font-weight: 300;
}

.explore-ticket-left span{
    color: var(--dark2);
    z-index: 1;
}

.explore-ticket-bg{
    position: absolute;
    height: 5rem;
    width: 5rem;
    border-radius: 0.3rem;
        box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 2px 1px;
    background-image: url(img/bg/forest.png);
    background-size: cover;
    background-position: bottom;
}




.explore-ticket-right {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    border-left: dotted var(--light1) 3px;
}

.rotation-timer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--light2);
    border: var(--light1) solid 2px;
    color: var(--light1);
    border-radius: 0.3rem;
    z-index: 2;
}

.rotation-timer strong{
    white-space: nowrap;
    padding: 0 1rem;
    font-weight: 100;
}

.rotation-timer strong svg{
    transform: translateY(20%);
}

.rotation-timer div{
   color: white;
   background: var(--light1);
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.2rem;
}

#explore-menu-header{
    height: 8rem;
    width: 100%;
    background-image: url(img/bg/forest.png);
    background-size: cover;
    background-position: 20%;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: end;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;


}





#explore-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
    z-index: 2;
}

#explore-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

#explore-menu-header span strong{
    margin-left: 0.2rem;
    font-weight: 200;
}
.explore-menu-selector{
    height: 2.8rem;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dark2);
    position: relative;
    flex-shrink: 0;
    border-radius: 0.3rem;
    padding: 0.3rem;
}

.explore-menu-selector div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: transparent;
    color: var(--light2);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.1s;
    z-index: 1;
    white-space: nowrap;
}

.explore-menu-selector div svg{
    margin-right: 0.5rem;
}




.explore-menu-selector div:hover {
    background: var(--dark1);
}

.barcode-flair{
position: absolute;
opacity: 0.2;
height: 2rem;
left: -5rem;
bottom: 0.5rem;
transform: rotate(90deg);
color: var(--dark2);
z-index: 1;
}



.vs-card{
    height: 6rem;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
    transition: 0.1s;
    background: var(--light2);
    overflow: hidden;
    image-rendering: pixelated;
    font-size: 0.8rem;
    border-radius: 0.3rem;
    position: relative;
    flex-shrink: 0;
}

.ticket-flair{
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 10rem;
    width: auto;
    color: var(--light1) !important;
    display: flex;
    flex-direction: column;
    background: transparent;
    opacity: 0.6;
}

.completed-flair{
position: absolute;
opacity: 0.3;
height: 2rem;
width:2rem;
right: 1.6rem;
bottom: -0.2rem;
transform: rotate(90deg);
color: rgb(190, 71, 62);
z-index: 0;
}

.vs-card-flair {

    position: absolute;
    height: 20rem;
    width: 20rem;
    left: -10rem;
    top: -10rem;
    opacity: 0.4;
    rotate: 50deg;

}

.vs-card:hover{
    margin: 0.5rem 0;

}

.vs-card:active{
    scale: 0.98;
}

.vs-card div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vs-card-left{
    height: 100%;
    width: 6rem;
    margin-left: auto;
}

.vs-card-left img{
    image-rendering: pixelated;
    scale: 3;
    transform-origin: bottom;
    transform: translateY(60%);
}

.vs-card-bg{
    height: 100%;
    width: 100%;
    position: absolute;
    background: 
    
    url(img/bg/gymCard.png);
    
    
    background-position: right;
    background-repeat: no-repeat;
    z-index: 0;

}

.wild-shiny-tag{
    color: #FF4671;
    position: absolute;
    z-index: 3;
    right: 0.5rem;
    bottom: 0;
    -webkit-text-stroke: white 2px;
    paint-order: stroke fill;
}

.area-preview{
    height: 4rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    image-rendering: pixelated;
    position: relative;
}



.area-preview span{
    position: absolute;
    top: -0.5rem;
    white-space: nowrap;
    background: rgb(149, 255, 211);
    color: var(--dark2);
    padding: 0 0.5rem;
    border-radius: 0.2rem;
     box-shadow: 0px 0px 5px 0px rgba(45,255,196,0.93);
    animation: pkmn-active 0.5s infinite;
}

#area-preview-spawns{

    scrollbar-color: var(--dark2) var(--light1);
    padding: 0.8rem 0;
}

#area-preview-spawns, #area-preview-items{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    cursor: help;
    width: 100%;
        padding-top: 3.3rem;
            max-height: 20rem;
    overflow-y: scroll;

}

#area-preview-spawns strong, #area-preview-items strong{
    position: absolute;
    top: 0rem;
    background: var(--dark2);
    padding: 0.5rem;
    color: var(--light2);
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


#area-preview-spawns strong svg{
    height: 1.5rem;
    width: 1.5rem;
    margin-left: 0.5rem;
    color: rgb(255, 117, 117);
}

.hidden-pkmn img{
    filter: brightness(0);
    cursor: default;
}



#explore-transition {
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--light2);
    z-index: 1000;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    animation: exploreTransition 1s 1;
    transform-origin: left;
    transform:scaleX(0%);
}

@keyframes exploreTransition{
    0%{transform:scaleX(0%);transform-origin: left;}
    50%{transform:scaleX(100%);transform-origin: left;}
    51%{transform:scaleX(100%);transform-origin: right;}
    100%{transform:scaleX(0%); transform-origin: right;}
}

#explore-transition svg{
    height: 5rem;
    width: 5rem;
    color: var(--dark2);
    position: absolute;
}

@media (max-width: 1000px) {
    #explore-transition {
        width: 100%;
    }
}

#pokedex-menu {
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--dark1);
    z-index: 150;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
    padding: 0rem;
    overflow-y: scroll;
    overflow-x: hidden;
    background: var(--dark1)
    ;
}

@media (max-width: 1000px) {
    #pokedex-menu {
        width: 100%;
    }
}




#pokedex-list{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    justify-items: start;
    align-content: start;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    z-index: 1;
    padding-top: 1.5rem;
    transition: 0.1s;
    padding-bottom: 2rem;
}

#pokedex-list div:active{
    scale: 0.9;
}

#pokedex-list div{
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
        background: var(--dark2);
    justify-content: center;
    align-items: center;
    transition: 0.1s;
    position: relative;
    cursor: help;
}

#pokedex-list div span{
    padding: 0 0.3rem;
    position: absolute;
    top: -0.8rem;
    text-align: center;
    background: var(--dark2);
    z-index: 0;
    border-radius: 0.3rem;
    color: var(--light1);
        transition: 0.1s;

}

#pokedex-list img{
    image-rendering: pixelated;
    z-index: 1;
}


#pokedex-list div:hover{
    background: var(--light1);
}

#pokedex-list div:hover span{
    background: var(--light1);
    color: var(--dark2);
}

#pokedex-list div:hover img{
    animation: pkmn-active 0.5s infinite;
}



#pokedex-filters{
    height: auto;
    width: 100%;
    background: var(--light1);
    background-image: url(img/bg/mini/special7.png);
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: end;
    align-content: end;
    border-radius: 0.4rem;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px 10px;
    gap: 0rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#pokedex-filters select, .clear-filters{
    font-size: 1rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--dark2);
    color: var(--light2);
    outline: none;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    width: auto;
    border-radius: 10rem;
    
}

.pokedex-filters-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.7);
    flex-wrap: wrap;
    border-radius: 0.7rem;
    padding: 0.5rem;
    gap: 0.5rem;
    flex-direction: column;

}

.pokedex-search{
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.2rem;
    position: relative;
    overflow: hidden;
    color: white;
}



#pokedex-total{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    padding: 0 0.5rem;
}

#pokedex-total svg{
    height: 1.5rem;
    width: 1.5rem;
    margin-left: 0.3rem;
}

#pokedex-search{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: white;
    font-size: 1rem;
}

.pokedex-menu-flair {
    position: fixed;
    height: 150%;
    width: 150%;
    rotate: -90deg;
    opacity: 0.15;
    left: -50%;
    bottom: -50%;
    z-index: 1;
    clip-path: inset(50% 0 0 0);
    pointer-events: none;
}

@media (max-width: 1000px) {
.pokedex-menu-flair {
    position: fixed;
    height: 200%;
    width: 200%;
    rotate: -90deg;
    opacity: 0.15;
    left: -80%;
    bottom: -80%;
    z-index: 1;
    clip-path: inset(0 0 0 0);
}
}

#item-menu {
    position: fixed;
    height: 100%;
    width: 50%;
 background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;     z-index: 150;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    z-index: 30;
    overflow: hidden;
}

@media (max-width: 1000px) {
    #item-menu {
        width: 100%;
    }
}



#item-menu-list{
    width: 100%;
    height: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    border-radius: 0.4rem;
    padding: 0 2%;
    overflow: scroll;
    padding-bottom: 3rem;
    padding-top: 0.8rem;
    overflow-x: hidden;
}

#item-menu-list div{
    width: 100%;
    height: 2rem;
    background: var(--light1);
    display: flex;
    align-items: center;
    border-radius: 1rem;
    padding-right: 0.5rem;
    transition: 0.1s;
    flex-shrink: 0;
}

.item-list-name{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 1rem 1rem 0 !important;
    margin-right: auto;
}

#item-menu-list div:active{
    scale: 0.95;
}

#item-menu-list div:hover{
    height: 2.5rem;
    background: var(--light2);
    cursor: help;
}

#item-menu-list div span{
    padding: 0 0.5rem;
    background: var(--light2);
    border-radius: 1rem;
    color: var(--dark2);
}

#item-menu-list div img{
    image-rendering: pixelated;
    background: var(--light2);
    border-radius: 1rem 0 0 1rem;
}

.item-menu-tags{
    height: 6.5rem;
    width: 100%;
    background: var(--light1);
    background-image: url(img/bg/mini/special1.png);
    display: flex;
    justify-content: end;
    padding: 0.8rem 3%;
    border-radius: 0.4rem;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.item-menu-tags span{
   
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}




.item-menu-tags div{
    padding: 0.3rem 0.5rem;
    width: 5rem;
    background-color: var(--dark2);
    color: var(--light2);
    outline: none;
    border: none;
    border-radius: 0.3rem;
    white-space: nowrap;
    text-align: center;
    font-size: 1.1rem;
    transition: 0.1s;
    cursor: pointer;
}

.item-menu-tags div:hover{
    background-color: var(--dark1);
}

.item-menu-tags div:active{
    scale: 0.9;
}

.pokedex-cancel-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    margin: 0.2rem 0;
    position: relative;
    gap: 0.2rem;
}

.pokedex-cancel-menu div{
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    
}

#vs-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;

}

@media (max-width: 1000px) {
    #vs-menu {
        width: 100%;
    }
}


#vs-menu-header{
    height: 8rem;
    width: 100%;
    background-image: url(img/bg/forest.png);
    background-size: cover;
    background-position: bottom;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: end;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;
}

#vs-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
}

#vs-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

#vs-menu-header span strong{
    margin-left: 0.2rem;
    font-weight: 200;
}

#vs-listing, #frontier-listing{

    height: auto;
    margin-top: 1rem;
    width: 95%;
    padding: 0rem;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;

}

#frontier-listing{
    margin-top: 0;
}

#team-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    margin: 0.5rem 0;
}

#team-indicator img {
    background: white;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px 5px;
    transition: 0.2s;
}

.spiraling-indicator {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.2rem;
    margin: 0.5rem 0;
    width: 100%;
}

.spiraling-indicator svg {
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
    background: transparent;
}

.spiraling-indicator div {
    padding: 0.6rem;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    outline: rgba(255, 255, 255, 0.5) solid 2px ;
    color: white;
    height: 2rem;
}


#training-indicator {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.2rem;
    margin: 0.5rem 0;
    width: 100%;
}

#training-indicator div {
    padding: 0.6rem;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    outline: rgba(255, 255, 255, 0.5) solid 2px ;
    color: white;
    height: 2rem;
}

#wild-buff-list {
    position: absolute;
    left: 0.3rem;
    bottom: 0;
    height: 10rem;
    width: 10rem;
    display: flex;
    justify-content: left;
    align-content: end;
    z-index: 10;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-bottom: 0.3rem;
    pointer-events: none;
}

.buff-tag{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    border-radius: 0.1rem;
    background: #383A50;
    color: #818CF8;
    outline: solid 1px #818CF8;
    padding: 0 0.3rem;
    font-size: 1.1rem;
}

.buff-tag svg{
    height: 1.2rem !important;
    width: 1.2rem !important;
    color: #818CF8 !important;
    margin-left: 0.2rem;
}

.team-buff-list{
    position: absolute;
    left: 0.3rem;
    bottom: 0;
    height: 10rem;
    width: 10rem;
    display: flex;
    justify-content: left;
    align-content: end;
    z-index: 10;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-bottom: 0.3rem;
    pointer-events: none;
}

.team-buff-list .buff-tag{
   font-size: 1rem;
}

.team-held-item{
    position: absolute;
    left: 0rem;
    top: 0;
    height: 10rem;
    width: 10rem;
    display: flex;
    justify-content: left;
    align-content: start;
    z-index: 10;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-bottom: 0.3rem;
    pointer-events: none;
    background: transparent;
}

.team-held-item img{
    background: transparent;
    border-radius: 0.8rem 0;
    image-rendering: pixelated ;
    pointer-events: initial;
    cursor: help;
    scale: 2;
    transform-origin: top left;
    filter: drop-shadow(rgba(0,0,0,0.4) 2px 2px);
}

.member-inactive .team-held-item img{
    scale: 1;
}


#team-menu {
    position: fixed;
    height: 100%;
    width: 50%;
background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;     z-index: 150;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 200;
    padding: 0rem;
    overflow: hidden;
}

@media (max-width: 1000px) {
    #team-menu {
        width: 100%;
    }
}

.team-menu-header {
    height: 7rem;
    width: 100%;
    background-image: url(img/bg/mini/city.png);
    background-size: 20rem;
    background-position:bottom left;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    text-align: center;
    border-radius: 0.3rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0 5px 5px;
    flex-shrink: 0;
    padding: 0.5rem;
    position:relative;
    gap: 0.5rem;
}

.team-header-button{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark1);
    color: white;
    padding:  0rem 0.5rem;
    border-radius: 0.3rem;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 100;
    width: 13rem;
    white-space: nowrap;
    margin: 0;
    position: relative;
    cursor: pointer;
    transition: 0.1s;
    height: 3rem;

}

.team-header-button:hover{
    background: var(--dark2);
}

.team-header-button:active{
    scale: 0.9;
}

.team-header-button svg{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #62A9E3;
    color: white;
    padding:  0.3rem;
    margin: 0.1rem 0;
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 0.2rem;
    width: auto;
    flex-shrink: 0;
    border: 1px solid rgb(255, 185, 185);
}

.team-menu-selector-new{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark2);
    color: var(--dark2);
    height: 2.5rem;
    border-radius: 0.3rem;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    padding: 0.5rem;
}

.team-menu-selector-new select{
    cursor: pointer;
    height: 100%;
    border: none;
    background: var(--dark2);
    margin: 0;
    color: rgb(190, 211, 224);
    border-radius: 10rem;
    font-size: 1.2rem;
    margin: 0 auto;
    text-align: center;
    width: 20rem;
}

.team-menu-selector-new svg{
    height: 1.8rem;
    border-radius: 0.3rem;
    background: var(--light2);
    color: var(--light1);
    width: 1.8rem;
    padding: 0.2rem;
    margin-left: -2.5rem;
    cursor: pointer;
}

.team-menu-selector{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark1);
    color: var(--dark2);
    padding:  0.5rem;
    border-radius: 0.3rem;
    gap: 0.5rem;
    width: 100%;
}

.team-menu-selector div{
    background: #acacac;
    border-radius: 100%;
    height: 0.9rem;
    width: 0.9rem;
    transition: 0.1s;
}

.team-menu-selector span div{
    background: #acacac;
    border-radius: 100%;
    height: 1rem;
    width: 1rem;
    transition: 0.1s;
}

.team-menu-selector strong{
    background: var(--dark2);
    color: var(--light1);
    border-radius: 0.2rem;
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.05s;
}

.team-menu-selector strong:hover{
    background: var(--light1);
    color: white;
}

.team-menu-selector strong:active{
    scale: 0.9;
}

#team-preview{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: scroll;
    padding: 0.5rem;
    z-index: 40;
}

#team-preview .explore-team-member{
    background: var(--dark2);
}

.explore-sprite svg{
    height: 50%;
    color: white;
    opacity: 0.6;
}

.team-member-slotnumber{
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    font-size: 1.4rem;
    color: var(--light1);
    opacity: 0.6;
}

#team-name-field{
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    height: 100%;
    width: 100%;
    background: transparent;
    text-align: center;
    color: white;
}

.team-held-item svg{
    border-radius: 0 0 0.8rem;
    image-rendering: pixelated ;
    pointer-events: initial;
    cursor: help;
    height: 3.5rem;
    width: 3.5rem;
    color: var(--light1);
}

#team-preview .team-held-item img{
    border-radius: 0 0 0.8rem;
    image-rendering: pixelated ;
    pointer-events: initial;
    cursor: help;

}

#team-preview .explore-team-member{
    cursor: pointer;
}

#settings-menu{
    position: fixed;
    height: 100%;
    width: 50%;
 background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;     z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;

}

@media (max-width: 1000px) {
    #settings-menu {
        width: 100%;
    }
}


#settings-menu-header{
    height: 6.5rem;
    width: 100%;
    background-image: url(img/bg/lab.png);
    background-size: cover;
    background-position: top;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: end;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

#settings-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
}

#settings-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

.settings-list{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    gap: 0.4rem;
}

.settings-list div{
    width: 100%;
    background: var(--light1);
    display: inline;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--light2);
    padding: 0.1rem;
    cursor: pointer;
    transition: 0.1s;
    border-radius: 0.3rem;
    text-align: center;
}

.settings-list div select{
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--dark1);
    width: auto;
    padding: 0 0.5rem;
}

.settings-list div:hover{
    background: white;
    color: var(--dark2);
}

.settings-list div:active{
    scale: 0.95;
}

#disclaimer-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--dark1);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 30;
    color: white;
    text-align: center;
    padding: 2rem;
    line-height: 2rem;
    z-index: 1000;
    opacity: 1;
    transition: 1s;
    
}

@media (max-width: 1000px) {
    #disclaimer-menu {
        width: 100%;
    }
}

#starter-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    z-index: 500;
    padding-top: 3rem;
    gap: 2rem;
}

@media (max-width: 1000px) {
    #starter-menu {
        width: 100%;
    }
}

#starter-menu span{
    width: auto;
    padding: 0 5rem;
    background: var(--light2);
    color: var(--dark2);
    text-align: center;
}

.starter-list{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
}

.starter-list div{
    background: var(--light2);
    color: var(--dark2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
    border: var(--light1) dashed 3px;
    outline: var(--light2) solid 3px;
    transition: 0.2s;
    cursor: help;
}

.starter-list div:hover{scale:1.05}
.starter-list div:active{scale:0.98}

#tutorial{
    position: fixed;
    height: 100%;
    width: 50%;
    z-index: 200;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: end;
    align-items: center;
    animation: tooltipBoxAppear 0.7s 1;
    flex-direction: column;
    pointer-events: none;

}

@media (max-width: 1000px) {
    #tutorial {
        width: 100%;
    }
}

#tutorial span{
    height: 12rem;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-shadow: rgba(0, 0, 0, 0.8) 0 0 4px 4px;
    position: relative;
    z-index: 1;
    font-size: 1rem;
}
#tutorial img{
    scale: 2;
    image-rendering: pixelated;
    margin-left: auto;
    margin-right: 2rem;
    z-index: 2;
}



#guide-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--dark2);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
        background-color: #404555;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23898097' fill-opacity='0.29'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");


}

@media (max-width: 1000px) {
    #guide-menu {
        width: 100%;
    }
}



#guide-menu-header{
    height: 6.5rem;
    width: 100%;
    background-image: url(img/bg/mini/special6.png);
    background-size: cover;
    background-position: bottom;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: end;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;
        position: sticky;
    top: 0;
    z-index: 2;
}

#guide-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
}

#guide-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

#guide-list{
    width: 100%;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}

#guide-list div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background: var(--dark1);
    border-radius: 0.1rem;
    outline: var(--light1) 2px solid;
    font-size: 1.1rem;
    color: var(--light2);
    transition: 0.1s;
    cursor: pointer;
}

#guide-list div:hover{
    background: var(--dark2);
}

#guide-list div:active{
    scale: 0.95;
}

#pkmn-edit-ability svg{
    margin-left: 0.3rem;
}

.ability-uncommon{
    outline: solid #F0E07D 2px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ECDD33' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E")
    !important
    ;
    background-size: 40% !important;
    box-shadow: #F0E07D 0 0 8px 0px;
}

.ability-uncommon svg{
    color: #F0E07D;
}

.ability-rare{
    outline: solid #86cfd1 2px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2399F1D8' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E")
    !important;
    background-size: 40% !important;
    box-shadow: #b6ffea 0 0 8px 0px;
    animation: ability-rare infinite 10s ease-in-out;
}

@keyframes ability-rare {
    0%{outline: solid #86cfd1 2px;}
    50%{outline: solid #cf86d1 2px;}
    100%{outline: solid #86cfd1 2px;}
}


.ability-rare svg{
    color: #99F1D8;
    animation: ability-rare-svg infinite 10s ease-in-out;
}

@keyframes ability-rare-svg {
    0%{ color: #86cfd1;}
    50%{color:  #cf86d1;}
    100%{ color: #86cfd1;}
}

.event-ticket {
    margin-bottom: 0rem;
    font-size: 1rem;
}

.event-ticket .ticket-unlock{
    border-radius: 0;
}

.event-ticket div{
    border-radius: 0;
        background: 
    linear-gradient(180deg,rgb(141, 114, 184) 0%, rgb(184, 114, 161) 8%, rgba(0,0,0,0) 8%)
    , 
    
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='white' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E")
    ,
    
    var(--light2);

    border-bottom: solid 3px var(--light1);

    box-shadow: rgba(0, 0, 0, 0.4) 5px 0 2px;
}


.event-tag{
    background: #b4ff51 !important;
    color: #305204 !important;
    margin-left: 0.5rem;
}

.event-icon{
    height: 1.8rem;
    width: 1.8rem;
    color: #D57392;
    transform: translateY(20%);
    margin-left: 0.3rem;
}




#pkmn-edit-division{
    background: var(--dark1);
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    text-align: center;
    margin-top: 0.3rem;
    color: var(--light2);
    font-weight: 100;
    position: relative;
    outline: rgb(102, 98, 98) 1px solid;

}

#pkmn-edit-division span{
    background: var(--dark2);
    height: 70%;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-bottom: 0.4rem;
}

#pkmn-edit-division strong{
    font-size: 3rem;
}

.tier-letter{

    background:transparent;
    overflow: visible;
    font-size: 2rem;
    color: #6999d8;
    overflow: visible;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke: white 4px;
    paint-order: stroke fill;
    text-shadow: rgba(0, 0, 0, 0.5) 2px 3px 5px;
}



.tier-letter-s{

    background:transparent;
    overflow: visible;
    font-size: 2rem;
    color: #6999d8;
    overflow: visible;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke: white 2px;
    paint-order: stroke fill;
    text-shadow: rgba(0, 0, 0, 0.5) 2px 3px 5px;

    text-shadow: "none";
    background: linear-gradient(to left, rgb(255, 154, 154), rgb(255, 210, 125), yellow, rgb(135, 255, 135), rgb(157, 157, 255), rgb(209, 144, 255), rgb(255, 134, 255)); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: prefixT3 3s infinite linear;
    background-size: 200%;
}

@keyframes prefixT3 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0 0;
    }
}


#genetics-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--dark2);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
   background-color: #404555;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23898097' fill-opacity='0.29'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

@media (max-width: 1000px) {
    #genetics-menu {
        width: 100%;
    }
}


#genetics-menu-header{
    height: auto;
    width: 100%;
    background-image: url(img/bg/space.png);
    background-size: cover;
    background-position:bottom left;
    image-rendering: pixelated;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    flex-direction: column;
    flex-shrink: 0;
    padding-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.7) 15px 0px 5px;
}

#genetics-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
    margin-bottom: 2rem;
}

#genetics-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

.genetics-header-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10rem;
    gap: 0rem;
    margin-bottom: 1rem;
    
}

.genetics-header-flex img{
    scale: 2;
}

.genetics-sample{
    position: relative;
    display: flex;
    justify-content:
    center;
    align-items:
    center;
    height: 6rem;
    width: 6rem;
    border-radius: 100%;
    background: var(--dark1);
    border: rgb(158, 112, 189) ridge 15px;
    margin-left: 2rem;
    flex-shrink: 0;
}

.genetics-sample img{
    scale: 1;
}

#genetics-arrow{
    height: 3.5rem;
    width: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--dark2);
    border-radius: 0.3rem;
    color: rgb(229, 143, 255);
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 2px;
    padding-top: 0.3rem;
}

@keyframes genetics-arrow {
    0%,100% {
        color: rgb(179, 81, 209);
    }
    50% {
        color: rgb(229, 209, 255);
    }
}


.genetics-parameter{
    background: var(--dark1);
    border-radius: 100rem;
    width: 95%;
    height: 1rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    overflow: visible;
    border: var(--dark2) solid 3px;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
    position: relative;
}

.genetics-parameter strong{
    background: var(--dark2);
    border-radius: 20rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 1.5rem;
    font-weight: 100;
    color: white;
    margin-left: -0.2rem;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
    z-index: 1;
    white-space: nowrap;
    width: 12rem;
    justify-content: center;
}

.genetics-parameter-bar{
    background: rgb(229, 143, 255);
    width: 50%;
    height: 100%;
    border-radius: 0 10rem 10rem 0;
    margin-left: -0.2rem;
    z-index: 0;
    
}

.genetics-overview{
    height: auto;
    padding: 0.5rem;
    width: 95%;
    background: var(--light2);
    border-radius: 0.3rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.genetics-overview-data{
    display: flex;
    justify-content: center;
    align-items: center;
}

.genetics-overview-data div{
    width: 100%;
    height: 0.3rem;
    border-radius: 3rem;
    background-color: var(--light1);
}

.genetics-overview-data span{
    white-space: nowrap;
    padding: 0 0.4rem;
    color: var(--dark1);
}





#genetics-host-div, #genetics-sample-div{
    cursor: help;
    transition: 0.1s;
}

#genetics-host-div:hover, #genetics-sample-div:hover{
    scale: 1.05;
}

#genetics-host-div svg{
    color: black;
    scale: 1;
    opacity: 0.6;
}

#genetics-sample-div svg{
    color: white;
    opacity: 0.6;
}

#genetics-progress{
    width: 95%;
    height: 2rem;
    background: var(--dark2);
    border-radius: 0.3rem;
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    border: var(--dark1) solid 2px;
    padding: 0.5rem;
    animation: tooltipBoxAppear 1s 1;

}

#genetics-progress div{
    width: 100%;
    height: 100%;
    background: var(--dark1);
    border-radius: 0.2rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

#genetics-progress strong{
    padding: 0 0.5rem;
    font-weight: 300;
    white-space: nowrap;
    color: rgb(189, 123, 219);
    width: 10rem;
}

#genetics-progress div span{
    width: 50%;
    height: 100%;
    background: 
    rgb(189, 123, 219)
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='white' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")
    ;
    border-radius: 0.2rem;
    animation: bg-vertical infinite 1000s linear;
    transition: 1s ;
}

@keyframes bg-vertical {
    0%{background-position-y: -10000%;}
    100%{background-position-y: 10000%;}
}

#genetics-start{
    width: 10rem;
    height: 2rem;
    font-size: 1.5rem;
    border-radius: 0.2rem;
    background: var(--dark1);
    outline: rgb(189, 123, 219) solid 2px;
    color: rgb(189, 123, 219);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 5px 2px;
    cursor: pointer;
    transition: 0.1s;
}

#genetics-start:hover{
        outline: rgb(200, 165, 255) solid 2px;
    color: rgb(200, 165, 255);

}

#genetics-start:active{
    scale: 0.95;

}


.genetics-overview-tags{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 0.2rem;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 15rem;
    padding: 1rem;
}

.genetics-overview-tags div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    color: #a3ffee;
    border-radius: 0.2rem;
    background: var(--dark1);
    padding: 0.2rem;
    flex-shrink: 0;
    font-size: 0.9rem;
}

#pkmn-editor-sprite{
    z-index: 5;
}

#pkmn-editor-ribbons{
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 0.2rem;
    margin-top: -2rem;
    z-index: 10;
}

#pkmn-editor-ribbons span{
    margin: 0 -0.2rem;
}

#pkmn-editor-ribbons img{
    image-rendering: pixelated;
    cursor: help;
}

#pkmn-editor-ribbons img:hover{
    animation: itemShake 0.3s 1;
}


#shop-categories{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: start;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem;
}

#shop-categories div{
    height: 6.5rem;
    width: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    background: white;
    color: var(--dark2);
    outline: #a6a8b1 solid 2px;
    padding-top: 1.3rem;
    transition: 0.1s;
    cursor: pointer;;
}

#shop-categories img{
    scale: 2;
    image-rendering: pixelated;
    background: #c4c5ca;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
}

#shop-categories div:hover{
    background: #a6a8b1;
    color: white;
}

#shop-categories div:active{
    scale: 0.95;
}

#shop-back svg{
    height: 2rem;
    width: 2rem;
    margin: 0 0.2rem;
}

#shop-back{
    background: rgb(102, 151, 207) !important;
}

#shop-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: 
    
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='black' fill-opacity='0.1'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,rgb(201, 201, 201)
    ;
    background-size: 10%;
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
    animation: bg-diagonal infinite 1500s linear;
}

@keyframes bg-diagonal {
    0%{background-position-y: -2000%; background-position-x: -2000%;}
    100%{background-position-y: 2000%; background-position-x: 2000%;}
}

@media (max-width: 1000px) {
    #shop-menu {
        width: 100%;
    }
}


#shop-menu-header{
    height: 6.5rem;
    width: 100%;
    background-image: url(img/bg/mall.png);
    background-size: cover;
    background-position: bottom;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    text-align: end;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;
        position: sticky;
    top: 0;
    z-index: 2;
}


#shop-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;

}

#shop-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

#shop-listing{
    height: auto;
    margin-top: 0.1rem;
    width: 95%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index:1;

}

.shop-currency{
    padding: 0.2rem 0.2rem;
    border-radius: 0.2rem;
    background: white;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    color: var(--dark2);
    width: 7rem;
    cursor: help;
    
}

#shop-listing div{
    width: 100%;
    height: 2rem;
    border-radius: 0.2rem;
    background: var(--dark2);
    outline: white solid 2px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: white;
    cursor: help;
    transition: 0.05s;
}

#shop-listing div:active{
    scale: 0.95;
}

#shop-listing div:hover{
    background: var(--dark1);
}

#shop-listing img{
    background: white;
    width: auto;
    image-rendering: pixelated;
    margin-right: 0.5rem;
}

#shop-listing strong{
    display: flex;
    justify-content: start;
    align-items: center;
    background: white;
    color: var(--dark2);
    margin-left: auto;
    border-radius: 0.2rem;
    overflow: hidden;
    padding-right: 0.5rem;
    width: 5rem;
}

#shop-listing strong img{
    margin: 0;
}

#pkmn-editor-type{
    display: flex;
    gap: 0.5rem;
    width: 100%;
    position: relative;
}

#pkmn-editor-type div{
    height: 1.5rem;
    color: white;
    border-radius: 0.2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.explore-pkmn-tag{
    font-size: 1rem;
    padding: 0 0rem;
    height: 2.3rem;
    background: var(--light2);
    color: var(--dark2);
    border-radius: 0.2rem;
    white-space: nowrap;
    width: 100%;
    margin-top: 0.3rem;
        display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    padding-left: 0.5rem;
}


.explore-pkmn-tag select{
    background: var(--dark2);
    border: none;
    width: 80%;
    color: var(--light2);
    font-size: 1rem;
    padding: 0 0.3rem;
    cursor: pointer;
    height: 100%;
    border-radius: 0.2rem;
    padding: 0 1rem;
    margin-left: auto;


}


.frontier-league{
    width: 98%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.2rem;
    background: var(--dark1);
    flex-direction: column;
    color: var(--light2);
    outline: inset var(--light2) 2px;
    margin-bottom: 1rem;
}


.frontier-league span, .frontier-league div{
   border-radius: 0.3rem;
      display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   padding-right: 1rem;
}

.frontier-league div{
   background: var(--light1);
   color: var(--light2);
}

.frontier-league  svg{
   margin: 0 1rem;
}

.frontier-league strong{
   height: 100%;
   width: 3rem;
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--light2);
   margin-right: 0.5rem;
}


.genetics-warning{
    background: rgb(207, 93, 93);
    color: white;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.genetics-warning svg{
    margin: 0 0.5rem;
    flex-shrink: 0;
}

#pokerus-warning{
    background: rgb(193, 110, 214);
    display: none;
}

#text-data-raw{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    height: 2rem;
    background: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
}



#event-banner{







    background-image: url(img/bg/event/kanto.png);
    height: 8rem;
    width: 95%;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position-y: 10%;
    position: relative;
    overflow: hidden;
    border: rgba(255, 255, 255, 0.7) double 4px;
    margin-top: 0.5rem;
}






#event-banner span{

  font-family: "Megrim", system-ui;
      font-weight: 100;
    font-style: normal;

    background: rgba(0, 0, 0, 0.5);
    font-size: 3rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    -webkit-text-stroke: 5px rgba(255, 255, 255, 0.2);
    paint-order: stroke fill;
    backdrop-filter: blur(1px);
    white-space: nowrap;
}

@media (max-width: 1000px) {
    #event-banner span {
        font-size: 2rem;
    }
}



#training-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: var(--dark2);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;
}

@media (max-width: 1000px) {
    #training-menu {
        width: 100%;
    }
}


#training-menu-header{
    height: auto;
    width: 100%;
    background-image: url(img/bg/mini/city2.png);
    background-size: 20rem;
    background-position:bottom left;
    image-rendering: pixelated;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    flex-direction: column;
    flex-shrink: 0;
    padding-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.7) 15px 0px 5px;
}

#training-menu-header span {
    height: 2rem;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark1);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1rem;
    font-weight: 100;
    flex-shrink: 0;
    margin-bottom: -2rem;
    z-index: 2;
}

#training-menu-header span svg{
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
}

#training-header-flex{
    height: 10rem;
    width: 100%;
}

.training-flex{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}

.training-flex-1{
        width: 11rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
}

.training-flex-1 img{
    scale: -2 2;
    animation: pkmn-active 0.3s infinite;

}

.training-flex-2{
        width: 4rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
}

.training-flex-2 img{
        height: 130%;
        image-rendering:initial;
        position: absolute;
        bottom: 0;
        animation: train-sack 1.5s infinite;
        transform-origin: top center;
        z-index: 0;
}

@keyframes train-sack {
0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-25deg);
  }
  30% {
    transform: rotate(10deg);
  }
  45% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#training-list{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    align-content: start;
    position: relative;
    border-radius: 0.5rem;
    padding: 5px;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0.5rem;

}

.training-module{
    height: 5.5rem;
    width: 49%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark2);
    border-radius: 0.3rem;
    border-top: #60A5FA 2px solid;
    flex-direction: column;
    position: relative;
    color: var(--light2);
    padding: 3px;
    gap: 5px;
    cursor: help;
    transition: 0.1s;
}

.training-module:hover{
    filter: brightness(1.2);
}

.add-training{
    background: transparent !important;
    height: 10rem;
}

.training-module span{
    height: 100%;
    width: 100%;
    background-color: var(--dark1);
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    padding: 0 0.5rem;
}

.training-module strong{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    background: var(--dark1);
    outline: solid 1px #dfc969;
    color: #60A5FA;
    border-radius: 0.3rem;
    font-weight: 100;
}

#training-sprite-div svg{
    cursor: pointer;
    transition: 0.1s;
}

#training-sprite-div svg:hover{
    transform: scale(1.1);
}


#training-sprite-div{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
}


#afk-overlay{
    position: fixed;
    height: 100%;
    width: 50%;
    background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 1000000;
    animation: bg-diagonal infinite 1500s linear;
    padding-top: 2rem;
    gap: 1rem;
    color: white;
    font-size: 1.1rem;
    opacity: 0.96;

}

#afk-overlay div{
    height: auto;
    width: auto;
    display: flex;
    border-radius: 0.5rem;
    flex-direction: column;
    color: white;
}

#afk-overlay img{
    image-rendering: pixelated;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

#afk-overlay div svg{
    color: white;
    height: 5rem;
    width: 5rem;
}

@media (max-width: 1000px) {
    #afk-overlay {
        width: 100%;
        font-size: 0.9rem;
    }
}




#dictionary-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background: 
   
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1)
    ;    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 30;
    background: var(--light1);

}

@media (max-width: 1000px) {
    #dictionary-menu {
        width: 100%;
    }
}

#dictionary-list{
    padding-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    gap: 2px;
}

#dictionary-list div{
    width: 48%;
    height: 2rem;
    background: rgba(0, 0, 0, 0.2);
    color: var(--light2);
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    justify-content: start;
    align-items: center;
    transition: 0.1s;
    cursor: pointer;
}

#dictionary-list div svg, #dictionary-list div span{
    background: var(--dark2);
    height: 100%;
    width: auto;
    padding: 6px;
    color: var(--light1);
    border-radius: 4px;
    margin-right: 0.3rem;
    position: relative;
    pointer-events: none;
}

#dictionary-list div span img{
    opacity: 0.3;
    height: 100%;
    scale: 1;
}



#dictionary-list div:hover{
    background: var(--dark2);
}

#dictionary-list div:active{
    scale: 0.9;
}



.dictionary-overview-data{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.dictionary-overview-data div{
    width: 100%;
    height: 2px;
    border-radius: 3rem;
    background-color: var(--light1);
}

.dictionary-overview-data span{
    white-space: nowrap;
    padding: 0 0.4rem;
    color: var(--dark1);
}

#dictionary-header{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
    height: 9rem;
    background: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.2' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"),
    var(--dark2);
    
    flex-shrink: 0;
    border-radius: 0 0 0.5rem 0.5rem ;
    box-shadow: rgba(0, 0, 0, 0.7) 15px 0px 5px;
    padding: 0 1.8%;
    flex-direction: column;

}


#dictionary-search{
    width: 100%;
    height: 2rem;
    margin-bottom: 0.5rem;
    border-radius: 0.3rem;
    border: none;
    outline: none;
    color: var(--light2);
    background: var(--dark1);
    padding: 0 0.5rem;
    font-size: 1rem;
}

#dictionary-filters{
    background: var(--dark1);
    border-radius: 0.5rem;
    height: auto;
    width: 15.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

#dictionary-filters div{
    border-radius: 0.2rem;
    background: var(--dark2);
    width: 7rem;
    height: 1.8rem;
    text-align: center;
    color: var(--light2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor:pointer;
    transition: 0.1s;
}

#dictionary-filters div:hover{
    background: var(--light2);
    color: var(--dark2);
}




#team-preview .explore-team-member {
    cursor: move !important;
    transition: opacity 0.2s;
}


#battle-summary-flex{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    position: relative;
}

#battle-summary-flex img{
    scale: 0.7;
    image-rendering: pixelated;
}

#battle-summary-flex div{
    background: var(--dark1);
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 0rem;
    position: relative;
    height: 4rem;
}

#battle-summary-flex span{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-right: 0.5rem;
    padding-right: 1rem;
}

.battle-summary-bar{
    background: rgb(124, 86, 133);
    border-radius: 2px;
    height: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-shrink: 0;
    color: var(--light2);
    z-index: 0;
}

.battle-summary-bar text{
position: absolute;
right: 0.5rem;
z-index: 1;
transform: translateY(-1rem);
}




.auto-build-confirm,
.duplicate-build-confirm{
    border-radius: 0.2rem;
    background: var(--light1);
    color: white;
    margin-top: 0rem;
    transition: 0.1s;
}
.auto-build-confirm{
    margin-top: 1rem;
}

#pokedex-filters-remove, #pokedex-filters-cancel{
    cursor: pointer;
}

.auto-build-confirm:hover{
.auto-build-confirm:hover,
.duplicate-build-confirm:hover{
    filter: brightness(1.1);
}
}

#team-duplicate-target{
    text-align: center;
    background: var(--dark2);
    color: white;
    font-size: 1rem;
}



#tooltipActions{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}




#custom-challenges-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='white' fill-opacity='0.03'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E")
    ,
    var(--dark1);
    overflow: scroll;
    overflow-x: hidden;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
}


@media (max-width: 1000px) {
    #custom-challenges-menu {
        width: 100%;
    }
}



#custom-challenges-header{
    height: 6.5rem;
    width: 100%;
    background-image: url(img/bg/tower.png);
    background-size: cover;
    background-position: bottom;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin-bottom: 1rem;
    padding: 0.4rem 2%;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 4px 0;
}

#custom-challenges-header > div{
    justify-content: flex-end;
}

#custom-challenges-header span{
    height: 2rem;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    padding: 1.3rem 1rem;
}

#custom-challenges-header span svg{
    height: 2rem;
    width: 2rem;
}

#custom-challenges-controls{
    width: 95%;
    gap: 1rem;
    display: flex;
}

.challenges-list{
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.custom-challenge-card{
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0.5rem;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: white;
    position: relative;
}

.custom-challenge-card-icons{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.4rem;
}

.custom-challenge-card-icon{
    height: 2rem;
    width: 2rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark2);
    color: var(--light2);
    cursor: pointer;
    transition: 0.1s;
}

.custom-challenge-card-icon.danger{
    background: rgba(189, 78, 63, 0.65);
    color: white;
}

.custom-challenges-tab{
    display: none;
    flex-direction: column;
    margin-top: 1rem;
    gap: 0.8rem;
    width: 100%;
    align-items: center;
}


.custom-challenge-card-title{
    font-size: 1.3rem;
    font-weight: 200;
}

.custom-challenge-card-teams{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.95rem;
    opacity: 0.85;
}

.custom-challenge-card-reward{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.custom-challenge-reward-items{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.custom-challenge-reward-item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.4rem;
    cursor: help;
}

.custom-challenge-reward-item img{
    width: 1.8rem;
    height: 1.8rem;
    image-rendering: pixelated;
}

.custom-challenge-card-actions{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.custom-challenge-button{
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    flex: 1;
    cursor: pointer;
    transition: 0.1s;
    color: white;
    pointer-events: auto;
    background: var(--light1);
}
.custom-challenge-button:active{
    scale: 0.9;
}

.custom-challenge-danger{
    background: rgb(189, 78, 63);
    color: white;
}

#custom-challenge-editor{
    width: 95%;
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: white;
}

#custom-challenges-list #custom-challenge-editor{
  width: 100%;
}

.custom-challenge-field{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.custom-challenge-field label{
    font-size: 0.95rem;
    opacity: 0.8;
}

#custom-challenge-title,
#custom-challenge-notes,
#custom-challenge-text{
    border-radius: 0.4rem;
    border: none;
    padding: 0.5rem;
}

#custom-challenge-text{
    resize: vertical;
}

#custom-challenge-text{
    min-height: 20rem;
    font-family: inherit;
}

.custom-challenge-actions{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#custom-challenge-preview{
    font-size: 0.95rem;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#custom-challenge-error{
    color: #ff9e9e;
    font-size: 0.95rem;
}

#custom-challenge-selection-count{
    font-size: 1rem;
    font-weight: 200;
}

.custom-challenge-select-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.custom-challenge-select-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.4rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.6rem;
    color: white;
    cursor: pointer;
    transition: 0.15s;
    text-align: center;
    min-height: 12rem;
}

.custom-challenge-select-card:hover{
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.custom-challenge-select-card.selected{
    background: rgba(86, 126, 116, 0.75);
    border-color: rgba(151, 255, 221, 0.8);
    box-shadow: 0 0 0 2px rgba(151, 255, 221, 0.4);
}

.custom-challenge-item-icon{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
}

.custom-challenge-select-sprite{
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.custom-challenge-select-info{
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    font-size: 0.8rem;
}

.custom-challenge-select-name{
    font-size: 0.95rem;
    font-weight: 200;
    margin-bottom: 0.1rem;
}

.custom-challenge-select-level{
    color: #ffd700;
    font-size: 0.85rem;
}

.custom-challenge-select-ability{
    color: #c8a2ff;
    font-size: 0.75rem;
}

.custom-challenge-select-ivs{
    color: #87ceeb;
    font-size: 0.7rem;
    line-height: 1.2;
}

.custom-challenge-select-moves{
    color: #98fb98;
    font-size: 0.75rem;
    line-height: 1.3;
    word-wrap: break-word;
}





.pkmn-walk{
    width: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
}

.pkmn-walk img{
    scale: -2 2;
    animation: pkmn-active 0.5s infinite, pkmn-walk 30s 1 linear;
    image-rendering: pixelated;
    z-index: 0;
}

@keyframes pkmn-walk{
    0%{margin-left: -30%;}
    100%{margin-left: 130%;}
}

.frontier-ticket div{
    background: 
    url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23bcb0ff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E")
    , #484657
    ;
    border-color: #bcb0ff !important;
}

.frontier-ticket span{
    color: white;
}

.frontier-ticket strong{
    background: #9c92d8 !important;
}

.frontier-ticket{
    border: solid #bcb0ff 2px;
}

.frontier-flair{
    position: absolute;
    height: 7rem;
    width: 7rem;
    right: 7rem;
    color: #bcb0ff;
    opacity: 0.5;
}

.remember-move{
    width: 100%;
    background: var(--dark1);
    border-radius: 0.3rem;
    font-size: 1rem;
    height: 2.5rem;
    margin-top: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px red;
    color: white;
    cursor: pointer;
    transition: 0.1s;
}

.remember-move:hover{
    background: var(--dark2);
}

#remember-movelist{
    max-height: 25rem;
    overflow-y: scroll;
}


#wonder-menu{
    position: fixed;
    height: 100%;
    width: 50%;
    background:rgba(0, 0, 0, 0.8);
    z-index: 150;
    overflow: scroll;
    overflow-x: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
    z-index: 1000;
    animation: fade 0.5s 1;
    display: none;

}

@media (max-width: 1000px) {
    #wonder-menu {
        width: 100%;
    }
}

@keyframes fade{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.wonder-content{
    height: 20rem;
    width: 20rem;
    background: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='white' fill-opacity='0.04'%3E%3Cpath opacity='0.7' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    , rgb(45, 44, 53);

    animation: bg-diagonal infinite 400s linear;


    border-radius: 1rem;
    margin-top: 3rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wonder-ball{
    animation: bounce 2.5s 1;
    position: absolute;
    z-index: 2;
    opacity: 0;
    top: 0;
    margin-top: 10rem;
    animation-fill-mode : forwards;
    animation-delay: 500ms;

}

#wonder-pkmn{
    transform-origin: center bottom;
    z-index: 2;
    animation: wonderTrade 0.5s 1 ease;
    animation-fill-mode : forwards;
    animation-delay: 3000ms;
    scale: 0;
    margin-top: auto;
    cursor: help;
}

#wonder-text{
    width: 95%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0.5rem;
    background: var(--dark1);
    position: absolute;
    border-radius: 0.5rem;
    color: white;
    opacity: 0;
    animation: fade 0.5s 1;
    animation-delay: 3500ms;
    animation-fill-mode : forwards;
    cursor: pointer;
    transition: 0.1s;
}

#wonder-text:hover{
    background: var(--dark2);
}

@keyframes wonderTrade{
    0%{
        scale: 0;
        filter: brightness(100);
    }
    100%{
        scale: 1;
        filter: brightness(1);
    }
}

@keyframes bounce {
  0%{
    top: 0;
    opacity: 0;

  }
  10% {
    top: -200px;
    animation-timing-function: ease-in;
        opacity: 0;

  }
  40% {
    top: 0;
    animation-timing-function: ease-out;
    opacity: 1;
    rotate: 0deg;

  }
  55% {
    top: -50px;
    animation-timing-function: ease-in;
  }
  70% {
    top: 0;
    animation-timing-function: ease-out;
        rotate: 50deg;

  }
  82% {
    top: -20px;
    animation-timing-function: ease-in;
  }
  98% {
    top: 0;
    opacity: 1;
    rotate: -20deg;
    scale: 1;

  }
  100%{
    opacity: 0;
    scale: 2;
  }
}