@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fanwood+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');


.anton-regular {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modalContent {
    background-color: #ebe0c1;
    padding: 20px;
    border-radius: 12px;
    width: 80%;
    max-width: 900px;
    max-height: 80%;
    color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tcgPreviewCard{

}
.mentToReplaceTheTarget{
    transform: translate(-2px, -89.5%);
}
.mentToReplaceTheTarget .displayCard{
    zoom: 1 !important;
}
.statRow img{
    width: 1em;
}
    
.placeHoldmg{
    display: inline-block;
}
.infoPlch{
    display: inline-block;
}
.placeHoldmg img{
    width: 10em;
}

.closeBtn {
    align-self: flex-end;
    font-size: 24px;
    cursor: pointer;
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    
}

.tabButton {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    background-color: #eee;
}

.tabButton.active {
    background-color: #2196f3;
    color: #fff;
}

.tabContent {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cardItem {
    flex: 0 0 150px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #fafafa;
}

html{
	background:black;
	color:white;
	margin:0 auto;
	max-width:100%;
	height:100%;
	text-align:center;
	
}
.teamBoxInfo{
    position: absolute;
    z-index: 1;
    top: 0;
}
.itemsToClick:hover {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: brightness(1.35);
}
.itemsToClick{
    clip-path: inset(7% round 50%);
}

.playerIcon{
    cursor: pointer;
    position: relative;
    color: #ffdc73;
}
.iconWrapper{
    top: 11px;
    float: right;
    right: 3px;
    position: relative;

}
.icon{
    color: #ffdc73;
}
.playerIcon:hover, .playerIcon:active,
.labelNew:hover, .labelNew:active,
.icon:hover, .icon:active

{
    cursor:pointer;
    color:wheat;
}
.gamefiedHeader{
 
    position: relative;
    text-align: center;
    /* background: #86798a; */
    border: none;
    padding: 17px 13px 17px;
    cursor:pointer;
    margin: 1px 0 0.5px;
    
    letter-spacing: 0.02em;
    font-family: anton;
    text-transform: uppercase;
    color:#ef0000;
    text-shadow :-1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    text-align: center;
}
.loginBtn{
    position: relative;
    text-align: center;
    border: none;
    padding: 9px 13px 9px;
    cursor: pointer;
    /* background: #86798a; 
    filter: drop-shadow(0px 0px 8px #ef0000);*/
    top: -10px;
    margin: 0;
    letter-spacing: 0.02em;
    font-family: anton;
    text-transform: uppercase;
    color: #ef0000;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    text-align: center;
}
.imgAdds{
    top: 7px;
    position: relative;
    width: 20px;
    background: black;
    border: 1px solid #ffdc73;
    height: 20px !important;
    border-radius: 50%;
    padding: 0;
    cursor:pointer;
    filter: drop-shadow(0px 0px 2px #ffdc73);
    transition: all 0.4s;
}
.imgAdds2{
    filter: drop-shadow(-1px 0px 1px #2c2c2c);
    border-radius: 50%;
    transition: all 0.4s;
    padding: 0;
    cursor: pointer;    
    right: -7px;
    top: -7px;
    height: 1.2em;
    width: 1.2em !important;
    position: relative;
}
.mediumImg{
    height: 4.2em;
    width: auto;
    display: block;
    margin: 0 auto;
    color: #601e05;
    filter: drop-shadow(0px 0px 6px #601e05);
}
.mediumImgShine{
    height: 4.2em;
    width: auto;
    display: block;
    margin: 0 auto;
    color: #001435;
    filter: drop-shadow(0px 0px 3px #dddddd);

}
.mediumImgShine2{
    height: 4.2em;
    width: auto;
    display: block;
    margin: 0 auto;
    color: #001435;
    filter: drop-shadow(0px 0px 3px #dddddd);
    border-bottom: 4px solid transparent;
    
    border-bottom: 4px solid #97958f;
    border-radius: 21px;
    box-shadow: 0px 1px 1px 1px #494949;
    transition: all 1s ease;
    background: #2f2753c9;
}
.miniCardsPreViewDeck{
    border-radius: 4px;
    height: 2em;
    width: 2em;
    border: 2px groove #0696d2;
}


::placeholder {color: black;opacity: 1;}:-ms-input-placeholder {   color: black;}::-ms-input-placeholder {   color: black;}
.activeMenuIcon{
    border-bottom: 4px solid #b4b4b4b0;
    border-radius: 21px;
    box-shadow: 0px 1px 0px 0px #000;
    transform: translateY(2px);
}
.mediumImgShine2:hover{
    border-color: #3c61ab;
    filter: drop-shadow(0px 0px 3px wheat);
    background: #2f2753;
}
.logoImg{
    height: 4.2em;
    width: auto;
    display: block;
    margin: 0 auto;
    color: #20b90d;
    filter: drop-shadow(0px 0px 2px #20b90d);
}
.logoImgblue{
    height: 8.2em;
    width: auto;
    display: block;
    margin: 0 auto;
    color: #001435;
    filter: drop-shadow(0px 0px 2px #001435);
}
.imgAdds:hover, .imgAdds:active{
    background: #dbb954;
}
.cronosBlueBox{
    background: #0e066b;
    padding: 5px 8px 8px;
    border-radius: 9px;
    border: 1px solid white;
}
.tokensIconSliced{
    position: absolute;
    height: 25px;
    bottom: 0;
    left: 10px;
    width: 23px;
    filter: drop-shadow(0px 0px 6px);
}
.tokensIconSlicedNew{
    position: absolute;
    height: 25px;
    bottom: 2px;
    left: 10px;
    width: 23px;
    /* color: #2c2c2c; */
    filter: drop-shadow(-1px 0px 1px #2c2c2c);
    transform: rotate(0deg) translateY(1px);
}
.containerForTokens{
    padding-left: 37px;
    color: #f7e7b5;
    min-width: 92px;
    display: inline-block;
    padding-top: 3px;
    position: relative;
    cursor: pointer;
    text-align: right;
    background: linear-gradient(9deg, #b70d00bd, #711d08, #ff0000);
    border-radius: 5px;
    height: 30px;
    padding-right: 15px;
    border: 1px solid #ffdc73;
}
.paperContainerSlicedTokens{
    padding-left: 37px;
    color: black;
    min-width: 44px;
    color: #ffdc73;
    display: inline-block;
    padding-top: 3px;
    position: relative;
    cursor: pointer;
    text-align: right;
    background-size: 100% 100%;
    background-image: url(images/skins/nameBannerPaper.webp);
    /* background: linear-gradient(9deg, #b70d00bd, #711d08, #ff0000); */
    border-radius: 5px;
    height: 30px;
    padding-right: 15px;

    min-width: 75px;
    margin: 8px auto;
    display: inline-block;
    width: fit-content;
    border: 1px solid wheat;
    padding: 5px 5px 0px 5px;
    background: #3c3c3c;
    height: 19px;
    border-radius: 5px;
}
.accountNameHolder{
    color: #d8cca6;
}
.loginView{
    position: absolute;
    top: 2.35em;
    font-size: 1.2em;
    right: 0;
    padding: 11px;
    border: 1px solid #ffdc73;
    left: 1px;
    bottom: 2px;
    z-index: 2;
}
.settingsView{
    position: fixed;
    top: 8.35em;
    font-size: 1.2em;
    z-index: 2;
    right: 10%;
    left: 10%; 
    transition: all 1s;
    border: 2px solid wheat;
    bottom: 10%;
    padding: 11px;
    box-shadow: 0 0 119px 121px #32373c;
}

.bottomHalf{
    overflow-y: auto;
}


.blueFramedWithImg{
    padding-top: 0px;
    width: fit-content;
    margin: 0em auto 10px;
    color: wheat;
    padding: 10px 12px; 
    text-shadow: 1px 1px 1px black;
    box-shadow: rgb(0 29 43 / 72%) 0px 1px 6px 5px inset;
    border-radius: 1%;
    background: #003d57;
    position: relative;
    text-align: left;
    border: 3px inset wheat;
}


.infoSpan{
    background: #00000025;
    padding: 0.75em 0.5em;
    border-radius: 4px;
    text-shadow: 2px 2px 2px black;
    border:1px solid wheat;
    display: inline-block;
    margin: 1em auto;
}
.sedwigHeader{
    
    text-align: center;
    margin: 0 auto;
    /* display: inline-block; */
    position: absolute;
    top: 4px;
    left: 15%;
    text-shadow: 5px 5px 2px black;
    right: 15%;
    text-decoration: none;
    font-family: 'Sedgwick Ave Display', cursive;
}
.secondHeader{
    text-align: center;
    margin: 0 auto;
    /* display: inline-block; */
    position: absolute;
    top: 4px;
    left: 15%;
    text-shadow: 5px 5px 2px black;
    right: 15%;
    text-decoration: none;

}
#infoPopUpTransfer{
    display: none;
    background: url('images/frameMetalAndPaper.webp');
    background-size: 100% 100%;
    box-shadow: rgb(0 29 43 / 72%) 0px 1px 6px 5px inset;
    top:2.75em;
    font-size: 1em;
}

.popUpInfoCardMedium{
    display: none;
    color: white;
    transition: all 0.5s;
    width: auto;
    border-top: 2px solid #aa732b;
    font-size: 1em;
    box-shadow: rgb(0 29 43 / 72%) 0px 1px 6px 5px inset;
    z-index: 4;
    position: fixed;
    min-width: 30%;
    overflow-y: auto;
    min-height: 43vh;
    background: url('images/frameMetalAndPaper.webp');
    background-size: 100% 100%;
    padding: 0.5em 0em 1.5em;
    top: 4.75em;
    left: 20%;
    right: 20%;
    border: 3px #a38956;
    border-radius: 1px;
    border-style: solid;
}

.inputClass{
    padding: 10px;
    border-radius: 8px;
    border: 2px solid rgb(128, 128, 128);
    font-size: 16px;
    border: 2px solid #0631483d;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 6px;
    box-shadow: 0px 0px 1px 2px #026874b8;
    text-align: center;
    margin-right: 10px;
    background: wheat;
}
/* Style the toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    bottom: 7px;
    background: linear-gradient(180deg, #00000042, #00fff8a1, #00000066);
    box-shadow: 0px 0px 5px 2px #026874b8;
    border-radius: 4px;
    border: 1px solid #ffdc7354;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #21a2f329;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: wheat;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2bd5003d;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 4px;
}

.slider.round:before {
    border-radius: 38%;
    border: 1px solid #72560359;
}

.iconImagesHeader:hover, .iconImagesHeader:active{
    background: linear-gradient(180deg, #a4000099, #ff8f00a1, #024f4a66);
    box-shadow: 1px 1px 1px 1px black;
    transition: color 0.5s ease;

}
.iconImagesHeader{
    max-width: 3em;
    cursor:pointer;
    max-height: 3em;
    background: linear-gradient(180deg, #0092a499, #ff8f0052, #024f4a66);
    height: 2.75em;
    background-size: 100% 100%;
    top: 0;
    position: relative;
}
.headings{
	font-family: 'Holtwood One SC', serif;
	font-family: 'Sedgwick Ave Display', cursive;
}
.otherFont{
font-family: 'Yeon Sung', cursive;
	font-family: 'Sedgwick Ave Display', cursive;
}
body{
	margin:0;
    overflow-x: hidden;
}
h1{
	font-size:5em;
}
h2{
	font-size:4em;
	text-decoration:underline;
}
h3{
	font-size:3em;
    transition: font-size 0.5s;
	

}
.textStyle{
    padding: 10px;
    line-height: 20px;
    color: #ffebc5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-shadow: 1px 1px 1px black;
}
a{
	color:#f3d406;
}
p{
	font-size:1.25em;
	margin:2em 0;
}


.leverHidden{display:none;cursor:pointer;}



#viewMoreLightningInfo, #viewMoreBzzInfo, #viewMoreHeartInfo, #viewMoreEarthInfo, #viewMoreDragonInfo, #viewMoreWaterInfo, #viewMoreFireInfo{
	font-size:1em;
} 
.icon:before{
	text-shadow: 1px 1px 1px black;
}
.icon:hover, .click-wrapper:hover, .dailyIncome:hover, .farm-button:hover{
	    cursor:pointer;
}
.clicked{
	background: #0000002b !important;
}
.farm-button {
  background: none;
}
.label, .label2{text-shadow: 1px 1px 1px black;}
.label:hover,.label2:hover, #menuIconInRoot:hover{	
    color: beige !important;
	display:inline !important;cursor:pointer;
}
.labelNew, .labelNew2{
    color: #ffdc73;
    cursor:pointer;
    text-decoration:none;
    bottom: 14px;
    left: 4px;
    position: relative;
}
.labelNew2{
    color: #e6d4a0;
}
.labelNew2:hover, .labelNew2:active{
    color: #ddbb56;
}
#menuIconInRoot, #menuIconInRoot2{
   position: absolute;
    left: 1.5em;
    cursor: pointer;
    top: 1.125em;
    font-size: 1.25em;
    padding: 0.25em;
    background: #673813;
    border-radius: 4px;
    border: 2px solid wheat;
}
.listsAboveOptions{
	text-shadow: 1px 1px 1px black;
}
.imageCtnr{
    max-width: 100%;
    max-height: 11em;
    display: block;
    border: 1px solid #404040;
    text-align: center;
    margin: 0 auto;
    border-radius: 7px;
}
.litsHeading{
	    margin: 0;
    top: 1.75em;
    position: relative;
}
.menuInStakingIcons{
	display: block;
    list-style: none;
    margin: 0 4px 0px;
    padding: 0px 5px 0px 0px;
cursor:pointer;
}
.menuListInStaking{
	display: none;
    margin: 0px;
    padding: 0px;
    left: 10em;
    position: absolute;
    width: max-content;
    top: 3.8em;
    left: 2em;
    background: #673813;
    border: 1px solid;
    padding: 0.5em;
    border-radius: 8px;
}
@keyframes damagePulse {
  0% { transform: scale(1); filter: brightness(1);background-color: #ff0000;box-shadow: 1px 1px 30px 5px rgb(251, 12, 12);}
  50% { transform: scale(0.995); filter: brightness(0.9);background-color: #ba0b0b;box-shadow: 1px 1px 30px 5px rgb(206, 0, 0);}
  95%{box-shadow: 1px 1px 30px 5px rgb(101, 0, 0);}
  100% { transform: scale(1); filter: brightness(1);background-color: #000;box-shadow: none;}
}

@keyframes flashAnimation {
    
  5%, 15%, 25%, 35%, 45%, 65%, 75%, 85%, 95% {background-color: #ba0b0b;}
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%{background-color: #000;}
  }
  @keyframes shakeAnimation {
      0%, 100% {
        transform: translateX(0);
      }
      10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
      }
      20%, 40%, 60%, 80% {
        transform: translateX(5px);
      }
    }
.damage-animation {
  animation: damagePulse 1s linear;
}
#xInSpinner:hover, #xInViewInfo:hover, #xInViewInfo2:hover{
	background: #2c2b2b;
    color: #e2e2e2;
}
#xInSpinner, #xInGameInfo, #xInViewInfo, #xInViewInfo2{
	right: 1em;
    padding: 7px;
    top: 1em;
    font-size: 1.5em;
    z-index: 999999;
    color: #060606;
    background: #786b61;
    cursor: pointer !important;
    position: absolute;
    width: 1em;
    border: 2px solid black;
    text-shadow: 1px 1px 1px black;
    text-align: center;
    border-radius: 8px;
}
#xInSpinner{display:none;}
.con3:hover{
	background:#162403;
}
#iconLogoBottom:hover{
	background:#630000;
}
#logoHome:hover,#logoHome:focus, #doorHandles:hover, #left_shield:hover, #right_shield:hover{
	cursor:pointer;-webkit-filter: brightness(135%);
}
#logoHome, #doorHandles, #right_shield, #left_shield{
	opacity:0;
}
.earnCard{
	display: block;
    position: relative;
    width: 100%;
    left: 0;
    background: black;
    right: 0;
	color:gold;
    border-top: 2px solid gold;
    border-bottom: 2px solid gold;
    border-radius: 0%;
	margin: 2em 0;
	padding: 1em 0 2em 0;
    box-shadow: 0px 5px 14px 5px #b8860b;
}
.earnCard div:hover{border: 1px gold solid;    box-shadow: 0px 2px 16px 0px gold;}
.earnCard div{
    border-radius: 3px;
    background: #5405a3;
    background-image: linear-gradient(144deg,#170d02, #134905 69%,#050f01);
    
    height: 1em;
    margin: 0.5em;
    padding: 1em;
    color: gold;
	display:inline-block;
	border: 1px #6f5d00 solid;
    box-shadow: 0px 2px 16px 0px #b8860b;
}

.earnCard2{
	display: block;
    position: relative;
    width: 100%;
    left: 0;
    background: black;
    right: 0;
    color: gold;
    border-top: 2px solid gold;
    border-bottom: 2px solid gold;
    border-radius: 0%;
    margin: 2em 0;
    padding: 1em 0 2em 0;
    box-shadow: 0px 5px 14px 5px #b80b0b;
}
.earnCard2 div:hover{border: 1px gold solid;    box-shadow: 0px 2px 16px 0px gold;}
.earnCard2 div{
    border-radius: 3px;
    background: #5405a3;
    background-image: linear-gradient(144deg,#170d02, #650a0a 69%,#050f01);
    height: 1em;
    margin: 0.5em;
    padding: 1em;
    color: gold;
    display: inline-block;
    border: 1px #6f5d00 solid;
    box-shadow: 0px 2px 16px 0px #b8860b;
}

.earnList{
	display:block;
	list-style : none;
}

.iconsStaked{
	height:2em !important;
}
.boxesTartarus{
	height: 1em !important;
}
.boxesTartarusBig{
	height: 2em !important;
}
header{
	width:100%;
	clear:both;
	height: 5em;
	background:black;
    background: #1b4f90;
    background: #1b7690;
    position: fixed;
	z-index:1;
	top:0;transition: top 0.5s ease-in-out;
	border-bottom:1px solid gold;
	
}
.nav-up {
    top: -4.75em;
}
.nav-down {
    
	z-index:1;
}
.header{
	width:100%;
	clear:both;
}

.iconInNftCard{
	width: 0.5em;
    top: 100%;
    left: 0;
    z-index: 105;
    height: 1em;
    position: absolute;
    border-radius: 50%;
    margin-left: 0;
    border-style: dotted;
    display: inline;
    margin-top: 0.5em;
    border-color: gold;
    background: none;
    box-shadow: 0px 0px 2px 1px #b8860b;
}




.icon_images{
	max-width:2em;
	max-height:1em;
}

.mainSection{
	max-width:100%;
	text-align:center;
	margin:0 auto;
	max-height:100%;
	
}
.svgFull{
	width:100%;
	height:100%;
}
#frameCardCommon2:hover > #insertCardCommon2 {opacity:1;}
.gameCanvas{
	width:100%;
}
#RankHolderPrint{font-size:146px;}
#firstScreen{transition: opacity 0.5s linear;}
#selectInterface{display:none; transition: opacity 0.5s linear; opacity:0;}
#searcForBattleInterface{display:none;transition: opacity 0.5s linear; opacity:0;}

#advance, #goBack{filter:drop-shadow( 0px 0px 0px rgba(338, 295, 0, 0));;}
 #advance:hover, #advance:active, #goBack:hover, #goBack:active{filter: drop-shadow( -2px 0px 128px rgba(338, 295, 0, 1));}
.inHandCards{opacity:0.4;}
.inHandCards:hover, .inHandCards:active{opacity:1;}

.insertCards{opacity:0.5;}
.insertCards:hover, .insertCards:active{opacity:1;}
.center-page{
	max-height:100%;
	max-width:100%;
}
.buttonsInMetaMorpis{
	
    width: 30%;
    left: 35%;
    position: relative;
}

.headerLine{
	position: relative;
    width: 100%;
    min-height: 0.25em;
    margin: 0 0;
    background-color: #de0f31;
}
.nftCardsCommon{
	display: inline-block;
    background: #212121;
    padding: 3em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 1%;
    background-image: url(../Gallery/images/backSideCommon.webp);
    border: grey;
    transition: 300ms;
}
.nftCardsBronze{
	display: inline-block;
    background: #212121;
    padding: 3em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 1%;
    background-image: url(../Gallery/images/backSideBronze.webp);
    border: bronze;
    transition: 300ms;
}
.nftCardsSilver{
	display: inline-block;
    background: #212121;
    padding: 3em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 1%;
    background-image: url(../Gallery/images/backSideSilver.webp);
    border: silver;
    transition: 300ms;
}
.nftCardsGold{
	display: inline-block;
    background: #212121;
    padding: 3em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 1%;
    background-image: url(../Gallery/images/backSideGold.webp);
    border: gold;
    transition: 300ms;
}
.nftCardDisplayer{
	    display: inline-block;
    background: #212121;
    padding: 1em;background-size:100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
	    background-image: linear-gradient(187deg,#212121, #3d3d3d 46%,#212121);
		background: linear-gradient(233deg,#121306, #0d2506 46%,#0f3604);
    border: gold 1px solid;
	transition: 300ms;
}
.nftCardDisplayerStakingHeart{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, #ff60d3 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingEarth{
	    display: inline-block;
    background: #212121;
    padding: 1em;background-size:100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
	    background-image: linear-gradient(187deg,#212121, #00d333  46%,#212121);
    border: gold 1px solid;
	transition: 300ms;
}
.nftCardDisplayerStakingDragon{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, #a600d3 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingWater{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, #006fd3 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingFire{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, #d30000 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingLightning{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, #d3aa00 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingShits{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, brown 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerStakingBzz{
    display: inline-block;
    background: #212121;
    padding: 1em;
    background-size: 100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
    background-image: linear-gradient(187deg,#212121, blue 46%,#212121);
    border: gold 1px solid;
    transition: 300ms;
}
.nftCardDisplayerMetaMorphis:hover{
	background: #431f01;
    box-shadow: 1px 1px 1px 2px black;
    border-color: #f4ddb2;
}
.nftCardDisplayerMetaMorphis{
	display: flex;
    background: #00672db8;
    padding: 0.5em;
    width: 178px;
    /* height: 120px; */
    background-size: 100% 100% !important;
    margin: 0.25em auto;
    border-radius: 2%;
    /* background-image: linear-gradient(187deg,#00c954, #87ff23 46%,#00ff23); */
    border: #673813 2px ridge;
    transition: 300ms;
    pointer-events: none;
}
.click-wrapper {
  pointer-events: all;
}
#harvestCro, #harvestMorphs, #harvestFromHeart, #harvestFromEarth, #harvestFromDragon, #harvestFromWater, #harvestFromFire, #harvestFromLightning, #harvestFromBzz{
	cursor:pointer;
}
#farmOptionstList span:hover,#harvestList span:hover, #HarvestFromStaking span:hover{background:#8d7950;}
#harvestList span, #HarvestFromStaking span{
	display: inline-block;
    border-bottom: 1px solid;
    width: 100%;
    padding: 0px 0 2px 0;
    margin: 0;
}
#farmOptionstList span{
	display: inline-block;
    border-bottom: 1px solid;
    width: 100%;
    margin: 0;
}
#farmOptionstList span{
	display:inline !important;
	cursor:pointer;
}
#HarvestFromStaking{
	margin: 0;
    list-style: none;
    color: black;
}
#harvestList, #farmOptionstList{
	z-index: 1;
	margin: 0;
    list-style: none;
    padding: 9px 0 6px;
    border-radius: 5px;
    border: 2px solid;
    position: absolute;
    top: -88px;
    border-color: wheat;
    right: 0;
    color: black;
    background: #b99f6d;
}
#farmOptionstList{
	top: 15px;
}
#harvestListHolder ,#harvestListHolder2, #farmOptions{
	position:relative;
}
.nftCardDisplayerTartarus{
	    display: inline-block;
    background: #212121;
    padding: 1em;background-size:100% 100% !important;
    margin: 0.25em;
    border-radius: 4%;
	background-image: linear-gradient(233deg,#e3020f, #f3e502 46%,#e00000);
    border: #ad0000 1px solid;
	transition: 300ms;
}
.deadnftCardDisplayer{
	    display: inline-block;
    background: #212121;
    padding: 0em;
    margin: 0.25em;
    border-radius: 4%;
	background-image:url('../../Gallery/images/frameBadge.webp');
	background-size:100% 100%;
    border: gold 1px solid;
	transition: 300ms;
}
.nftCardDisplayer:hover{
	background: linear-gradient(233deg,#121306, #276b14 46%,#0f3604);
}
.nftCardDisplayerStakingEarth:hover{
	background: linear-gradient(233deg,#121306, #0d2506 46%,#0f3604);
}
.nftCardDisplayerTartarus:hover{
	    background: linear-gradient(233deg,#f3e502 , #e00000 46%,#f3e502 );
}
.click-wrapper:hover .nftCardDisplayerMetaMorphis{
	  background: linear-gradient(233deg,#88ff41, #7a0606 46%,#2ed300) !important;
}
.nftCardDisplayerStakingHeart:hover{
	  background: linear-gradient(187deg,#212121, #ac4b91 46%,#212121);
}
.nftCardDisplayerStakingDragon:hover{
	  background: linear-gradient(187deg,#212121, #5e0277 46%,#212121);
}
.nftCardDisplayerStakingWater:hover{
	  background: linear-gradient(187deg,#212121, #075295 46%,#212121);
}
.nftCardDisplayerStakingFire:hover{
	  background: linear-gradient(187deg,#212121, #8e0404 46%,#212121);
}
.nftCardDisplayerStakingLightning:hover{
	  background: linear-gradient(187deg,#212121, #896f06 46%,#212121);
}
.deadOnesMarginGone{
	margin-block-end:0;
	margin-block-start:0;
	margin:0;
}
.nftIconDisplayer{ 
display: inline-block;
    margin: 0.25em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../Gallery/images/hellMorphsBadge.webp);
}
.nftIconDisplayerDead{ 
display: inline-block;
    margin: 0.25em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../Gallery/images/frameBadge.webp);
}

.round-time-bar {
  margin: 1rem;
  overflow: hidden;
}
.round-time-bar div {
  height: 5px;
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration))
    forwards;
  transform-origin: left center;
  background: linear-gradient(to bottom, #06c114, #277805);
}
.noSpan{display:inline !important;border-bottom:none !important;}
.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

@keyframes roundtime {
  to {
    /* More performant than `width` */
    transform: scaleX(0);
  }
}


.navigation{
min-width:100%;
display:block;
min-height:100%;
height:100%;
width:100%;
position:relative;
visibility:visible;
transform: translateX(0%);
transition: .69s transform linear;

}
#topNav ul li{
	float: left;
}
nav{
	margin:1em;
}
nav ul {
  min-height:1em;
 
  margin: 0;
  padding: 0;
  clear: both;
}

nav ul li {
  list-style: none;
  
    align-items: center;
	
				/*Red borders, look a little bit cool imo*/
      background-image: linear-gradient(144deg,#452806, #f00 50%,#900303);
				/*Green below*/
			    background-image: linear-gradient(144deg,#452806, #00ff58 50%,#053401);
		
				/*The one we had, a bit desert look but can do one cooler here*/
  background-image: linear-gradient(144deg,#452806, #fff 50%,#ef950e);
  
  
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  /*max-width: 100%;
  min-width: 24%;*/
  padding:1px;
  margin:0 5px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
}
nav ul li a:after, nav ul li a:before{
	content: "";
    position: absolute;
    z-index: -1;
}
nav ul li a:before{
	    text-decoration: none;
    top: 2px; 
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 3px;
}
nav ul li a:before, nav ul li a:after{
	content: "";
    position: absolute;
    z-index: -1;
    border-radius: 6px;
}
nav ul li a:before{
	    background-image: linear-gradient(144deg,#170d02, #000 69%,#533304);
    top: 2px; 
    left: 2px;
    right: 2px; 
    bottom: 2px;
}
nav ul li a span{
	    position: absolute;
    background-image: linear-gradient(144deg,#170d02, #492a05 69%,#533304); /* Brown look - litt for likt mif*/
	background-image: linear-gradient(144deg,#170d02, #134905 69%,#050f01);
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-width: 1px;
    padding: 2px 0px;
    border-style: solid;
    border-radius: 6px;
}
nav ul li a span:hover{
	background-image:none;
}
nav ul li a span:active{
	    
		border-width:1px;
		
		border-color:#000000;
}
nav ul li a:hover{
	    /*background-color: #400c0c;  - for tartarus hover on buttons?*/
	background-color: #654300;
	background-color: #0e3503;
	    
}
.hiddenA:hover{color: #d69206;}

nav ul li a:active{
background-color: #020801;
	border-style: none;
    border-color: gold;
}
.maxMintBtns {
	display:inline;cursor:pointer;
}
nav ul li a {
    
	text-decoration:none;
    height: 100px;
    float: right;
    margin: 1px 1px;
	min-width: 140px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    background-color: #000000;
  padding: 16px 24px;
  border-radius: 6px;
  
  height: 100%;
  transition: 300ms;
}



#packageHold{
	border: 4px dashed #147b75;
	border: 4px dashed #bf8942;
    display: none;
    padding: 1.5em;
    border-radius: 35px;
    /* background: url(coins2.webp); */
    background-size: 100% 100%;
	color: antiquewhite;
    background: #dec287;
    background: #87deae;
    background: #00512c;
	font-size:1.2em;
}
.packageHoldFrame{
	border: 5px groove wheat;
    display: inline-block;
    margin: -1em auto 2em;
    padding: 1em;
    border-radius: 12px;
    /* background: url(coins2.webp); */
    /* background-size: 100% 100%; */
    color: antiquewhite;
    /* background: #dec287; */
    background: #00000057;
    font-size: 1.2em;
    width: auto;
}
.frameWork{
	border: 1px solid white;
    width: fit-content;
    margin: 1em auto;
	background: #b90c187a;
    position: relative;
    padding: 1em 1em 1em;
    top: 2em;
    border-radius: 6px;
	display:block;
}
.insideFrameWork{
	border: 2px solid;
    border-radius: 0px;
    background: #0000007a;
}

#inputBoxFarms{margin:2em auto;}
#inputBoxFarms2{margin:2em auto;}
.inpField{
	display:block;
	margin: 0 auto;
	background: black;
    border-color: lightblue;
    color: lightblue;
    padding: 0.5em;
    border-radius: 6px;
}
.imgIn{
    height: 3em;
    margin: 0em auto;
}
.imgIn3{
       height: 4.2em;
    
    border-radius: 50%;
    position: relative;
   
    bottom: 1em;
}
.imgInBig{
    display: inline-block;
    height: 6em;
    margin: 0 auto;
}
.maxIt{
    position: absolute;
    top: 3px;
    right: 2.5em;
cursor:pointer;
}
.powered{
	width: 8em;
    height: 3em;
    
	
}
.poweredHodler{
padding:1em 0em;
}
.headFarm{
font-size: 2em;
    margin: 0em auto 1em;}
.btmPart{
	position: relative;
    margin: 2em 0 1em;
    display: inline-block;
}.btmPart2{
	position: relative;
    margin: 2em 0 1em;
    display: inline-block;
}

table, th, td{
	border:3px solid;
	box-shadow: 1px 1px 1px 1px;
}
td:hover{
	background:#00000069;
}
td, th{
	padding: 0.5em;
	background:#00000036;
    border-radius: 3px;
}
table{
	box-shadow: none;
	margin:0 auto;
	padding:0.1em;
}
table a{
	color:#efc081;
}
.fontCorrection{
    bottom: 0.75em;
    cursor: pointer;
    position: relative;
}
.newAreas{
    transition: height 1s ease;
    /* background: #ff007b33; */
    /* overflow-y: auto; */
    margin: 0 auto;
    /* color: wheat; */
    /* font-family: nanami-bold; */
    font-size: 2em;
    /* font-size: 35px; */
    text-align: center;
    text-shadow: 0 0 17px #ffffffa3;
    text-transform: uppercase;
    padding: 1.5em 0em;
}
.iconRounded{
    border: 3px outset #d69d08;
    border-radius: 50%;
    margin: 0.25em 0.5em;
    height: 1.75em;
    box-shadow: 0px 0px 4px 1px #915c10;
}
.navMenu{
	height: auto;
    transition: max-height 1s ease 0s;
    position: absolute;
    width: auto;
    top: 2.75em;
    z-index: 25;
    border: 2px solid #8b5e3c;
    padding: 0;
    background: linear-gradient(291deg, #000000, #2f2a2a, #000000);
    background:  linear-gradient(291deg, rgb(28 36 10), rgb(15 46 3), rgb(28 36 10)) 0% 0% / 100% 100%;
    
    background-size: 100% 100%;
    
}

#li0 {
  background: rgba(0, 0, 0, 0.2);
  border-top: 2px solid #b77b1d;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.6);
  
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0;
}

#li0 span {
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

/*
#li1 img:hover, #li9 img:hover, #li1 img:active, #li9 img:active{
    border-style: inset !important;
}
*/
#menu{
    background: linear-gradient(317deg, rgb(101 1 8), rgb(73 0 13), rgb(126 3 3));
    border-left: none;
    border-top: none;
    border-right: 4px solid rgb(134 0 0);
    border-bottom: none;
    height: 77.5vh;
      background: linear-gradient(180deg, #6f0206 0%, #4c0006 45%, #2b0004 100%);
  border-right: 4px solid #b77b1d;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.tokenDropdownList{
    background: linear-gradient(317deg, rgb(101 1 8), rgb(73 0 13), rgb(126 3 3));  
}
#menu ul{
    height: 59.25vh;
    overflow-y: auto;
    border-top: 2px solid #b77b1d;
    padding: 0px 12px 0px;
}
#menu span, .tokenDropdownList span{
    bottom: 1px;
    text-shadow: 0 0 0 transparent;
  color: #521d01;
}
#menu li img, .tokenDropdownList li img{
    height: 2.1em;
    top: 0px;
    border-radius: 33%;
    left: -8px;
    margin: 0 8px 0 0em;
    box-shadow: none;
    background: #ffe3b133;
    border: 3px solid #7d5a00 !important;
}
#menu div div, .tokenDropdownList div div{
   background: #312000;
    border-radius: 30px;
    padding: 0px 0px 0px 0px;
    min-width: 186px;
    border: 4px groove #d69d08;
    height: 2.25em;
    border: 3px solid #e0b043;
    box-shadow:
        inset 0 0 0 2px #7d5a00,
        inset 0 2px 6px rgba(0,0,0,.6);
    padding: 0 16px 0 8px;
    display: flex;
  align-items: center;
  min-height: 2.4em;
  min-width: 190px;
  gap: 6px;

  background: linear-gradient(180deg, #3a2b00 0%, #2b2100 100%);
  border-radius: 15px;
}
#menu div, .tokenDropdownList div{
    background: #520606;
    border-radius: 30px;
    padding: 1px 3px 1px 3px;
    /* min-width: 186px; */
    border: 4px ridge brown;
    /* height: 2.75em; */
    box-shadow: 0px 0px 7px 0px #7b0404;
     background: radial-gradient(ellipse at center, #5a0707 0%, #430404 70%);
  border-radius: 30px;
  padding: 3px;
  border: 3px solid #7b0404;
  box-shadow:
    0 0 7px #7b0404,
    inset 0 0 6px rgba(0,0,0,.55);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

#menu div:hover > div, .tokenDropdownList  div:hover > div{
  border-color: #ffdf73;
  box-shadow:
    inset 0 0 0 2px #a87700,
    inset 0 2px 10px rgba(0,0,0,.55);
}
#menu div:hover > img, .tokenDropdownList div:hover > img{
  border:3px solid #ffdf73 !important;
}

#menu {
  background: radial-gradient(circle at top, #4b0202 0%, #240000 80%);
  
  box-shadow: inset 0 0 30px rgba(255,100,0,0.15);
}
#menu div, .tokenDropdownList div {
  background: linear-gradient(180deg,#4c0000 0%,#220000 100%);
  border-radius: 30px;
  padding: 3px;
  border: 2px solid #660000;
  box-shadow: 0 0 10px rgba(255,80,0,.25);
}
#menu div div, .tokenDropdownList div div {
  background: linear-gradient(180deg,#5a4000 0%,#2e2100 100%);
  border: 2px solid #ffcf60;
  box-shadow: inset 0 0 10px rgba(255,200,0,.2);
}
#menu div:hover div, .tokenDropdownList div:hover div {
  box-shadow: 0 0 12px rgba(255,200,80,.6), inset 0 0 8px rgba(255,240,160,.2);
}

#menu div, .tokenDropdownList div {
  background: linear-gradient(180deg, #f4e1a2, #691300);
  border-radius:20px;
  border:3px solid #6e3c00;
  box-shadow: inset 0 3px 4px rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.6);
}
#menu div div, .tokenDropdownList div div {
  background: radial-gradient(circle at 50% 30%,#fff8c8 0%,#e3b64d 80%);
  border:2px solid #7a4800;
}


#menu ul li, .tokenDropdownList li {
	list-style:none;
	text-decoration:none;
    padding: 2px 8px;
}
.mainMEnu{
    padding: 0;
    margin: 0;
}


/* use .newMedievalBrownButton for buttons*/
.cinzelMedievalBox{
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #2b1600, #120700);
    border: 2px solid #b77b1d;
    border-radius: 8px;
    padding: 20px;
    z-index: 999999;
    color: #ffd97a;
    font-family: 'Cinzel', serif;
    box-shadow: 0 0 20px rgba(0,0,0,0.75);
    min-width: 320px;
    text-align: center;
}
#committAmountSliderWrap{
    width: 220px;
    height: 16px;
    background: rgb(51, 51, 51);
    border-radius: 8px;
    display: inline-block;
    
}
#committAmountSlider{
    height: 15px;
    position: relative;
    width: 25%;
    box-shadow: rgba(255, 217, 102, 0.8) 0px 0px 8px;
    background: linear-gradient(90deg, rgb(255, 217, 102), rgb(255, 159, 28));
    
    border-radius: 6px;
}
.sliderHandle{
   position: absolute;
    top: 50%;
    right: 0;
    border: 1px solid;
    background: #e36227;
    width: 15px;
    height: 22px;
    border-radius: 30%;
    transform: translate(50%, -50%);
    cursor: pointer;
}
/* === PFP BUILDER === */
.pfp-builder {
  display: grid;
  grid-template-columns: 1fr 512px;
  gap: 1rem;
  align-items: flex-start;
  color: #ffd966;
  font-family: 'Cinzel', serif;
}

.pfp-toolbar {
  background: rgba(27, 17, 10, 0.95);
  border: 1px solid #5b3a1b;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(255, 217, 102, 0.1);
}

.pfp-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #1c1208 0%, #0a0603 100%);
  border: 1px solid #5b3a1b;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: inset 0 0 12px rgba(255, 217, 102, 0.15);
}

#pfpCanvas {
  width: 100%;
  height: auto;
  max-width: 512px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(255, 217, 102, 0.25);
  background: #1a1a1a;
}

/* === Tabs === */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab {
  flex: 1;
  text-align: center;
  background: #3b2815;
  border: 1px solid #7b541d;
  border-radius: 10px;
  color: #ffd966;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(255, 217, 102, 0.3);
  transition: background 0.2s, transform 0.1s;
}

.tab:hover {
  background: #5b3a1b;
  transform: scale(1.03);
}

.tab.active {
  background: #7b541d;
  border-color: #e7b35a;
}

/* === Panels === */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* === Controls === */
.controls .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.controls label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.controls input[type="file"] {
  color: #ffd966;
}

.controls input[type="range"] {
  width: 160px;
  accent-color: #e7b35a;
}
.pfp-builder .row{
    filter: drop-shadow(1px 1px 0px #444444);
}
.controls input[type="color"] {
  border: 1px solid #5b3a1b;
  background: transparent;
  width: 40px;
  height: 30px;
  border-radius: 8px;
}

.ml {
  margin-left: 0.6rem;
}

.primary {
  background: linear-gradient(180deg, #7b531f, #5b3a1b);
  border: 1px solid #e7b35a;
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 217, 102, 0.2);
  transition: transform 0.1s, background 0.2s;
}

.primary:hover {
  background: linear-gradient(180deg, #9b6a29, #6b421f);
  transform: scale(1.04);
}

.mini {
  background: #3b2815;
  border: 1px solid #7b541d;
  color: #ffd966;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}
.mini:hover {
  background: #5b3a1b;
}

/* === Gallery === */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.4rem;
  max-height: 260px;
  overflow-y: auto;
  background: #140d08;
  border: 1px solid #5b3a1b;
  padding: 0.5rem;
  border-radius: 10px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #4a2b13;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 217, 102, 0.4);
}

/* === Hint === */
.hint {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-left: 0.6rem;
}

/* === Responsive === */
@media (max-width: 1100px) {
  .pfp-builder {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .pfp-stage {
    order: -1;
  }
}

.navNotHidden{display:block;}
.lpBal:hover, .lpBal:active{
	text-shadow: 1px 1px 1px gold;
}
.lpBal{
	padding: 0.25em 0;
    text-shadow: 1px 1px 1px #927b01bf;
}
.boosterBadge:hover, .boosterBadge:active{
	text-shadow: 1px 1px 1px gold;
}
.smallLogoBadge:hover{
	background: #8c7039;box-shadow: 1px 1px 3px 1px;
}
.smallLogoBadge{
	width: 20px;
    height: 20px;
    position: relative;
    top: 1px;
    background: #b69e70;
    box-shadow: 1px 1px 2px 1px;
	border: 1px solid gold;
	border-radius: 2px;
}
.boosterBadge{
	padding: 0.25em;
    text-shadow: 1px 1px 1px #927b01bf;
}
#menuList li a{
	font-size: 2em;
    padding: 0.25em 0;
    margin: 0 0.2em;
}
    
.menuHamb ul li:hover{
    background: black;
}
.menuHamb ul li{
    border-bottom: 1px solid #d1b45e;
    cursor: pointer;
}
.menuHamb{
    display: list-item;
	position: relative;
    left: 0;
	margin: 0.5em 0;
	padding: 0 0.75em 0 0;
    text-align: left;
}
.menuSwitch{
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
	
}
.smallLogoNEw{
	width: 15px;
    height: 15px;
	position: relative;
	top: 0px;
    left: 2px;
}
.smallLogoNEw2{
	width: 15px;
    height: 15px;
	position: relative;
	top: 3px;
    left: 2px;
}
#connectOptions div{
    display: block;
    width: max-content;
    /* background: #2b2b2b; */
    padding: 1em;
    border-radius: 9px;
    margin: 25px auto;
    cursor: pointer;
    transition: min-width 1s ease;
    min-width: 25%;
    font-variant-caps: all-petite-caps;
    font-weight: 600;
    letter-spacing: 1px;
}
#connectOptions{
	position: fixed;
    top: 4.2em;
    right: 0%;
    width: 99.5%;
    border-radius: 3px;
    background: #011b30;
    display: none;
    border: 2px ridge beige;
    padding: 0em;
    z-index: 100;
    height: max-content;
	transition: max-height 1s ease;
    max-height: 79vh;
}
#mintInfoProjectContractLink:hover{
	text-shadow: 1px 1px 2px black;
}
.smallLogoBitBigger{
	width: 28px;
    height: 28px;
	position: relative;
    top: 8px;
}
.smallLogo{
	width: 20px;
    height: 20px;
	position: relative;
    top: 3px;
}
.smallLogo23{
    height: 1em;
    height: 1em;
	position: relative;
}
.smallLogo2{
	width: 1em;
    height: 1em;
	position: relative;
    top: 3px;
	background: gold;
    border-radius: 3px;
}
.smallLogo3{
	width: 20px;
    height: 19px;
	position: relative;
	display:inline-block;
	background: gold;
    border-radius: 4px;
	box-shadow: 1px 1px 1px 1px black;
}
.smallLogo3Holder{
	position: absolute;
    top: 2px;
    left: 4px;
}
.hypeBal{
	top: 0.5em;
    position: relative;
}
.navigations ul a div {
	width: 20%;
    height: 3em;
	display:inline-block;
	cursor:pointer;
}
.navigations ul{
	margin: 0;
    padding: 0;
}

.connectButton{
	background-size: 100% 100%;
   /* background-image: url(progBar0.webp);*/
    width: fit-content;
    padding: 1.125em;
    margin: 0;
	cursor:pointer;
    display: inline-block;
	    float: right;
}

.holdingHypeBal2{
	display:inline-block;
	float: left;
	padding-right: 0.25em;
}
.holdingHypeBal{
	display:inline-block;
	float: right;
	padding-right: 0.25em;
}
.imgInNewTokens{
    width: 20px;
    height: 20px !important;
    position: relative;
    top: 3px;
}
.alsoPriceWrap{
    left: 0;
    right: 0;
    position: absolute;
    height: 1.8em;
    transform: translateY(3px);
}
.newTokens{
    background: #312f2f;
    padding: 12px;
    border: 1px solid #eba326;
    border-radius: 10px;
    margin: 0 3px;
    box-shadow: 0px 1px 2px wheat;
    box-shadow: 0px 1px 2px #ffa600;
}
#holdBalance{
	background-size: 100% 100%;
    width: fit-content;
    /* background-image: url(progBar0.webp); */
    display: inline-block;
    padding: 4px 5px;
    float: right;
	font-size:2.25em;
}
#holdBalance2{
	background-size: 100% 100%;
    width: fit-content;
    /* background-image: url(progBar0.webp); */
    display: inline-block;
    padding: 4px 5px;
    float: left;
	font-size:2.25em;
}
#viewMoreBzzInfo{padding-left:6.5em;}
.HYPEbal2:hover, .HYPEbal2:active{
	text-shadow: 1px 1px 1px black;
}
.HYPEbal2{
	background: #44210487;
    color: #cfcfcf;
    padding: 0.25em;
    border-radius: 32%;
    border: 1px solid;
    border-radius: 6px;
    padding-right: 12px;
    padding-left: 6px;
	text-shadow: 1px 1px 1px #000000e8;
	margin: 2px;
}
#totInICO{
	background: #000000;
    color: #cfcfcf;
    padding: 0.25em;
   border: 1px solid #83fdfb;
    border-radius: 12px;
    padding-right: 12px;
    width: fit-content;
    padding-bottom: 7px;
    padding-left: 12px;
    margin: 0.25em auto;
}
#totInFarm, #totInFarm2{
	background: #000000;
    color: #cfcfcf;
    padding: 0.25em;
   border: 1px solid #83fdfb;
    border-radius: 12px;
    padding-right: 12px;
    width: fit-content;
    padding-bottom: 7px;
    padding-left: 12px;
    margin: 0.25em auto;
}
.navHidden{display:none;}
#loader, #welcomeBox{
	display: none;
    position: fixed;
    top: 8vh;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000c4;
    z-index: 1;
	
}
.frameWork a:hover{
	text-decoration:underline;
}

.bigButtonsIsh{
    max-width: 90%;
    display: block;
    border: 4px solid #272727;
    text-align: center;
    margin: 0 auto;
    border-radius: 57px;
}

.bigButtonsIsh2:hover, .bigButtonsIsh2:active{
	border: 4px solid #000;
}
.bigButtonsIsh2{
	max-height: 33vh;
    border-radius: 28px;
}
#game{
	display:none;
	opacity:0;
	transition:opacity 4.2s ease-in;
}
.squareCount{
    width: max-content;
    fill: wheat;
    color: black;
    padding: 0px 4px 0px;
    font-family: anton;
    font-size: 1em;
    background: wheat;
    text-shadow: none;
    top: 0;
    border: 2px ridge #ad9262;
    border-left: 2px groove #ad9262;
    border-top: 2px groove #ad9262;
    right: 0px;
    border-radius: 0px;
}
.miniCardViewer div div{
    display: block;
}
.iconsGame{
    width: 30px;
    height: 30px;
}
.iconWrap{
    padding: 5px;
    border: 1px black solid;
    DISPLAY: inline-block;
    box-shadow: 0px 1px 0px 2px black;
    background: #b00d0d;
    border-radius: 5px;
    margin: 0 auto;
    transition: all 1s ease;

}
.iconWrap:hover, .iconWrapBlock:hover{
    background: #0490b0;
}
.iconWrapBlock{
    box-shadow: 0px 1px 0px 2px black;
    background: #12b9df;
    border-radius: 5px;
    padding: 5px;
    border: 1px black solid;
    width: 2.2em;
    margin: 0 auto;
    cursor: pointer;
    transition: all 1s ease;
}
#cardPopUp{
    position: relative;
    display: none;
    opacity: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid;
    margin: 0 auto;
    background: #f5deb3ab;
    color: black;
    border-radius: 5px;
    z-index: 2;
    height: -webkit-fill-available;
    transition: all 1s;
}
#confirmChoice, #regretChoice{
    cursor: pointer;
    position: relative;
    bottom: 1.1em;
}
#leftAr{
    transform: rotateY(180deg);
}
.midIcon{
    height: 4.2em;
    width: 4.2em;
    display: block;
    margin: 1em 1em 0;
    color: #001435;
    filter: drop-shadow(0px 0px 3px #aa0707);
}
.morphHeader{
    font-size: 18px;
    color: #fffcfc;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-shadow: 0px 0px 5px rgb(14 14 14 / 80%);
    position: absolute;
    left: 0;
    right: 0;
    top: 1em;
}
.boxesInfo2 .miniCardViewer{
    display: inline-block;
    max-width: 250px;
    transform: scale3d(1, 1, 1);
    scale: 1;
    transform-origin: top left;
    transition: all 1s ease;
}
.boxesInfo2 .paperinfoFront{
    transform: translateY(-8px);
    max-height: 6.25em;
}
.flexWrapperSbc{
    display: block;
    left: 0;
    flex-direction: column;
    width: auto;
}
.flexOrOther{
    display: contents;
}
.boxesInfo2 .paperinfoFront .imgIn3.abilityToUpdate, .boxesInfo2 .paperinfoFront .imgIn3.merger,  .boxesInfo2 .paperinfoFront .abilityNameSection,.boxesInfo2 .paperinfoFront .weakness{
    transform: translateY(16px);
}
.boxesInfo2 .paperinfoFront .abilityInfoSection{
    transform: translateY(-22px) translateX(1px) !important;
}
.boxesInfo2 .miniCardViewer .playerIconsWrap.displayCard{
    height: 320px !important;
}
.wrapSbc .miniCardViewer .playerIconsWrap.displayCard{
    height: 320px !important;
}
.wrapSbc{
    width: 14em;
    margin: 0 auto;
    display: inline-block;
    height: 14em;
    position: relative;
}
.boxesInfo2 .abilityToUpdate{
    /*bottom: 0.975em !important;*/
}

.miniCardViewer{
    display: inline-block ;
    max-width: 235px;
    transform: scale3d(1.5, 1.25, 0.5);
    scale:0.5;
    transform-origin: top left;
    transition: scale 1s ease;
}
.wrapSbc .miniCardViewer{
    display: inline-block ;
    max-width: 235px;
    transform: scale3d(1.5, 1.25, 0.5);
    scale:1;
    zoom:0.5;
    transform-origin: top left;
    transition: scale 1s ease;
}
.miniCardViewer .abilityToUpdate{
    bottom: 1.975em !important;
}
.onBoardCardViewer{
    display: inline-block;
    /* max-width: 235px; */
    transform: translate(-7px, -17px);
    scale: 0.292 0.26;
    transform-origin: top left;
    transition: scale 1s ease;
}
.microCardViewer{
    display: inline-block;
    max-width: 135px;
    /* max-height: 84px; */
    transform: scale3d(1.4, 1, 0.25);
    scale: 0.25;
    position: absolute;
    top: -200%;
    left: -51%;
}
.vsViewPopup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    border-radius: 15px;
    padding: 40px 30px 30px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 9999; /* Ensure it appears on top of other elements */
}
.vsViewVsIcon{
    font-style: italic;
    opacity: 0.85;
    display: inline-block;
    font-size: 1.5em;
    position: relative;
    right: 2px;
}
.vsViewIcons {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.vsViewIcons img {
    width: 7em;
    height: 8em;
    border: 1px solid black;
    
}
.nameWrapVS{
    display: inline-block;
    position: relative;
    border: 3px double #000000;
    background: wheat;
    height: 8.1em;
}
.nameInsideVS{
    display: block;
    width: 7em;
    position: absolute;
    color: #e7c970;
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: 0.42s ease-in-out;
}
.siteMapEntry:hover, .siteMapEntry:active{
    color: #ffeec3;
    transition: all 0.4s ease;
    cursor: pointer;
}
.poweredByCronos{
    cursor: default !important;
}
.helperMentorMorph{
    position: fixed;
    right: 0;
    z-index: 14;
    bottom: -5px;
}
.helperMentorMorph img{
    width: 10em;
    height: 10em;
}
/* optional styles for a nicer look */
.explore-hex { font-family: "Segoe UI", Roboto, Arial; }
.creature-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.6); }
#exploreOverlay::-webkit-scrollbar { width: 8px; }
/* Wrapper uses your requested classes */
.oracle-modal
 {
  position: fixed;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222 url('images/ui/pokebg.webp') center/cover no-repeat;
  border: 4px solid #fff;
  border-radius: 16px;
  
  color: #fff;
  font-family: "Press Start 2P", monospace;
  text-align: center;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.greenButtonNew{
    border-color: rgb(76, 175, 80);
    background: radial-gradient(circle at center top, rgb(29, 38, 29) 0%, rgb(18, 25, 18) 100%);
    color: #ffd966;
}
.milestoneWrap.popUpWrapperMiniMarket.woodScroller.battle-modal
 {
  position: fixed;
  
  background: #222 url('images/magicArena.webp') center/cover no-repeat;
  border: 4px solid #fff;
  border-radius: 16px;
  
  color: #fff;
  font-family: "Press Start 2P", monospace;
  text-align: center;
  
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
/* Enemy placement (sprite) */
.enemy-img {
  position: absolute;
  top: 155px;
  right: 60px;
  transform: rotateY(180deg);
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

/* Player + companions bottom-left */
.player-area {
  position: absolute;
  bottom: 160px;
  left: 60px;
  display: flex;
  
  align-items: center;
  gap: 10px;
}

.player-img {
  width: 128px;
  height: 128px;
  border-radius: 8px;
  border: 3px solid #fff;
  background: #111;
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.stat-value {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: rgba(0,0,0,0.8);
  color: #ffeb3b;
  font-size: 20px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px solid #fff;
  font-family: "Press Start 2P", monospace;
  pointer-events: none;
}

.companions {
  display: flex;
  gap: 10px;
}

.companion-img {
  width: 60px;
  height: auto;
  border-radius: 6px;
  border: 2px solid #ddd;
  background: #000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Status boxes with HP bars */
.status-box {
  background: #000;
  border: 3px solid #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: "Press Start 2P", monospace;
  color: #fff;
  width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ✅ Enemy status should sit NEAR ENEMY sprite (top-right) */
.enemy-status {
  position: absolute;
  top: 100px;
  right: 40px;   /* was left before, fix */
}

/* ✅ Player status should sit NEAR PLAYER sprite (bottom-left) */
.player-status {
  position: absolute;
    bottom: 90px;
    left: 60px;
    width: 320px;
}

/* Header layout */
.status-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.status-name {
  font-weight: bold;
  color: #4cafef;
  text-shadow: 1px 1px 0 #000;
}

.status-hp {
  color: #ffeb3b;
}

/* HP bar */
.hp-bar {
  width: 100%;
  height: 12px;
  background: #333;
  border: 2px solid #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  transition: width 0.3s ease;
}
/* Action buttons container */
.action-buttons {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* Modern polished battle buttons */
.battle-btn {
  min-width: 140px;
  padding: 14px 22px;

  border: none;
  border-radius: 10px;

  background: linear-gradient(135deg, #ff4d4d, #d60000);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: "Press Start 2P", monospace;

  cursor: pointer;
  transition: all 0.2s ease, transform 0.1s ease;

  box-shadow: 0 4px 10px rgba(0,0,0,0.4), 
              inset 0 -3px 0 rgba(0,0,0,0.3);
}

/* Hover effect */
.battle-btn:hover {
  background: linear-gradient(135deg, #ff6666, #e60000);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 
              inset 0 -3px 0 rgba(0,0,0,0.3);
}

/* Active (clicked) effect */
.battle-btn:active {
  transform: translateY(1px) scale(0.98);
  background: linear-gradient(135deg, #cc0000, #990000);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 
              inset 0 2px 4px rgba(0,0,0,0.5);
}




.mentor-morph-bubble {
       position: absolute;
    bottom: 50%;
    /* right: 0px; */
    width: max-content;
    right: 62%;
    background: wheat;
    color: #141212;
    border: 2px solid #333;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85em;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    max-width: 180px;
    z-index: 1000;
    white-space: normal;
    line-height: 1.2;
    text-shadow: 0 0 BLACK;
  }
  .kitsuCloseButton{
       width: 2em !important;
    height: 2em !important;
    position: absolute;
    cursor: pointer;
    /* left: 0; */
    right: 4em;
    /* top: auto; */
    bottom: 5px;
  }
  
  .mentor-morph-bubble::after {
    content: "";
    position: absolute;
    bottom: -4px;/*alternate - full card with starts at right 0*/
    bottom: -5px;
    right: 0px;
    width: 0;
    transform: rotate(-24.5deg);
    height: 0;
    border: 10px solid transparent;
    border-top-color: #f5deb3;
    border-bottom: 0;
    margin-left: -5px;
    filter: drop-shadow(1px 1px 0 #000);
  }
.footerPlayersOnline{
    color: #c9b37a;
    position: absolute;
    text-align: left;
    top: 10px;
    left: 20px;
    
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.7);
    letter-spacing: 0.5px;
}
.card-button .microCardViewer, .card-button2 .microCardViewer{
    display: inline-block;
    max-width: 135px;
    max-height: 84px;
    transform: none;
    scale: 1.1 1;
    position: absolute;
    zoom: 0.235;
    top: 0;
    left: 3%;
}
.redButton{
    padding: 1em;
    DISPLAY: INLINE-BLOCK;
    color: gold;
    background: #aa0707;
    border-radius: 5px;
    box-shadow: 1px 1px 1px black;
}
#gameChatContainer ul {
  list-style-type: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}
.paperinfoFront{
    max-height: 5.25em;
    background: url(images/paper.webp);
    background-size: 100% 100%;
    transform: translateY(-41px);
}
.gameHolder{
    transition: opacity 1s;
    position: absolute;
    top: 18px;
    z-index: 100;
    left: 0;
    display: none;
    width: 223px;
}
#messageInput{
    border: 4px double #411e12;
    box-shadow: 0px 0px 0px 3px #ad9262;
    background: #ad9162;
    outline: 2px solid black;
    box-shadow: 0px 0px 0px 3px #411e12;
    outline: 1px solid #ad9262;
}
.sendButtonArrow{
    width: 26px;
    height: 26px;
    box-shadow: 0px 0px 0px 3px #ad9262;
    outline: 2px solid black;
    background: wheat;
    top: 9px;
    position: relative;
    left: 11px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 3px #411e12;
    outline: 1px solid #ad9262;
    transition: all 0.4s ease;
}

.tabsChat {
    position: absolute;
    top: -18px;
    left: 0;
    display: flex;
    border-bottom: 2px solid #411e12; /* Separator line for tabs */
}

/* Individual Tabs */
.tabsChat .tab {
    background-color: #c69c6d;
    padding: 0px 7px;
    margin-right: 0px;
    border: 2px solid #411e12;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #4e342e;
    text-transform: uppercase;
}

/* Active Tab */
.tabsChat .tab.active {
    background-color: #f5deb3; /* Highlight active tab */
    color: #6a4f2a;
}
.bribeHandButton:hover, #messageInput:hover, .sendButtonArrow:hover{
    background: #d8b16c;
    box-shadow: 0px 0px 0px 4px #2a120a;
}
.bribeHandButton:active, .sendButtonArrow:active, .btnInGameList:active{
    scale: 0.9;
}
.iconNftThings img{
    width: 1em;
    top: 3px;
    position: relative;
    height: 1em;
    border: 1px solid wheat;
}
.winHeader{
    margin-bottom: 20px;
    font-size: 28px;
    color: #d8cca6;
    text-decoration: none;
    position: relative;
    text-transform: uppercase;
    font-family: anton;
    letter-spacing: 0.03em;
    height: 0;
    bottom: 19px;
    text-shadow: 1px 2px black;
}
.bribeHandButton{
    position: absolute;
    top: -16px;
    right: -1.8em;
    width: 26px;
    transition: all 0.4s;
    height: 26px;
    box-shadow: 0px 0px 0px 2px #411e12;
    box-shadow: 1px 0px 0px 4px #41210a;
    outline: 1px solid #ad9262;
    background: wheat;
    /* filter: drop-shadow(1px 2px 0px black); */
    cursor: pointer;
}
.btnInGameList{
    border-radius: 5px;
    padding: 4px 8px;
    margin: 0 3px;
    border: 1px solid #411e12;
    box-shadow: 1px 1px 1px black;
    background: #1dd81d;
}
.btnInGameList:hover{
    cursor: pointer;
    background: #11b611;
}
#acceptOfferButton{
    background: #d32b2b;
}

#acceptOfferButton:hover{
    cursor: pointer;
    background: #b61111;
}
#gameChatContainer {
	max-height: 72px;
    overflow-y: auto;
    border: 3px dotted #786033;
    background: #ad9262;
    color: #d8cca6;
    opacity: 1;
    font-family: anton;
    transition: all 0.4s ease;
    text-shadow: -1px -1px 0 #403838, 0 -1px 0 #403838, 1px -1px 0 #403838, 1px 0 0 #403838, 1px 1px 0 #403838, 0 1px 0 #403838, -1px 1px 0 #403838, -1px 0 0 #403838;
    border: 4px double #411e12;
    box-shadow: 0px -10px 15px 1px #a75726;
}
.writingField{
    position: absolute;
    bottom: -1.8em;
    /* margin: 0px 0 0px -13px; */
    filter: drop-shadow(2px 2px 0px black);
}
.gameButtonHolder{
	max-width: 49%;
    position: absolute;
    bottom: 1%;
    z-index: 1;
    right: 1.5%;
	display:none;
}

.noColor{
	text-decoration:none;	
}
.whiteIt{
	color:#cfcfcf;
}
#playerImage{
	cursor:pointer;
}
#maxSup{display: none;}
.imageList li:hover{
	
	background-color: #151515;
}
.imageList li{
	display: block;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0px 1px 0px #002839;
    padding: 6px 0px;
    border-bottom: 1px solid wheat;
    margin: 0;
}
.imageList {
    text-shadow: 1px 1px black;
    background-color: #003d57;
    border: 3px ridge wheat;
    padding: 0px;
    border-radius: 8px;
    list-style: none;
    z-index: 1;
    margin: 0.5em 0 1em;
}
.divBlueBoxes{
    width: max-content;
    overflow-y: auto;
    max-height: 76vh;
    padding: 0;
    transition: height 1s ease;
    background: #003143e0;
    overflow-y: auto;
    margin: 0 auto;
    padding: 0.5em 1em 1em;
    box-shadow: 0px 2px 4px 4px #164761 inset;
    border: 2px solid wheat;
    border-radius: 6px;

}

.blackAreas, .blackAreasThanksgiving, .blackAreasChristmas, .blackAreasValentinesDay, .blackAreasNationalVideoGameDay, .blackAreasIndieGameDay, .blackAreasIndependenceDay, .blackAreasNewYearsDay{
    width: -webkit-fill-available;
    transition: height 1s ease;
    background: #000000e0;
    margin: 0 auto;
    color: wheat;
    font-family: anton;
    font-size: 35px;
    text-align: center;
    text-shadow: 0 0 17px #ffee9abc;
    text-transform: uppercase;
    padding: 0.5em 0em;

}
.blackAreasEaster{
    width: -webkit-fill-available;
    transition: height 1s ease;
    background: #000000e0;
    margin: 0 auto;
    color: #4f4f4f;
    font-family: anton;
    font-size: 35px;
    text-align: center;
    text-shadow: 0 0 17px #ffce00;
    text-transform: uppercase;
    padding: 0.5em 0em;

}
.blackAreasStPatricksDay{
    width: -webkit-fill-available;
    transition: height 1s ease;
    background: #000000e0;
    margin: 0 auto;
    color: #555453;
    font-family: anton;
    font-size: 35px;
    text-align: center;
    text-shadow: 0 0 17px #00ff5d;
    text-transform: uppercase;
    padding: 0.5em 0em;
}
.blackAreasHalloween{
    width: -webkit-fill-available;
    transition: height 1s ease;
    background: #000000e0;
    margin: 0 auto;
    color: #555453;
    font-family: anton;
    font-size: 35px;
    text-align: center;
    text-shadow: 0 0 17px #dcff00;
    text-transform: uppercase;
    padding: 0.5em 0em;

}
.semiBlackAreas{
    background: linear-gradient(0deg, #0000005e 14%, rgb(0 0 0 / 0%) 105%, #000000 85%);
    
}
.underHeader{
    display: block;
    color: #ffdc73;
    text-align: center;
    /* font-family: OpenSans; */
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
}
.blackAreas div, .blackAreasEaster div, .blackAreasThanksgiving div,  .blackAreasChristmas div, .blackAreasValentinesDay div, .blackAreasStPatricksDay div, .blackAreasHalloween div, .blackAreasIndieGameDay div, .blackAreasNationalVideoGameDay div, .blackAreasNewYearsDay div, .blackAreasIndependenceDay div{
    position: relative;
    z-index: 1;
}

.blackAreas div:before, .blackAreasChristmas div:before, .blackAreasValentinesDay div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, rgb(238 0 34 / 80%) 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}
.blackAreasHalloween div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, #fea600 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}
.blackAreasStPatricksDay div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, #22fe00 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}
.blackAreasNationalVideoGameDay div:before, .blackAreasIndieGameDay div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, #9800fe 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}
.blackAreasIndependenceDay div:before, .blackAreasNewYearsDay div:before, .blackAreasThanksgiving div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, #0009fe 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}
.blackAreasEaster div:before{
    background: linear-gradient(90deg, rgba(126, 124, 77, 0) 15%, #fefa00 50%, rgba(126, 124, 77, 0) 85%);
    content: '';
    display: block;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: -1;
}

.leaderboardsHead{
    position: relative;
    z-index: 2;
}
.leaderboardsTab{
    padding: 0.25em 1em;
    text-transform: uppercase;
    color: snow;
    text-shadow: 1px 1px 1px black;
    border: 2px solid wheat;
    border-bottom: 2px solid wheat;
    position: relative;
    bottom: 3px;
    background: #1a638d;
    cursor:pointer;
}
/*
for active tabs in leaderboardsTab:
    border-bottom: 2px solid transparent;
    background: #0c4a6d;
    color: wheat;

*/
.leaderBoardHeader{
    font-size: 2em;
}
.leaderboardsWrap{
    border:2px solid #78360700;
    padding: 0;
    background: #1a638d;
    text-transform: uppercase;
    width: -webkit-fill-available;
    min-height: 2em;
    background: url(images/skins/backgrounds/woodFrame.webp) 0% 0% / 100% 100%;
}
.playerCountryInLeaderboards{
    font-size: 0.75em;
    display: block;
    margin: 0 auto;
    text-align: left;
    width: fit-content;
    padding: 0 !important;
    position: relative;
    bottom: 5px;
}
.leaderboardsWrap span{
    color:wheat;
    border-color:#783607;
    text-shadow: 1px 1px 1px black;
    font-family: anton;
    padding: 0 8px;

}
.lbIcon{
    height: 22px;
    border-radius: 50%;
    position: relative;
    top: 5px;
}
.guildIcon{
    border-radius: 50%;
    /* width: 15px; */
    /* height: 15px !important; */
    position: relative;
    top: -3px;
}
.leaderboardsRank{
   position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 2em;
    border-right: 2px solid;
}
.leaderboardsPlayer{
    display: inline-block;

}
.leaderboardsWins{
    position: relative;
    border-left: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tournamentTarget{

}
.iconMedium{
    height: 5.2em;
    width: auto;
    display: block;
    margin: 0em auto 1em;
    color: #001435;
    filter: drop-shadow(0px 0px 2px #001435);
}
.tournamentWrap{
    border: 2px solid wheat;
    padding: 1em;
    background: #0c4a6d;
    text-transform: uppercase;
    max-width: 50%;
    border-radius: 5px;
    margin: 0 auto;
    transition: all 1s ease;
}
#leaderBoardTarget {
    display: flex;
    border-radius: 1px;
    flex-direction: column; /* Stack items vertically */
    background: linear-gradient(291deg, rgb(28 36 10), rgb(15 46 3 / 86%), rgb(28 36 10)) 0% 0% / 100% 100%;
}
.holdingAreaTokenIconsBig{
    padding-top: 1em;
}
.buttonsCard{
    border-radius: 6px;
    border: 1px solid #5d3d19;
    border:1px solid #f4d1aa;
    padding:6px 12px;
    background: linear-gradient(0deg, rgb(4 104 98), #0f7778, rgb(2 145 130));
    background: linear-gradient(0deg, rgb(4 44 104), #0c55c2, rgb(2 112 145));
    background: linear-gradient(0deg, rgb(104 50 4), #c2600c, rgb(145 52 2));
    cursor: pointer;
    text-shadow: 1px 1px black;
    font-weight: bold;
    box-shadow: 0px 0px 3px 3px inset #0d68a98a;
    box-shadow: 0px 0px 3px 3px inset #68450e8a;
    color: #eedeaf;
    font-size: 18px;
}
.nftCardCommunityWrap{
       box-shadow: 0px 0px 6px wheat;
    margin: 6px;
    display: inline-block !important;
    background: none;
    border-radius: 6px;
}
.nftCardCommunity{
   display: inline-block !important;
    border-radius: 6px;
    width: 10em;
    
    background: linear-gradient(0deg, #e56868, #e0960b, black, #bd9a5a, wheat);/*Rusty*/
    background: linear-gradient(0deg, #68d6e5, #0b88e0, black, #5a85bd, #00e7be);/*Blue Cyan*/
    background: linear-gradient(0deg, #001b1f, #0b88e0, black, #5a85bd, #00e7be);
    background: linear-gradient(0deg, #001b1f, #0be0ca4f, black, #5abd92, #00c3e7);
    position: relative;
    height: 12em;
   border: 2px solid #5d3d19;
   border: 2px solid #ffdc73;
    box-shadow: 0px 0px 56px 5px inset #00ffa38a;
    box-shadow: 0px 0px 56px 5px inset #0000008a;
}
.nftCardCommunity .nameComCard{
    width: 100%;
    position: relative;
    top: 1em;
    font-family: fantasy;
    text-shadow: 1px 2px black;
    text-transform: uppercase;
    color: #e8e8e8;
    font-family: anton;
    letter-spacing: 0.03em;
    font-style: italic;
}
#leaderBoardTarget div:hover{
    background: rgb(0 0 0 / 40%);
}
#leaderBoardTarget div {
    display: flex; /* Use flexbox for children */
    justify-content: space-between; /* Space out the content */
    box-sizing: border-box; /* Include padding in width calculations */
}

.leaderboardsRank,
.leaderboardsPlayer,
.leaderboardsWins {
    flex: 1; /* Each element takes equal space */
    text-align: left;
}

.blueGradientButtons{
    width: max-content;
    overflow-y: auto;
    padding: 0;
    transition: height 1s ease;
    background: linear-gradient(180deg,#b7f1ff 0,#00bbff 16%,#000465 82%,#0086ff 100%);
    font-family: nanami-bold;
    overflow-y: auto;
    margin: 0 auto;
    padding: 0.5em 1em 0.5em;
    box-shadow: 0px 2px 4px 4px #006ea8 inset;
    border: 2px solid wheat;
    border-radius: 6px;
    transition: transform .2s ease-out;
    color: #fff7b9;
    font-family: nanami-bold;
    font-size: 26px;
    text-shadow: 0 0 8px #e0e0e0;
    text-transform: uppercase;
}
.blueGradientButtons:hover, .blueGradientButtons:active{
    background: linear-gradient(180deg,rgb(173 197 209) 0,rgb(4 98 173) 100%);
    transform: scale(1.05);
    color: wheat;
    text-shadow: 1px 1px 1px black;
    cursor:pointer;
}
.miniBoxes{
    background: orange;
    padding: 4px;
    border-radius: 3px;
    color: black;
    box-shadow: 0 0 1px 1px;
    border: 1px solid black;
    font-size: 0.5em;
}
.mintBoxes:hover, .mintBoxes:active{
    background: linear-gradient(180deg, rgb(21 0 157) 0, rgb(4 163 173) 100%);
    transform: scale(1.05);
    color: wheat;
    text-shadow: 1px 1px 1px black;
    cursor:pointer;
}

.mintBoxes{
    padding: 17px;
    border-radius: 3px;
    color: black;
    /* box-shadow: 0 0 1px 1px #ff9900; */
    /* border: 1px solid black; */
    cursor: pointer;
    margin: 2em auto 0;
    font-size: 0.5em;
    filter: drop-shadow(2px 4px 6px black);
}
.alsoMintBox{
    border: 4px #5b1204 solid;
    border-top: 4px #811d0a solid;
    border-bottom: 4px #811d0a solid;
    text-transform: lowercase;
}
.numberOnIcon{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.numberOnMana{
    position: absolute;
    left: 0;
    bottom: 42%;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}
.imagesFrontSmall{
    height: 2em;
    width: auto;
}
.centeredInImage{
    font-family: anton;
    font-size: 1.5em;
    z-index: 1;
    transition: all 0.3s;
}
.centeredInImage:hover{
    transform: translateY(3%);
}
.centeredInImage:active{
    transform: scale(0.95);
}
.redDarkShadow{
    text-shadow: 1px 1px 1px red, -1px 1px 1px #690000, 1px -1px 1px red, -1px -1px 1px maroon;
}
.wrapName{
    background-image: url(images/frameMetalAndPaper.webp);
    background-size: 100% 100%;
    color:#3a3a38;
    transition: all 0.3s;
    display: inline-block;
    padding: 0.5em;
    border: 1px solid wheat;
    border-radius: 5px;
    box-shadow: 0px 0px 2px 2px #000000a1;
}
.wrapName:hover{
    color:#000000;
    cursor: pointer;
    border: 1px solid rgb(155, 133, 93);
}
.centerImageInImage{
    position: absolute;
    top: 15%;
    font-size: 2em;
    z-index: 1;
    left: 25%;
    right: 25%;
}
.claimWrap{
    display: block;
    position: relative;
    text-align: right;
    margin: 2px 0.5em;
    border: 1px solid black;
    padding: 4px 6px 6px;
    background: #323232c7 !important;
}
.claimWrap:hover{
    background: #242424c7 !important;
}
.wrapwrap{
    display: block;
    padding: 1em 0;
    background: #25252596;
    border-top: 1px solid wheat;
    margin: 23px auto 0;

}
.darkGlowingWrappers img.square {
    border-radius: 5px;
    box-shadow: 0px 0px 1px 1px brown;
    border: 1px solid wheat;
    width: min-content;
    height: -webkit-fill-available;
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
}
.orangeBrightH2 {
    margin: 0 auto;
    display: inline-block;
    font-size: 2em;
    padding: 0.25em;
    border-radius: 5px;
    color: wheat;
    box-shadow: 0px 0px 0px 1px black;
    border-color: rgb(85 66 67);
    text-shadow: -1px -1px 0 #9f2729, 0 -1px 0 #9f2729, 1px -1px 0 #9f2729, 1px 0 0 #9f2729, 1px 1px 0 #9f2729, 0 1px 0 #9f2729, -1px 1px 0 #9f2729, -1px 0 0 #9f2729;
    background: linear-gradient(26deg, rgb(253, 171, 26), rgb(188 103 4));
    transition: all .2s ease-in-out;
    text-align: center;
}
.orangeBrightButtons {
    padding: 0 1em 0.5em !important;
    margin: 0px 0px 5px 3px !important;
    display: inline-block;
    color: wheat;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px black;
    border-color: rgb(85 66 67);
    text-shadow: -1px -1px 0 #9f2729, 0 -1px 0 #9f2729, 1px -1px 0 #9f2729, 1px 0 0 #9f2729, 1px 1px 0 #9f2729, 0 1px 0 #9f2729, -1px 1px 0 #9f2729, -1px 0 0 #9f2729;
    background: linear-gradient(to left, rgb(253, 171, 26), rgb(253, 136, 0));
    transition: all .2s ease-in-out;
}
.goldBadges{
    border-radius: 50%;
    border: 4px ridge gold;
    background: #ffd700bf;
}
.holderWrap{
    cursor: pointer;
}
.playImage{
    width: 188px;
    height: 188px;
    border-radius: 0%;
    border: 1px solid #000000;
    margin: 0;
}
.orangeBrightButtonsNoIcon{
    
    padding: 0.6em 1em 0.5em !important;
    margin: 0px 0px 5px 3px !important;
    display: inline-block;
    color: wheat;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px black;
    border-color: rgb(85 66 67);
    text-shadow: -1px -1px 0 #9f2729, 0 -1px 0 #9f2729, 1px -1px 0 #9f2729, 1px 0 0 #9f2729, 1px 1px 0 #9f2729, 0 1px 0 #9f2729, -1px 1px 0 #9f2729, -1px 0 0 #9f2729;
    background: linear-gradient(to left, rgb(253, 171, 26), rgb(253, 136, 0));
    transition: all .2s ease-in-out;
}
.displayDegen span{
    display: block;
    width: auto;
}
.badgeIcons{
    height: 1.4em;width: 1.4em;top: 0.5em;
		border: 1px solid black;
		border-radius: 4px;
		background: gold;
		box-shadow: 0px 0px 4px 1px #fef8a8;
		position: relative;
		cursor: pointer;
}
.badgeIcons:hover,.badgeIcons:active {
    border: 1px solid gold;
    box-shadow: 0px 0px 4px 1px black;

}
.blueDarkBlueBg{
    cursor: pointer;
    text-shadow: -1px -1px 0 #073179, 0 -1px 0 #420779, 1px -1px 0 #420779, 1px 0 0 #420779, 1px 1px 0 #420779, 0 1px 0 #420779, -1px 1px 0 #420779, -1px 0 0 #420779;
    background: linear-gradient(26deg, rgb(114 26 253), rgb(14 196 226));
}
.blueGreenBg{
    cursor: pointer;
    text-shadow: -1px -1px 0 #0572a2, 0 -1px 0 #0572a2, 1px -1px 0 #0572a2, 1px 0 0 #0572a2, 1px 1px 0 #0572a2, 0 1px 0 #0572a2, -1px 1px 0 #0572a2, -1px 0 0 #0572a2;
    background: linear-gradient(26deg, rgb(4 124 168), rgb(4 130 188));
}

.redYellowBg{cursor: pointer;
    text-shadow: -1px -1px 0 #790707, 0 -1px 0 #790707, 1px -1px 0 #790707, 1px 0 0 #790707, 1px 1px 0 #790707, 0 1px 0 #790707, -1px 1px 0 #790707, -1px 0 0 #790707;
    background: linear-gradient(26deg, rgb(226, 253, 26), rgb(188, 59, 4));
    
}
.darkGlowingWrappers img.icon {
    width: 20px;
    height: 20px !important;
    position: relative;
    top: 5px;
}.darkGlowingWrappers {
    position: relative;
    text-align: right;
    color: wheat;
    min-height: 4.2em;
    margin: 10px 0px;
    border: 1px solid wheat;
    font-size: 0.75em;
}
.iconLeft{
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 9px;
}
.someLeftText{
    float: left;
    margin-left: 53px;
    top: 6px;
    position: relative;
}
.claimButton{
    padding: 12px;
    border-radius: 3px;
    color: black;
    box-shadow: 0 0 1px 1px wheat;
    border: 1px solid black;
    cursor: pointer;
    margin: 0em auto 0;
    font-size: 0.5em;
}
.claimButton2{
    padding: 12px;
    border-radius: 3px;
    color: black;
    box-shadow: 0 0 1px 1px wheat;
    border: 1px solid black;
    cursor: pointer;
    margin: 0em auto 0;
    font-size: 0.5em;
}
@keyframes k-ehkJmT{
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(359deg);
}
}   
.headers{
    padding: 0;
    display: block;
    overflow-y: auto;
    margin: 0em auto 10px;
    color: #ffdc73;
    text-shadow: 1px 1px 1px #000000, 1px 0px 1px #000000, 0px 1px 1px #000000;
}
.spinningImage{
    animation: 10s linear 0s infinite normal none running k-ehkJmT;
}

.imagesFront, .imgFront{
    height: 9.2em;
    display: block;
    border-radius: 8%;
    position: relative;
    /* border: 2px groove gold; */
    margin: 1em auto;
    margin:0em auto;border-radius:0;width:-webkit-fill-available;height:auto;top:32%;
}
.inputInList{
    color: black;
    display: inline-block;
    cursor: text;
    font-size: 0.75em;
    border-radius: 3px;
    border: 2px solid;
    box-shadow: 0px 1px 1px 1px #00283b;
    background: antiquewhite;
    border-radius: 3px;
    border: 2px solid #003d57;
    /* box-shadow: 0px 1px 1px 1px #000; */
    margin: 0.5em auto 8px;
    display: block;
    padding: 0.5em 0.5em 1em 0.5em;
}
#imageInput{
	display:none;
}
#imageContainer {
	position: relative;
	cursor: pointer;
	display:none;
}
.topRightNum{
    display: inline-block;    
    position: absolute;
}
.frontCardNumbers{
    color: palegoldenrod;
    display: inline-block;
    position: absolute;
    right: -6px;
    bottom: 15px;
    BACKGROUND: black;
    font-size: 0.35em;
    border-radius: 50%;
    width: 7px;
    border: 1px solid gold;
    padding: 2px;
    text-align: center;
}
.frontCardDivs:hover{
	box-shadow: 0px 2px 0px 1px #000000b3;
}
.popUpGameInfo{
	display: none; 
    position: fixed;
    top: 9%;
    border-radius: 50%;
    transition: top 0.5s;
    height: 9em;
    width: 9em;
    right: 0%;
    background: beige;
    font-size: 1em;
    z-index: 100;
    color: black;
    border: 3px ridge #693301;
}
.frontCardDivs{
	line-break: anywhere;
    border-radius: 7px;
    padding: 2px 2px 1px 3px;
    margin: 5px 0;
	border-bottom: 2px solid #444242;
    text-align: center;
    position: relative;
    box-shadow: 0px 2px 0px 0px black;
	cursor:pointer;
	border-top: 1px solid;
}
.accName{
    text-align: center;
    margin: 5px auto;
    color: antiquewhite;
    width: fit-content;
    text-shadow: 1px 1px black;
}
.PlayerIfnoSection{
	border-radius: 7px;
	display: block;
    text-align: center;
    margin: 1px auto 6px;
    color: antiquewhite;
    text-shadow: 1px 1px black;
    border: 3px #ffe1ab;
    padding: 3px;
    border-top: 2px #cc5608;
    border-bottom: 2px #ad5000;
    border-style: groove;
}
#newEarnDetailsOwned div div{display:inline-block;position:relative;}
#newEarnDetailsOwned div div img{box-shadow: 1px 1px 1px black;    border-radius: 3px;cursor:pointer;}
#newEarnDetailsOwned div div img:hover{background:#ffd700a8;}
#newEarnDetailsOwned{
	margin:0;padding:0;text-align:center;
}
#newEarnDetails, #newEarnDetailsStaked, #newEarnDetailsBoosters, #newEarnDetailsStaked2, #newEarnDetails, #mintInfoProject{
	margin:0;padding:0;display:none;
}
#newEarnDetailsStaked div:hover, #newEarnDetailsStaked2 div:hover, #newEarnDetailsBoosters div:hover, #newEarnDetails div:hover , #mintInfoProject:hover{
	background:#0000002b;
}
#newEarnDetailsStaked div, #newEarnDetailsStaked2 div, #newEarnDetailsBoosters div, #newEarnDetails div, #mintInfoProject div{
	line-break: anywhere;
	font-size:1em;
    border-radius: 7px;
    padding: 2px 2px 1px 3px;
    margin: 1px;
    border-bottom: 2px solid wheat;
    text-align: right;
	position:relative;
}
#newEarnDetailsStaked, #newEarnDetailsStaked2, #newEarnDetailsBoosters, #newEarnDetails, #mintInfoProject{
	width: 100%;
    margin: 0em 0em 0px -1em;
    outline: auto;
    padding: 0.25em 0.5em 0.5em 0.25em;
}
#newEarnInfo span:hover, #newEarnInfo span:active, #newEarnInfo2 span:hover,  #newEarnInfo2 span:active, #newEarnInfo3 span:hover, #newEarnInfo3 span:active{
	background:#331d03ad;
	color:#ac9311;
	text-shadow: 1px 1px 1px #eee8bb;
}
#newEarnInfo span, #newEarnInfo2 span, #newEarnInfo3 span{
border: 2px ridge wheat;
    border-radius: 3px;
    padding: 3px;
    padding-right: 3px;
    width: 99%;
    padding-left: 0px;
    height: 99%;
    display: inline-block;
    background: #331d0359;
}
.imagesIcons{
	max-width: 3em;
    max-height: 3em;
    height: 2.75em;
	background-size:100% 100%;
}
.iconsGameNew span{
	cursor:pointer;
}
#box1New span:hover{
	background:rgb(0 0 0 / 69%) !important;
}
.iconsGameNew:hover{
    background: #ecd4aaed;
}
.iconsGameNew{
	
	    left: 0;
    position: absolute;
    left: 0;
    left: 0;
    /* bottom: 7%; */
    width: 15%;
    height: 98.25%;
    border: 5px groove #9e7545;
    background: #000000ab !important;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 1.3em;
}
.popUpInfoCard2{
	display: none; 
    position: relative;
    border-radius: 11px;
    transition: width ease 0.69s, top 0.5s;
	max-height: 79vh;
    left: 0;
    /* right: 0.5%; */
    background: url(../../Gallery/images/earnCard.webp);
    font-size: 1em;
    z-index: 30;
    background-size: 100% 100% !important;
    color: black;
    border: 4px groove wheat;
	box-shadow: rgb(11 7 6) 5px 6px 9px 4px;
	
}
#upgradeListOpener, #fertilizeListOpener, #morphsMintListOpener, #morphsMintListOpener2, #mintOptionMorphsToken2, #mintOptionMorphsToken2 ul div, #morphsMintListOpener ul div{cursor:pointer;}
.listsInMain{margin:5px;}
.rootish{
	position: relative;
	z-index: 31;
    display: none;
    left: 0;
    overflow: auto;
    padding: 3em 0px 1em 0;
    right: 0;
    max-height: 79vh;
    min-height: 58vh;
    background: #563b0a;
    border-radius: 11px;
    border: 4px groove wheat;
    box-shadow: rgb(11 7 6) 5px 6px 9px 4px;
    background-image: url(../../Gallery/images/earnCard.webp);
    background-size: 100% 100%;
    transition: width ease 0.69s;
}
.rootishPaperLeaf{
	position: relative;
	z-index: 31;
    display: none;
    left: 0;
    overflow: auto;
    padding: 3em 0px 1em 0;
    right: 0;
    max-height: 79vh;
    border: 4px groove wheat;
    min-height: 58vh;
    border-radius: 11px;
    background-image: url(../../Gallery/images/paperLeaf.webp);
    background-size: 100% 100%;
    transition: width ease 0.69s;
}
.rootishTartarus{
	position: relative;
	z-index: 31;
    display: none;
    left: 0;
    border: 4px groove wheat;
    overflow: auto;
    padding: 3em 0px 1em 0;
    right: 0;
    max-height: 79vh;
    min-height: 58vh;
    border-radius: 11px;
    background-image: url(../../Gallery/images/sacrificialTree.webp);
    background-size: 100% 100%;
    transition: width ease 0.69s;
}
.imgInMintInfo{
	    height: 4.2em;
		display:block;
    border-radius: 50%;
    position: relative;
    border: 2px groove gold;
    margin: 1em auto;
}
#xInRoot:hover, #xInRootNew:hover{
	background: #502c0f;
    color: #ffdc73;
}
.tableThings{
	    display: inline-table;
    background: #00000047;
    color: #cfcfcf;
     text-shadow: none; 
    position: relative;
    border: 2px wheat;
    border-style: dashed;
    padding: 5px;
    width: -webkit-fill-available;
    margin: 0px;
    font-family: 'Sedgwick Ave Display', cursive;
}
.harvestButtons:hover, .harvestButtons:active{
	background: #4e4625;
}
.harvestButtons{
	 
   cursor: pointer;
    background: #00000047;
    color: #cfcfcf;
    text-shadow: none;
    position: relative;
    border: 5px wheat;
    box-shadow: 0px 0px 0px 2px #796c53;
	text-shadow: 1px 1px 1px black;
    border-style: groove;
    padding: 5px;
    width: -webkit-fill-available;
    margin: 10px 20px 0;
}
.badg{
	margin:0 auto 1.25em;
    display: block;
}
#rootNEWHolder, #rootHolder{
	
	webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
#paraInfoWrapper1, #paraInfoWrapper2, #paraInfoWrapper3, #paraInfoWrapper4 {
	width:96%;	
    height: -webkit-fill-available;
    display: inline-flex;
}
#paraInfoWrapper, #paraInfoWrapper1, #paraInfoWrapper2, #paraInfoWrapper3, #paraInfoWrapper4 {
	padding: 0.1em;
    border-radius: 1px;
    border: 4px wheat groove;
    text-shadow: 1px 1px 1px black;
	margin: 1.5em 0px 1.5em;
	}
	#imageAbovegameMenu{
		display:inline-block;
	}
.infoSectionsFaq{
	position: relative;
    background-image: none;
    background: #15131391;
    border-radius: 15px;
    display: inline-block;
    overflow-y: auto;
    margin: 0 auto;
	cursor:default;
    /* border: 1px inset; */
    top: 0;
    padding: 0.25em;
    box-shadow: 1px 7px 12px 4px black;
	font-family:system-ui;
}
.newInfos{
    border-radius: 15px;
    display: inline-block;
    overflow-y: auto;
    border: 2px solid wheat;
    padding: 1.25em;
    box-shadow: 1px 2px 4px 1px black;
}
.littleBlue{
	background: #0000003d;
    border-top: 4px;
    border-bottom: 4px;
    border-style: ridge;
    color: white;
    padding: 0.5em 1em;
	border-color: black;
    margin: 0.75em;
    border-radius: 4px;
	position:relative;
    border-color: white;
    min-height: 15vh;
    text-shadow: 1px 1px 1px black;
    width: auto;
	transition: background-size 2s ease;
}
.startButton:hover{color: white;}
.startButton{
	padding: 0.1em 0.15em 0em 0.25em;
    cursor: pointer;
    font-weight: bold;
    border-radius: 2px;
    font-size: 1.2em;
    color: #ffcc00;
    border: 1px solid;
    text-shadow: 1px 1px 1px black;
	background: #850707;
    color: antiquewhite;
    border-color: silver;
    position: absolute;
    right: 0;
    bottom: 0;
}
.buttonWrapper{
    position: absolute;
    bottom: 0.25em;
    right: 2.25em;
    width: max-content;
    scale: 1.5;
}
.newMissionViewWrap{
    width: 100%;
    overflow-y: auto;
    max-height: 76vh;
    padding: 0;
    transition: height 1s ease;

    background: #00000030;
    overflow-y: auto;
    margin: 0 auto;
    padding: 0;


}
.missionView{
	width: 87%;
    height: 0;
    position: fixed;
    bottom: 8%;
    top: 23%;
    color: wheat;
    left: 6.5%;
   
    border-radius: 1px;
    right: 6%;
    background: rgb(41, 38, 38);
    transition: height 1s ease;
    z-index: 1;
}
.infoStartGame h4, .infoStartGame div{
	margin: 1em 9% 1em 9%;	
}
.infoStartGame{
	position: absolute;
    left: 0;
    opacity: 0;
    top: 0;    width: 100%;
    color: wheat;
    text-align: left;
    font-size: 0.8em;
    font-family: system-ui;
    transition: opacity 0.3s ease;
    max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
.advButtons:hover{
	color:black;
}
.advButtons{
	display: block;
    height: 4.2em;
    position: relative;
    margin: 1em auto;
    max-width: 100%;
    width: 80%;
    background: #0aa20a;
    color: #363f39;
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.5em;
    padding: 10px 20px;
    border: 4px solid #5d4212;
	border-radius: 8px;
	cursor:pointer;
    transition: background-color 0.3s, color 0.3s;
    background-color: #564d4a;
    color: wheat;
}
.infos{
	margin: 2em 9% 0em 9%;
	padding:1em;
	border: 3px outset black;
	border-radius: 4px;
	background:rgb(86, 77, 74);
    display: inline-block;
	font-weight:bold;
    box-shadow: 1px 1px 1px 1px black;
}
.infoButton:hover{color: white;}
.infoButton{
	padding: 0.1em 0.25em 0em 0.15em;
    cursor: pointer;
    font-weight: bold;
    border-radius: 2px;
    font-size: 1.2em;
    color: #ffcc00;
    border: 1px solid;
    text-shadow: 1px 1px 1px black;
	background: #081363;
    color: antiquewhite;
    border-color: silver;
    position: absolute;
    left: 0;
    bottom: 0;
}
.rewardInfo{
	margin: 1.5em 0 0;
    padding: 0;
    font-weight: bold;
}
.rewardInfo2{
	position:relative;
	margin: 0 6%;
	border-style: ridge;
    border-radius: 4px;
	padding: 0;
    font-weight: bold;
	min-height: 1.5em;
	background: #00000069;
	border-color: wheat;
}
.rewardInfoButton:hover{
    background: #1a7844;	
}
.rewardInfoButton{
	display:none;
	margin: 1.5em 0 0;
    padding: 0.5em;
	cursor:pointer;
	width: -webkit-fill-available;
    font-weight: bold;
    border-radius: 5px;
    color: #ffcc00;
    border: 1px solid gold;
    background: seagreen;
    text-shadow: 1px 1px 1px black;
}
.badgeTop{
	position: absolute;
    top: 1em;
    right: 1em;
    width: 3em;
}
.badgeTopInner{
    position: absolute;
    top: 3px;
    right: 0px;
    width: 3em;
}
.infoSections h4{
	    font-size: 1.25em;
	    margin: 0 0 1.33em;
}
.infoSections{
	position: relative;
    background-image: none;
    background: #15131391;
    border-radius: 15px;
    display: inline-block;
    overflow-y: auto;
	overflow-x: hidden;
    margin: 0 auto;
	cursor:default;
    /* border: 1px inset; */
    top: 0;
	min-width: 32%;
    height: auto;
    padding: 0.25em;
    box-shadow: 1px 7px 12px 4px black;
	font-family:system-ui;
}
.infoSections2 h4{
	    font-size: 1.25em;
	    margin: 0 0 1.33em;
        text-shadow: 1px 1px 1px black;
}
.boxWrap{
    position: absolute;
    bottom: 25px;
    background: rgb(40, 40, 40);
    border: 1px solid rgb(78, 78, 78);
    right: 0px;
}
.playerIcons{
    height: 2.25em;
    width: 2.25em;
    border-radius: 50%;
    position: relative;
    cursor:pointer;
    border: 2px groove #9e7545;
}
.headerBar{
    background: #00000024 !important;
    text-shadow: 1px 1px 1px black;
    display: inline;
    padding: 1px 4px 4px;
    border: 2px dotted wheat;
    border-radius: 8px;
    position: relative;
    top: 0.25em;
}
.playerIconsWrap{
    margin: 1em auto 0;
    background: #2d2d2d7a;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0px 1px 1px 1px black;
}
.infoSections2{
	transition: min-width ease 0.9s;
	position: relative;
    background-image: none;
    background: #15131391;
    border-radius: 15px;
    display: inline-block;
    overflow-y: auto;
	overflow-x: hidden;
    margin: 0 auto;
    margin: 1.25em 0.5em;
	border: 2px solid #9e7545;
	cursor:default;
    /* border: 1px inset; */
    top: 0;
	min-width: 420px;
    height: auto;
    padding: 0.25em;
    box-shadow: 1px 7px 12px 4px black;
	font-family:system-ui;
}
.nftCardFront{
    webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);

}
.iconFlip{
    width: 1em;
    height: 1em;
}
#nftCard{
    
    webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 840ms ease-in-out;
    -ms-transition: -ms-transform 840ms ease-in-out;
    transition: transform 840ms ease-in-out;
    font-size: 0.8em;
}
#yourBal {
	    z-index: 21;
    webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    margin-top: -3em;
    -webkit-transition: -webkit-transform 840ms ease-in-out;
    -ms-transition: -ms-transform 840ms ease-in-out;
    transition: transform 840ms ease-in-out;
    position: fixed;
    top: 7.2em;
	width:99%;
}
.extBtn:hover{background:#502c0f;color:#ffdc73;}
.extBtn{
	z-index: 99;
    color: antiquewhite;
    background: #673813;
    cursor: pointer;
    position: absolute;
    width: 1em;
    border: 2px solid wheat;
    text-shadow: 1px 1px 1px wheat;
    top: 0.5em;
    text-align: center;
    right: 0.75em;
    border-radius: 50%;
    font-size: 1.25em;
}
.profileMenu div:hover{
    background: #212121;
	}
.profileMenu div{
	display: inline-block;
    width: revert;
    background: #2b2b2b;
    padding: 0.25em 0;
    border-radius: 9px;
    box-sizing: border-box;
    width: 45%;
    margin: 4px 9px 4px 9px;
    cursor: pointer;
    min-width: 45%;
}
.profileMenu{
	position: absolute;
    top: 2.1em;
    font-size: 2em;
    right: 0%;
    height: auto;
    /* width: 100%; */
    border-radius: 3px;
    background: #020000db;
    display: none;
    border: 2px ridge beige;
    /* padding: 0; */
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    height: 79vh;
	transition:height 1s ease;
}

.extBtn2{
	display:none;
	z-index: 99;
    color: white;
    background: black;
    cursor: pointer;
    position: fixed;
    width: 1.75em;
	height:auto;
    top: 9.5%;
    text-align: center;
    left: 0;
    border-radius: 7%;
    font-size: 2em;
}
#badgeinInfo:hover, #badgeinInfo2:hover, #badgeinInfo3:hover, #badgeinInfo4:hover, #badgeinInfo5:hover{
	    box-shadow: 0px 1px 3px 3px #2a2a16d9;
    border: 1px inset black;
}
#badgeinInfo, #badgeinInfo2, #badgeinInfo3, #badgeinInfo4, #badgeinInfo5, #badgeinInfo6{
	z-index: 99;
    color: white;
    background: black;
    cursor: pointer;
    position: relative;
    width: 1.75em;
    border: 1px solid #207f00;
    height: 1.75em;
	box-shadow: 0px 1px 3px 2px #2c281ca8;
    text-align: center;
    left: 0;
    border-radius: 7%;
    font-size: 1em;
	background-size:100% 100% !important;
}
#newEarnInfo, #newEarnInfo2, #newEarnInfo3{
	display: inline-table;
    cursor: pointer;
        background: #00000047;
    color: #cfcfcf;
    /* border: none; */
    /* top: 1.25em; */
	text-shadow: 1px 1px 1px #edd100;
    position: relative;
    border: 2px wheat;
    border-style: groove;
	padding: 0;
    padding-right: 6px;
}
.nameChanges{
	display: none;
}
#newEarnHeart:hover, #newEarnEarth:hover, #newEarnDragon:hover, #newEarnWater:hover, #newEarnFire:hover, #newEarnBzz:hover{
	color:antiquewhite;
	
}
/*
#newEarnHeart{background:#d434a8;}
#newEarnEarth{background:#0e7527;}
#newEarnDragon{background:#86069b;}
#newEarnWater{background:#0e2775;}
#newEarnFire{background:#750e0e;}
#newEarnLightning{background:#f2ec33;color:black;}
#newEarnBzz{background:#1096ac;}
*/
#newEarnHeart, #newEarnEarth, #newEarnDragon, #newEarnWater, #newEarnFire, #newEarnLightning, #newEarnBzz{
	display:inline-block;
	padding-right:5px;
	padding:0.25em;
	min-height:1.2em;
	color:antiquewhite;
	text-shadow: 1px 1px 1px black;
}
.unStakedInWallet{
	position: absolute;
    font-size: 0.75em;
    left: -5px;
    top: -7px;
	cursor:pointer;
	text-shadow: 1px 1px 1px black;
    color: #ff3700;
}
/*The span dropdown ith plus sign to open menu below*/
.dropdown{
	padding:0;margin:0;
}
/*the ul in the drop down with additional token ids */
.dropdown-menu{
	padding:0;margin:0;display:none;
}
.dropdown-menuActive{padding:0;margin:0;display:inline-block;}
.dropdown-menu li, .dropdown-menuActive li{
	list-style: none;
    display: inline;
}
#infoToDisplay2{
	text-align: center;
    padding: 0.75em 0em 4em 0.75em;
}
#statField{
	margin: 1.25em auto;
}
.newMintButtons:hover{
	background: #331d03;
    color: #ac9311;
    text-shadow: 1px 1px 1px #eee8bb;
	cursor:pointer;
}


 #mintOptionM1,
 #mintOptionMorphsToken1,
 #sacrificeOption1, #sacrificeOption2, #sacrificeOption3,
 #mintOption14, #mintOption13, #mintOption12, #mintOption11, #mintOption10,
 #mintOption9, #mintOption8, #mintOption7, #mintOption6, #mintOption5,
 #mintOption4, #mintOption3, #mintOption2, #mintOption1,
	 .dropdown, .dropdown span, .smallLogoBadge{
		cursor:pointer;
	}
	
	
.newMintButtons{
	display: block;
    margin: 0px auto;
    background: #5825004f;
    border: 2px wheat;
    border-style: groove;
    text-align: center;
    /* padding: 0; */
    /* padding-right: 6px; */
    /* max-width: 80%; */
    text-shadow: 1px 1px 1px #edd100;
	border-radius:1px;
}
#headerField, #headerField2{
	font-size: 1.125em;
    padding: 0em 0em 0em 1em;
    color: palegoldenrod;
    text-shadow: 1px 1px 1px black;
    font-style: italic;
    display: block;
    MARGIN: 0;
}
.contractIcons{
	text-decoration: none;
    position: relative;
    bottom: 4px;
	text-shadow: 1px 1px 1px black;
}
.dailyIncome{
	    position: relative;
    bottom: 5px;
    background: none;
	float:right;
    border: none;
}
.topHolderInfoCrad{
	margin:0 auto;
	top: 0.4em;
    position: relative;
}
#gameChatContainer li {
  padding: 5px; /* Add padding to each list item for spacing */
  border-bottom:1px dotted #790505;
}
/*
#engage{
	display: inline-block;
    position: relative;
    right: 0;
    border-color: #9d0505;
    cursor: pointer;
    padding: 0;
    margin: 0 5px;
    width: auto;
    font-weight: 400;
    font-family: 'Sedgwick Ave Display', cursive;
    border-radius: 25%;
    height: 4em;
    width: 6em;
    font-size: 0.9em;
    color: #840303;
    box-shadow: 0px 0px 1px 3px;
    background: linear-gradient(45deg, #b30808, transparent);
}
#boost{
	display: inline-block;
    position: relative;
    right: 0;
    border-color: #05129d;
    cursor: pointer;
    padding: 0;
    margin: 0 5px;
    width: auto;
    color: #033984;
    background: linear-gradient(45deg, #033984, transparent);
    box-shadow: 0px 0px 1px 3px;
    font-weight: 400;
    font-family: 'Sedgwick Ave Display', cursive;
    border-radius: 25%;
    height: 4em;
    font-size: 0.9em;
    width: 6em;

}
#engageInner, #boostInner{
	border-radius: 25%;
    height: 1.2em;
    padding: 19px 1px;
    border-style: ridge;
    color: white;
    border-color: gold;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px black;
    box-shadow: 0px 0px 1px 3px #0000009c;	
}
#engage:hover{
	color:#970606;
	background: linear-gradient(90deg, #7a0711, #a60c19);
}
#boost:hover{
	color:#064f97;
	background: linear-gradient(90deg, #07257a, #0c2aa6);
}
#engage:hover, #boost:hover{
	
	background: linear-gradient(50deg, green, transparent);
	border-color: #5c4e00;
}
*/
#turns{
	max-width: 4em;
    position: absolute;
    bottom: 6px;
    z-index: 1;
    right: -20px;
    display: none;
}
#turns2{
	width: max-content;
    fill: wheat;
    color: black;
    padding: 2px 4px 0px;
    font-family: 'Sedgwick Ave Display', cursive;
    font-size: 1em;
    background: wheat;
    text-shadow: none;
    bottom: 33%;
    border: 2px groove black;
    right: -2px;
    border-radius: 2px;
}
@keyframes flashEffect {
    0% {
        box-shadow: 0 0 0px 2px white inset;
    }
    50% {
        box-shadow: 0 0 42px 13px white inset;
    }
    100% {
        box-shadow: 0 0 0px 2px  white inset;
    }
}
@keyframes rollingEffect {
    0% {
        left: 0em;
        transform: rotate(0deg); /* No rotation at the start */
    }
    100% {
        left: 4em;
        transform: rotate(360deg); /* At the end, complete a full rotation */
    }
}

@keyframes flashingBorder {
    0% {
        border: 2px dashed wheat;
    }
    
    5% {
        border: 2px dashed red;
    }
    10% {
        border: 2px dashed wheat;
    }
    15% {
        border: 2px dashed red;
    }
    20% {
        border: 2px dashed wheat;
    }
    25% {
        border: 2px dashed red;
    }
    30% {
        border: 2px dashed wheat;
    }
    35% {
        border: 2px dashed red;
    }
    40% {
        border: 2px dashed wheat;
    }
    45% {
        border: 2px dashed red;
    }
    50% {
        border: 2px dashed wheat;
    }
    55% {
        border: 2px dashed red;
    }
    60% {
        border: 2px dashed wheat;
    }
    65% {
        border: 2px dashed red;
    }
    70% {
        border: 2px dashed wheat;
    }
    75% {
        border: 2px dashed red;
    }
    80% {
        border: 2px dashed wheat;
    }
    85% {
        border: 2px dashed red;
    }
    90% {
        border: 2px dashed wheat;
    }
    95% {
        border: 2px dashed red;
    }
    100% {
        border: 2px dashed wheat;
    }
}
.roll{    
    z-index: 10; 
    animation: rollingEffect 1.5s ease-out;
}
.miniBarWrap{
    height: 4px;
    min-width: 16px;
    border-radius: 1px;
    background: linear-gradient(306deg, rgb(153 9 9), #7a0404);
    display: inline-block;
    border: 1px solid #232323;
    transition: all 0.5s ease;
    position: absolute;
    bottom: 0px;
    left: -1px;
}

.miniBarCustom{
    color: #fff;
    background: linear-gradient(176deg, #04ff00, #055d18); 
    height: 4px;
    width: 100%;
    border-radius: 0px 1px 1px 0px;
    display: block;
    position: relative;
    transition: all 0.5s ease;
}
.flash {
    animation: flashEffect 0.2s ease-out;
    z-index: 10; 
}
.selected-Opponent-Card-Flashing{
    animation: flashingBorder 0.7s ease-out;

}
@keyframes shiftPosition {
    from {
      left: 0px;
      top:0;
    }
    to {
      left: 2px;
      top:-2px;
    }
  }
  
  .moving-element {
    position: relative;
    animation: shiftPosition 0.68s  infinite  ; /* Shift to 3px over 0.3s   --- edited to 0.68s for 176 BPM */
  }
.flashing-cards-for-selection{
    
    opacity: 1 !important;
    border: 2px dotted red !important;
    box-shadow: 0 0 5px 4px #ff000069 !important;
}
/*This one is the name and HP area - if you have attacked sets bg grey for now*/
.cardHasAttacked{
	background:grey;
	fill:white;
}

.cardIsAtc{
	box-shadow: 0 0 1px 2px #000000 !important;
    opacity: 0.5 !important;
    border: 2px dotted red !important;
	scale: 0.8 !important;
	top:0 !important;
}
.cardIsDead{
	opacity: 0.05 !important;
	box-shadow: 0 0 0px 0px #000 !important;
	scale: 0.8 !important;
	top:0 !important;
}
.degenImage:hover{ cursor:pointer;}
.degenImage{
	width:125px;height:125px;
}
.myDCALogo3{
	padding: 0em 0 1em;
    height: 10vh !important;
    top: 1.5em;
    /*display: inline-block !important;*/
    display: none;
    max-width: 95%;
    position: relative;
}
.statsWhole{	
	border: 1px solid black;
    padding: 3px;
    position: relative;
    background: burlywood;
    font-size: 1.5em;
    height: 5em;
    text-shadow: 1px 1px 1px black;
}



.statsWhole:hover, .statsWhole:active{
	background:#9f7f55;
}
.statsLeft{
	position: absolute;
    left: 2.5%;
}
.statsInventory{
	position: absolute;
    right: 2.5%;
}
.rulesFirst{
	text-align: left;
    /* position: absolute; */
    border: 1px solid black;
    padding: 3px;
    position: relative;
    background: #d9800d;
    /* font-size: 1.5em; */
    box-shadow: inset 0 1px 15px 23px #391111b8;
    text-shadow: 1px 1px 1px black;
}
#gameInfoScreenWrapper, #missionViewer{
    display: none;
    position: fixed;
    top: 4.5em;
    left: 0;
    right: 0;
    background-image: url(../../Gallery/images/framedMain.webp);
    bottom: 0;
    border: 5px ridge #703b00;
    /* background: #a98e5d; */
    background-size: 100% 100%;
    border-radius: 2px;
    z-index: 2;
}
#missionViewer{
    background-image: url(../../Gallery/images/tartarusBg.jpg);
	
}
.tabLeft{
	position:absolute;
	left:10%;
    text-shadow: 1px 1px 1px black;
	text-align:left;
}
.tabRight{
	position:absolute;
	right:10%;
	text-align:right;
}
#box1NewInfo{width:99%;overflow-y:auto;}
.imageIconsBadges{
	max-width: 7em;
    max-height: 5em;
    height: 4.75em;
	float:left;
	margin: 0 0 5px;
    background-size: 100% 100%;
}
.gameInfoScreenHolderLeftSide{
position: absolute;
    top: 7%;
    left: 5%;
    /* bottom: 7%; */
    width: 60%;
    height: 84.25%;
   border: 5px groove #9e7545;
   background: #ecd4aa9c;
   overflow-y: auto;
	
    font-size: 1.5em;
}
#abitTargetDetails{
    border: 2px ridge #8b3d13;
    margin: 0px auto 1em;
    border-radius: 5px;
    padding: 15px;
    /* color: black; */
    /* background: #efa92569; */
    display: block;
    width: 80%;
    background: linear-gradient(180deg, #00000042, #ff8f00a1, #00000066);
    box-shadow: inset 0 0px 23px 45px #00000073;
    box-shadow: inset 0 1px 15px 23px #026874b8;
    box-shadow: inset 0 1px 15px 23px #112c39b8;
}
#abitTarget{
    border: 2px ridge #8b3d13;
    margin: 7px auto 0;
    border-radius: 4px;
    padding: 14px;
    top: -7px;
    left: 27px;
    border-right: 2px solid #4a2009;
    border-left: 2px ridge #692e0e;
     color: #ff9800;
    font-family: 'Sedgwick Ave Display', cursive;
    /* background: #efa92569; */
    display: inline-block;
    background: linear-gradient(180deg, #00000042, #ff8f00a1, #00000066);
    box-shadow: inset 0 0px 23px 45px #00000073;
    box-shadow: inset 0 1px 15px 23px #026874b8;
    box-shadow: inset 0 1px 15px 23px #112c39b8;
}
.imgWrap{
	    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
}
.gameInfoScreenHolderBoxesOld{
    border: 2px inset#218bb2;
    display: inline-block;
    padding: 16px 11px;
    max-height: 42vh;
    transition: all 0.6s ease;
    /* position: absolute; */
    margin: 0;
    background: #ecd4aaed;
    background: linear-gradient(180deg, #000000d1, #ff8f00cf, #000000e8);
    box-shadow: 0px 0px 0px 1px black;
    overflow-y: auto;
    position: relative;
    background-image: none;
    background: #15131391;
    /* border-radius: 15px; */
    display: inline-block;
    overflow-y: auto;
    margin: 0 auto;
    padding: 2em;
    height: 69vh;
    width: 80%;
    box-shadow: 1px 7px 12px 4px black;

}
.gameInfoScreenHolderBoxes{
    border: 2px inset #b22121;
    /* display: inline-block; */
    /* padding: 16px 11px; */
    /* max-height: 42vh; */
    transition: all 0.6s ease;
    /* position: absolute; */
    /* margin: 0; */
    /* background: #ecd4aaed; */
    /* background: linear-gradient(180deg, #000000d1, #ff8f00cf, #000000e8); */
    box-shadow: 0px 0px 0px 1px black;
    overflow-y: hidden;
    position: relative;
    background-image: none;
    background: #15131391;
    /* border-radius: 15px; */
    /* display: inline-block; */
    /* overflow-y: auto; */
    margin: 0 auto;
    padding: 2em;
    /* height: 69vh; */
    /* width: 80%; */
    box-shadow: 1px 7px 12px 4px black;
}
.gameInfoScreenHolderNotBoxes{
    border: 2px ridge #8e6f1f;
    display: table-cell;
    padding: 0px;	
    position: absolute;
    margin: 0;
    background: #ecd4aaed;
    box-shadow: 0px 0px 0px 1px black;
	overflow-y: auto;
}
.gameInfoScreenHolder{
	position:absolute;
	left:5%;
	right:5%;
	bottom:7.5%;
	top:12.5%;
	background: #00000026;
	border:5px groove #3d3d3d;
	border-radius:5px;
}
.headerInInventory{
	font-size: 2em;
    top: 0.35em;
    position: relative;
    color: antiquewhite;
    display: inline-block;
    text-shadow: 1px 1px 1px black;
    padding: 0.25em;
}
.gameInfoScreenHolderLeftSide span:hover{
	background:#00000054 !important;
	cursor:pointer;
}
.gameInfoScreenHolderBoxes span:hover{
	background:#a6000080;
	cursor:pointer;
}
.centerText{
    padding: 3em;
    font-size: 1.2em;
    font-style: italic;
    margin: 2em auto;
}
.badgeInventory{
	position:relative;
	height: 100%;
    width: 100%;
	
}
.cardInventory{
	position:relative;
	height: 6em;
    width: 100%;
	
}
.leftBadges{
	display: inline-grid;
    float: left;
}
.gameInfoScreenHolderLeftSide span{
	display: block;
    width: -webkit-fill-available;
    padding: 0.5em;
    height: 1.5em;
    color: antiquewhite;
    text-shadow: 1px 1px 1px black;
    margin: 1px auto;
    /* border: 2px ridge brown; */
    box-shadow: 0 0 0px 1px #4d0000;
	cursor:pointer;	
    background: #0000009c;
	
}
.gameMenuBarHeader{
    width: 100%;
    background-size: 100% 100%;
    height: 4.7em;
    background-size: 100% 100%;
    background: linear-gradient(180deg, #00000042, #00fff8a1, #00000066);
    box-shadow: inset 0 1px 15px 23px #026874b8;
    border-top:1px solid #ffdc73;
}
.cardGalleryHeader{
   width: 100%;
    display: flex;
    background-size: 100% 100%;
    height: auto;
    background-size: 100% 100%;
    /* background: linear-gradient(180deg, #00000042, #00fff8a1, #00000066); 
    box-shadow: inset 0 1px 15px 23px #026874b8;*/
    border-top: 1px solid #ffdc73;
}
.marketMenuHeader{
    width: 100%;
    background-size: 100% 100%;
    height: 2.75em;
    z-index: 15;
    position: relative;
    text-align: left;
    background-size: 100% 100%;
    background: linear-gradient(180deg, #000000, #ff0030, #000000);
    box-shadow: inset 0 1px 15px 23px #742602b8;
/*red above, set it darkish grey, abit more modern*/
    background: linear-gradient(180deg, #000000, #5d5d5d, #000000);
    box-shadow: inset 0 1px 15px 23px #181818b8;
}
.gameInfoScreenHolderBoxes span{
    width: auto;
    position: relative;
    min-width: 3em;
    height: 3em;
    border: 3px inset #b22121;
    display: inline-block;
    padding: 1%;
    margin: 0;
    background: #00000021;
    box-shadow: 0px 0px 0px 1px #4d0000;
}
.displayCard{
    display: inline-block;
    background: black;
    margin: 0.25em;
    border-radius: 5%;
    border: 5px solid #232020;
    transition: 300ms;
    box-shadow: 0 0 1px 1px black;
    margin: 0.5em 0.25em;
    transition: all 2s;
}
.nameHoldingDevice, .oneSec, .imgIn3{
    
    transition: all 0.5s;
}
.headerInfo{
    font-family: fantasy;
    font-size: 1.7em;
    text-transform: uppercase;
    position: relative;
    bottom: 0.5em;
    border-bottom: 2px dotted black;
}
.oneSec{

    transform-origin: left top;
}
.creatureInfo{
    bottom: 11em;
    position: relative;
    display: inline-block;
    max-width: 14em;
    max-height: 0em;
}
.imageOptCard{
    display: block;
    background-color: #2b2b2b;
    margin: 1em 1em 0em;
    border: 1px solid #db5d00;
    border-radius: 7px;
    font-size: 0.8em;
    box-shadow: 0px 0px 7px 1px #ff9a00;
}
.cardImage{
    width: 180px;
    height: 180px;
    border-radius: 2%;
    border: 1px solid #4e4e4e;
    margin: 0;
}
.yourDCA{
    color: #cfcfcf;
    font-weight: bold;
    font-size: 1em;
    display: block;
    text-shadow: 1px 1px 1px black;
    padding: 1em;
}
.transferOptions:hover{background: #1d1d1d;cursor:pointer;}


#settingsNftsOldBlue:hover,#settingsNftsOldBlue:active {
    background: linear-gradient(180deg, #3180b799, #0db9c0a1, #05746d8a);
    border-radius:18%;
}
#settingsNfts:hover,#settingsNfts:active {
    background: linear-gradient(180deg, #ffdc73, #000000a1, #ffdc73);
    border-radius: 18%;
}
.settingsWrapperOldInTheWay{
    position: absolute;
    right: 31px;
    top: 16px;
    padding: 2px;
    margin: 0px;
    z-index: 5;
}
.settingsWrapper{
    position: absolute;
    right: 3.25em;
    top: 11px;
    padding: 2px;
    margin: 0px;
}
.scrollableNftList{
	margin: 2em auto 1em;
    overflow-y: auto;
    max-height: 36vh;
    width: 90%;
    display: grid;
    padding: 0 1em 0 0;
    border: 1px solid;
    border-radius: 2px;
    background: #37373763;
}
.scrollableNftList div :hover{
	
    background: #232323;
}
.nftTransferImg{
	    width: 4.269em;
    height: 4.269em;
    /* position: absolute; */
    float: left;
    left: 2%;
    margin: 0;
    border: 1px solid grey;
    border-radius: 3px;;
}
.nftName{
	float: left;
    margin: 1.25em 0em 1em 1em;
}
.dropdowns li{
    padding: 12px 8px;
    background: #232323;
    list-style: none;
    border-bottom: 1px solid wheat;
    overflow-y: auto;
}
.dropdowns li:hover,.dropdowns li:active{
    background: #302f2f;
    cursor: pointer;
    border-bottom: 1px solid #d4ba80;
}
.dropdowns{
    background: black;
    border: 4px ridge #134e67;
    z-index: 5;
    width: 12em;
    right: 0;
}
#batchInitiate {
    position: fixed;
    right: 22px;
    bottom: 13px;
    display: block;
    z-index: 10;
    display: none;
    width: 6em;
    border: 2px solid #270101;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background: #400000;
    box-shadow: 0px 0px 0px 1px black;
}
#batchInitiate:hover{
	filter: brightness(1.42);
	border: 2px solid #000;
	cursor:pointer;
}
#batchInitiate:active{
	border: 2px solid #270101;
    box-shadow: 0px 0px 0px 2px #270101;
}
.smallRedBlackButtons{
    cursor: pointer;
    background:black;
    color:#cfcfcf;
    border-radius: 3px;
    border: 2px solid beige;
    box-shadow: 0px 1px 1px 1px #000;
    margin: 0.5em auto 1em;
    display: block;
    padding: 0.5em 0.5em 1em 0.5em;
}

.adventureNewH2Dark:hover{
	
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    transition: all .1s ease-in-out;
}
.adventureNewH2Dark{
	background: black;
    margin: 0 auto;
    padding: 0.75em;
    border-radius: 3px;
    border: 2px solid;
    border-color: #040015;
    display: inline-block;
    border-top: 3px solid wheat;
    border-bottom: 3px solid wheat;
    box-shadow: 0px 1px 3px 0px #001824;
    color: wheat;
    cursor: pointer;
}
#transferReciever{
    cursor:text;
}
.heder{
	font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 1px grey;
	margin: 0 0em 1em;
}
.rank {
    display: block;
    background: #212121;
    margin: 0;
    padding: 1px 0;
    top: 0px;
    position: relative;
    border: 1px solid #4e4e4e;
    border-radius: 2px;
}
.yourDecksOfCards span:hover, .yourDecksOfCards span:active{
    border: 3px ridge #6e0404;
    cursor:pointer;
}
.yourDecksOfCards span{
    width: auto;
    min-width: 3em;
    height: 6em;
    border: 3px ridge #100000;
    display: inline-block;
    padding: 1%;
    margin: 0 6px;
    position: relative;
    background: #00000021;
    box-shadow: 0px 0px 0px 1px black;
}
.imageOpt{
	display: block;
    background-color: #580015;
    background-color: #2c0058;
    background-color: #2c2c5d;
    background-color: #2c535d00;
    /* border-color: #ff0000; */
    /* margin: 0em 1em 0em; */
    padding: 0.25em 0 0em;
    border: 1px solid black;
    border-radius: 7px;
    /* box-shadow: 0px 0px 30px 4px #910101; */
}
.leftBadges span:hover, .leftBadges span:active {
	right:0;
}
.leftBadges span{
	width: 4em;
    height: 4em;
    margin: 0 0 4px;
    position: relative;
    right: 3em;
    transition: right 1s ease;
}
.leftBadges div{
	display:inline-block;
	width: 4em;
    height: 4em;
    margin: 0 0 4px;
    position: relative;
    right: 0em;
    transition: right 1s ease;
}
.upgraderWrapper{
	left: 33%;top: 33%;position: absolute;
}
.displayDegen{
	display: inline-block;
    background: black;
    margin: 0.25em;
    border-radius: 5%;
    border: 5px solid #232020;
    transition: 300ms;
    padding: 0.5em;
}
.stats{
	position: relative;
    top: 0.2em;
    border-radius: 50%;
    display: inline-block;
    height: 1em;
    margin: 0 0.2em;
    width: 0.25em;
    cursor: pointer;
}
.cardIcons{
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 1px solid;
    top: 3px;
    position: relative;
}




.creaturePreview{
    max-width: 4em;
    filter: drop-shadow(0px 2px 1px black);
}
.nameButtons{
    filter: drop-shadow(0px 2px 2px #000);
    padding: 5px 6px 4px;
    font-family: anton;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.025em;
    text-align: left;
    position: relative;
    background-image: url(images/nameHolder2.webp);
    background-size: 100% 100%;
}
.miniPopUp{
    text-shadow: 1px 1px 1px black;
    position: fixed;
    top: 43px;
    height: fit-content;
    width: auto;
    left: 18%;
    right: 18%;
    z-index: 3;
    display: none;
    min-height: 10em;
    color: wheat;
    transition: all 0.5s;
    background: linear-gradient(286deg, #0aa09f, #05535d);
    box-shadow: rgb(2 96 101 / 72%) 0px 1px 6px 5px inset;
    padding: 1.5em 0em 1.5em;
    border: 3px #ffdc73;
    border-radius: 2px;
    border-style: solid;
}
#player{
    /*
    text-shadow: 1px 1px 0px red;
    filter: drop-shadow(0px 1px 1px red);
    */
    text-shadow: 1px 1px #2f2f2f;
}
#player2{
    /*
    text-shadow: 1px 1px 0px blue;
    filter: drop-shadow(0px 1px 1px blue);
    */
    text-shadow: 1px 1px #2f2f2f;
}
.gameButtonWrap{
    padding:2px;
    border: 1px solid wheat;
    box-shadow: 0 1px 1px 1px #404040;
    color: wheat;
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(286deg, #0aa09f 50%, #05535d);/*Blue*/
    background: linear-gradient(286deg, #680aa0 50%, #5d053d);/*Purple*/
    cursor: pointer;
    transition: all 1s;
    position: relative;
    z-index: 1;
    margin: 1em auto 0.25em;
}
.gameButtonWrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(286deg, #5d053d 1%, #680aa0, #5d053d 99%);
    opacity: 0;
    transition: opacity 1s ease;
    
}
.gameButtonWrap div{
    padding: 10px 18px;
    border: 1px solid wheat;
    border-radius: 3px;
    z-index: 2;
    position: relative;

    display: inline-block;
}
.gameButtonWrap:hover::before, 
.gameButtonWrap:active::before {
    opacity: 1;
}
.gameButtonWrap:hover, .gameButtonWrap:active{
    box-shadow: 0px 0px 1px 2px #404040;
    color:#faf9f6;
}
.gameButton{
    position: relative;
    z-index: 2;
    font-family: anton;
}
.centerInCard{
	display: inline-block;
    color:wheat;
    height: 93%;
    width: 80%;
    position: relative;
    top: 16px;	
    border-radius: 1%;
    margin-bottom: 16px;
}
.frameRight{
    border-right: 2px solid #343434;
}
.dotBord{
    border:3px dashed #0f3f19;
    border-radius: 25%;
    background: #00000042;
}
.arena{  
    padding: 0 1em 1em;
    background: url(images/arena/arenaSkyMini.webp);
    background-size: 100% 100%;
    border-radius: 24%;
    border: 5px solid #444442;
    box-shadow: 0px 0px 1px 1px #066e36;
}
.previewFighters{
    min-width: 4em;
    left: 0%;
    opacity: 1;
    margin: 10px auto;
    display: inline-block;
    position: relative;
    border: 2px solid #343434;
    background: #6a3e1e;
}
.iconNum{
    position: absolute;
    height: 1em;
    width: 1em;
    z-index: 1;
    top: 2px;
    color: wheat;
    text-shadow: 1px 1px 1px black;
    font-family: fantasy;
}
/* 
    #Opponent .card-button, #Opponent .card-button2{
        background: url(images/cards/earth.webp);
        background-size: 100% 100%;
    }
    #YourCards .card-button, #YourCards .card-button2{
        background: url(images/cards/heart.webp);
        background-size: 100% 100%;
    }
*/

.arenaWrap{
    min-width: 4em;
    left: 0%;
    opacity: 1;
    margin: 10px auto;
    display: inline-block;
    position: relative;
    padding: 0.25em 1em 1em 1em;
    border-radius: 30px;
    border: 2px solid #343434;
    background: url(images/arena/arenaSkyMini.webp);
    background-size: 100% 100%;

}
.engageWrap{
    display: none;    
    opacity: 0;
    transition: opacity 1s;
}
.playersCardsWrapper{
    text-align: center;
    opacity: 1;
    bottom: 0;
    position: absolute;
    left: 0%;
    z-index: 1;
    right: 0%;
}
.enemyFrame{
    text-align: center;
    opacity: 1;
    top: 0;
    top: -60px;
    position: absolute;
    left: 0%;
    /*
    transform-origin: 0 0;
    scale: 0.75;

    remove right and add above for left positioned enemy cards..
*/
    transform-origin: 50% 0;
    scale: 1;
    right: 0%;

}

/*
scale down this instad of the current way to make smaller cards.

    scale: 0.5 1;
*/
.placeHolderForNftImage{
    border-radius: 50%;
    width: 2.75em;
    height: 2.75em;

}
.collectionBadgeBooster .placeHolderForNftImage{
    width: 2.75em;
    height: 2.75em;
}

.collectionBadgeBooster .gamePadIcons{
    width: 1.75em;
}
.collectionBadgeBooster .iconTopRight{
    top: 0px;
    right: 0px;
}
.collectionBadgeBooster .iconBtmRight{
    right: 0px;
    bottom: 0px;
}

.startButtonImage{
    height: 3em;
    cursor: pointer;
    filter: drop-shadow(0px 0px 2px cyan);
    box-shadow: 0px 1px 1px 1px #002e5e;
    transition: all 1s ease;
    background: #01197ac9;
    border-radius: 21px;
}
.startButtonImage:active{
    transform: translateY(2px) scale(0.9);
    box-shadow: 0px 1px 1px 1px #04b7cb;
}
.collectionBadge{
    background-image: url('images/skins/heroPowerIcons/cardBadgeGold.webp');
    padding: 1.5em;
    background-size: 100% 100%;
    height: 2.75em;
    display: inline-block;
    margin: 0 0.25em 0em;
    position: relative;
    cursor: pointer;
}
.loginScreen{
    background-image: url('images/skins/loginScreen.webp');
    background-size: 100% 100%;
    transition: all 1s ease;
    font-size: 2em;
    top: 19vh;
    display: inline-block;
    position: relative;
    min-height: 6em;
    min-width: 6em;
    color: #388de2;
    filter: drop-shadow(0px 0px 3px #a638e2);
}
.loginWrapper{
    position: relative;
    right: 0.45em;
    bottom: 3px;
    margin: 0 0 0 1em;
}
.loginWoodButtons{
    position: absolute;
    display: inline-block;
    transition: all 1s ease;
    font-size: 2em;
    min-height: 9em;
    min-width: 9em;    
}
/*New buttons..*/
.loginWoodButtonsCleaWrap{
    position: absolute;
    position: relative;
    font-size: 2em;
    min-height: 9em;
    min-width: 9em;    
    display: inline-block; 

}   
.popUpHeader{
    color: #ffeec3;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

.paddingRemovedOnSideSmall{
    padding:2em;
}
.medivalFonts{
    font-family: 'MedievalSharp', serif;
    text-decoration: none;
    margin: 0 0 1em 0em;
    text-shadow: 1px 1px 1px #979595;
    color: black;
    text-transform: uppercase;
}
.fontInChestArea{
    text-transform: uppercase;
    text-shadow: 1px 1px 1px black;
    color: wheat;
    font-family: fantasy;
    display: inline-grid;
    margin: 0px 5px 6px;
}
.memewarWrapText{
  text-shadow: 1px 1px 1px #000000;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: bold;
    display: block;
    color: #ffcc00;
    color: #e2c989;
    padding: 4px 0 0 0;
    margin: 0 auto;
    display: inline-block;

}
.challengeBtns{

}
.alignBelowScaleddownCard{
    top: 5em;
    z-index: 1;
    left: 7em;
    position: absolute;
    cursor: pointer;
}
.centeredOnBigCardFrame{
    width: 4em;
    position: absolute;
    top: 4.5em;
    left: 3em;
    cursor: pointer;
    
}
.sbcFinal {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    position: absolute;
    bottom: 15px;
    right: 30px;
  }
  .requirementsTopSbc {
    font-size: 20px;
    font-weight: bold;
    color: #f8e1a1;
    top: 3.75em !important;
    left: 0;
    width: 93px;
    background: linear-gradient(90deg, #062e2e8a, #0d5c768a);
    padding: 5px 8px;
    border: 1px solid wheat;
    border-radius: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px #5a3f2d;
    font-family: auto;
    text-align: center;
  }
  
  .requirementsTopSbc.pulsating {
    animation: pulse 1.5s infinite;
    border-color: #d4af37; /* Brighter gold when pulsating */
    box-shadow: 0 0 15px #d4af37, 0 0 25px rgba(212, 175, 55, 0.6);
  }
  .tropgyBAdge{
    width: 30px;
    height: 30px;
    cursor: pointer;
    transform: rotate(-45deg);
  }
  .trophyBadgesWrap{
    display: block;
    transform: rotate(45deg);
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: wheat;
    border: 2px outset #d608c7;
    filter: drop-shadow(0px 0px 2px);
    border-radius: 19%;
    margin: 1px 4px 6px;
    box-shadow: 0px 0px 0px 1px #000000;
  }
  .animationsOnCardWrap{
    position: absolute;
    top: 0;
    left: 0;
  }
  .enchantIconWrap{
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
  }
  .enchantIconWrap .Flying, .enchantIconWrap .NotFlying{
    top: -13px;
    right: -13px;
    position: absolute;
  }
  
  .specialPowerIconWrap{
    position: absolute;
    top: -1.5em;
    right: 0;
    height: 1em;
  }
  .enchantIconWrapHero{
    position: absolute;
    bottom: 0;
    left: 0;    
  }
  .enchantIconWrap img, .specialPowerIconWrap img{
    height: 1em;
    border-radius: 50%;
    border: 1px solid red;
    width: 1em;
  }
  .miniEnchantmentsOnHero{
    height: 1em;
    border-radius: 50%;
    border: 1px solid red;
    width: 1em;
  }
  .boosterCardsEnemy #airdropWrapper1{
    right: -23px;
    left: auto !important;
  }
  .boosterCardsEnemy #airdropWrapper2{
    right: -23px;
    left: auto !important;
  }
  @keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 10px #d4af37, 0 0 20px rgba(212, 175, 55, 0.5);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 20px #d4af37, 0 0 30px rgba(212, 175, 55, 0.7);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 10px #d4af37, 0 0 20px rgba(212, 175, 55, 0.5);
    }
  }
  .medieval-button {
    padding: 10px 20px;
    background-color: #6c4f36; /* Rich brown tone */
    color: #f8e1a1; /* Parchment-like text color */
    border: 2px solid #a67c52; /* Subtle golden border */
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Georgia', serif; /* Classic serif font for a medieval feel */
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* Depth */
    text-shadow: 1px 1px 2px #5a3f2d; /* Subtle text shadow */
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .medieval-button:disabled {
    background-color: #4d3b28; /* Muted brown for disabled state */
    border-color: #7a5e3f; /* Faded golden border */
    color: #b8a079; /* Faded parchment text */
    cursor: not-allowed;
    box-shadow: none;
  }
  
  .medieval-button:hover:not(:disabled) {
    background-color: #8b6843; /* Slightly brighter brown on hover */
    border-color: #d1a873; /* Brighter golden border */
    transform: translateY(-2px); /* Lift effect */
  }
  
  .medieval-button:active:not(:disabled) {
    background-color: #5d3f25; /* Darker brown on click */
    border-color: #b48b61; /* Subdued golden border */
    transform: translateY(0); /* Reset lift */
  }
  
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    max-height: 400px;
    background-color: #fff;
    border: 1px solid wheat;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1000;
    background: #232323 ;
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #3c4045;
    min-height: 5em;
    position: relative;
    border-bottom: 1px solid wheat;
  }
  .popup-header .h2Div{
    
    margin: 0 auto;
    position: relative;
    top: -20px;
  }
  .popup-content {
    padding: 10px 0;
    overflow-y: auto;
    max-height: 300px;
    color: #d1c8b7;
  }
  .popup-content .list-item{
    border-bottom: 1px solid wheat;
    padding-left: 8px;
  }
  .popup-footer {
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px solid #ccc;
    text-align: right;
  }
  .popup-header button {
    padding: 10px 20px;
    background-color: #6c4f36; /* A rich brown tone */
    color: #f8e1a1; /* Light parchment-like text color */
    border: 2px solid #a67c52; /* Subtle golden border for a medieval feel */
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Georgia', serif; /* Classic serif font for a medieval look */
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for depth */
    text-shadow: 1px 1px 2px #5a3f2d; /* Subtle text shadow for an engraved effect */
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .popup-header button:disabled {
    background-color: #4d3b28; /* Muted brown for disabled state */
    border-color: #7a5e3f; /* Faded golden border */
    color: #b8a079; /* Faded parchment text */
    cursor: not-allowed;
    box-shadow: none;
  }
  
  .popup-header button:hover:not(:disabled) {
    background-color: #8b6843; /* Slightly brighter brown on hover */
  border-color: #d1a873; /* Brighter golden border */
  transform: translateY(-1px); /* Lift effect */
  }
  
  .popup-header button:active:not(:disabled) {
    background-color: #5d3f25; /* Darker brown on click */
    border-color: #b48b61; /* Subdued golden border */
    transform: translateY(0); /* Reset lift */
  }
  
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .list-item:hover {
    background-color: rgb(60 58 58);
  }
  #terms-container li{
    list-style: none;
  }
#challengeOptions{
    position: relative;
    padding: 0 2em 13px;
    /* 
    top: 21em; 
    height: 22%;
    */
    background: #c7b288;
    border-radius: 3px;
    border: 1px solid black;
    overflow-y: auto;
    margin: 0 auto;
    width: fit-content;
}
.headWrap{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}
.popUpWrapperChallenges{
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
}
.popUpWrapperMissions{
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
}

.cartoonishHeader{
   height: 4.9em;
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 6px 12px;
}
.cartoonishHeaderLeft{
    height: 3.9em;
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 6px 12px;
    border-radius: 40px 40px 15px 15px;
    border-radius: 1px 69px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
}
.gradientHeader{
    display: inline-block;
    background: linear-gradient(to top, #a12505, #e0a81f, #ffe381);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: anton;
    overflow-y: auto;
    
   
}
.textHeadGuild{
    background: linear-gradient(to top, #a12505, #e0a81f, #ffe381);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px black);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: anton;
    overflow-y: auto;
}
.leaderBoardSectionGuildwars{
    background-image: url(images/skins/backgrounds/lbFrame.webp);
    background-size: 100% 100%;
     min-width: 55%;
    width: max-content;
    min-height: 15em;
    margin: 0 auto;
    transition: all 0.4s ease;
    overflow-y: auto;
}
.brownButn{
    
   background: linear-gradient(0deg, rgb(14 5 0), rgb(56 26 11), #b84304);
   background: linear-gradient(0deg, rgb(14 5 0), rgb(11 56 13), #23450b);
   border: 1px solid #a67c52;
    padding: 12px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
    color: #ffcc00;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}
.leaderBoardSectionframe{
    background-size: 100% 100%;

    
    width: -webkit-fill-available;
    padding: 50px 3% 0;
    min-height: 79vh;
    margin: 0 auto;
    overflow-y: auto;
}
.lbHeadTabs{
    padding: 32px 0px 4px;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    align-content: center;
}

.imgButtonWoodFrame{
    background-image: url(images/skins/woodFrame.webp);
    background-size: 100% 100%;
    /* border: none; */
    /* margin: 1em 2em; */
    /* font-size: 1.5em; */
    padding: 1em;
    cursor: pointer;
    display: inline-block;
}
.vaultOptions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
}
.midTextCard{
    background-image: url(images/skins/morphButtonStone.webp);
    background-size: 100% 100%;
    padding: 1em 2em;
}
.midTextCard2{
    background-image: url(images/skins/mergeButtonStone.webp);
    background-size: 100% 100%;
    padding: 1em 2em;
}
.midTextCardMorph{
    background-image: url(images/skins/morphButtonStone.webp);
    background-size: 100% 100%;
    padding: 2em 4em;margin: 2em auto 0;display: block;
    width: max-content;
}
.midTextCardMerge{
    background-image: url(images/skins/mergeButtonStone.webp);
    background-size: 100% 100%;
    padding: 2em 4em;margin: 2em auto 0;display: block;
    width: max-content;
}
.gameInfoBoxLobby{
    background: url(images/skins/backgrounds/woodFrame.webp);
    padding: 6px 0;
    background-size: 100% 100%;
    width: 200px;
    height: 64px;
    position: relative;
    top: -6px;
    font-family: fantasy;
    text-transform: uppercase;
    color: #fddb75;
    text-shadow: 1px 2px 0px black;
}
.vaultOptionsInner, .vaultOptionsInner2{
   display: grid;
    text-align: left;
    background: #0d524d;
    padding: 8px 1em 20px;
    border: 1px solid wheat;
    border-radius: 5px;
    font-size: 1.2em;
}
.marketTabCard{
    min-width: 3em;
    min-height: 7em;
    display: inline-block;
    border: 1px solid;
    padding: 1em;
    border-radius: 5px;
}
.marketTabCard:hover{
    box-shadow: 2px 2px 5px wheat;
    cursor: pointer;
}
.marketIconsWrap{
   background-color: #000;
    border: 1px solid wheat;
    padding: 1em;
    display: flex;
    width: fit-content;
    margin: 0 auto;
    gap: 15px;
}
.marketIcons{
        width: 16px;
    border-radius: 50%;
    border: 1px solid wheat;
    background: wheat;
    position: relative;
    top: 1px;
}
.logoTopMarket{
    top: 32px;
    position: relative;
}
.imgMarketLogo{
    position: relative;	
    width: auto;
    height: 8em;
    display: block;
    margin: 0 auto;
}


.vaultTokenIcon{
    width: 3em;
    position: absolute;
    left: 12px;
    top: 12px;
}
.vaultAndFarmWrap{
    border-radius: 18px;
    padding: 3px;
    margin: 6px;
    position: relative;
    height: 4.2em;
    background: #0000008f;
}
.vaultWrapping{
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}
.vaultWrapping li{
    padding: 4px 2px;
    margin: 4px 0;
    border-radius: 10px;
}
.vaultWrapping ul{
    background: #0a042170;
    padding: 6px;
    margin-top: 4em;
}
.labelVault{
    display: block;
}
.labelVaultInline{
    display: inline;
}
.vaultHeader{
    position: absolute;
    bottom: -2px;
    left: 12px;
}
.bigStat{
    font-size: 1.75em;
}
.stickerBadge{
    width: 2.5em;
    height: 2.5em;
    position: absolute;
    transform: rotateZ(-23deg);
    top: -12px;
    left: -15px;
}
.vaultStatsItem{
    padding: 3px;
    border-radius: 4px;
    text-shadow: 1px 1px 2px black, 1px 1px 1px black, 1px 2px 3px black;
    color: #dadada;
}
.vaultStatsWrap{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* max-width: 75%; */
    cursor: pointer;
        height: 4.2em;
    margin-left: 4em;
    
}
.vaultSetting{
    
    top: 5px;
    
    cursor: pointer;
    right: 5px;
    background: #671f6e;
    border-radius: 50%;
    color: #ffcc00;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    padding:5px 12px;
    min-width: 110px;
    border: 3px double #b400ff;
    box-shadow: 0px 0px 6px 0px cyan;
    border-radius: 12px;
    background: linear-gradient(0deg, #601b54, #8500c7, #2e2e2e);
}/* === base === */
button.raidButton,
button.farmOptionButton,
button.farmOptionButtonSacrifice {
  position: relative;
  min-width: 120px;
  padding: 10px 20px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: all 0.25s ease;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(4px);
}

/* shared inner glow core */
button.raidButton::before,
button.farmOptionButton::before,
button.farmOptionButtonSacrifice::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 150%, rgba(255,255,255,0.2), transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}
button:hover::before {
  opacity: 0.45;
}

/* === normal vaults / farms (green) === */
.farmOptionButton {
  background: linear-gradient(145deg, rgba(30, 255, 75, 0.25), rgba(10, 50, 20, 0.9));
  box-shadow: inset 0 0 8px rgba(0,255,100,0.3), 0 0 18px rgba(0,255,100,0.4);
  border: 1px solid rgba(0,255,100,0.3);
}
.farmOptionButton:hover {
  box-shadow: inset 0 0 12px rgba(0,255,140,0.6), 0 0 24px rgba(0,255,140,0.8);
  transform: translateY(-1px) scale(1.02);
}

/* === magic vaults (arcane purple) === */
.raidButton {
  background: linear-gradient(145deg, rgba(150, 80, 255, 0.3), rgba(40, 0, 80, 0.9));
  box-shadow: inset 0 0 10px rgba(190,100,255,0.4), 0 0 18px rgba(160,80,255,0.5);
  border: 1px solid rgba(200,100,255,0.4);
}
.raidButton:hover {
  box-shadow: inset 0 0 14px rgba(200,100,255,0.7), 0 0 26px rgba(180,120,255,0.9);
  transform: translateY(-1px) scale(1.03);
}

/* === blood farms (crimson) === */
.farmOptionButtonSacrifice {
  background: linear-gradient(145deg, rgba(255,60,60,0.35), rgba(60,0,0,0.9));
  box-shadow: inset 0 0 8px rgba(255,70,70,0.4), 0 0 18px rgba(255,50,50,0.5);
  border: 1px solid rgba(255,70,70,0.4);
}
.farmOptionButtonSacrifice:hover {
  box-shadow: inset 0 0 14px rgba(255,80,80,0.8), 0 0 26px rgba(255,60,60,0.9);
  transform: translateY(-1px) scale(1.03);
}

/* === shimmer aura === */
@keyframes pulseAura {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
button:hover {
  animation: pulseAura 1.6s ease-in-out infinite;
}

.magicTab{
    background: linear-gradient(0deg, #601b54, #8500c7, #2e2e2e);
    border:  1px solid #232323;
    opacity: 0.85;
}
.normalTab{
    background: linear-gradient(0deg, #1b601e, #00c734, #2e2e2e);
    border:  1px solid #232323;
    opacity: 0.85;
}
.farmTab{
    background: linear-gradient(0deg, #1b601e, #00c734, #2e2e2e);
    border:  1px solid #232323;
    opacity: 0.85;
}
.normalTab:hover, .normalTab:active, .magicTab:hover, .magicTab:active{
    opacity: 1;
}
.farmSacrificeTab{
    background: linear-gradient(0deg, #60211b, #c71a00, #5d0000);
    border: 1px solid #232323;
}
.farmAndVaultLogo{
    width: 4em;  
}
.farmAndVaultLogoWrap{
   position: absolute;
    top: 0;
    margin: 0 auto;
    height: 4em;
    background: wheat;
    border: 2px solid #8b5e3c;
    z-index: 1;
    border-radius: 10px 10px 0 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farmAndVaultLogoWrap button{
    background: linear-gradient(90deg, #2e1a10, #4a2818);
    
    border: 1px solid #a67c52;
    padding: 12px;
    min-width: 20%;
    border-radius: 8px;
    text-transform: uppercase;
    transition: 0.3s ease-in-out;
    color: #ffcc00;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}
.farmAndVaultLogoWrap .magicPurple{
    background: linear-gradient(0deg, #601b54, #8500c7, #2e2e2e) ;
} 
.farmAndVaultLogoWrap .sacrificialButn{
    background:  linear-gradient(0deg, #7a0606, #c70000, #b8a504);
}    
.farmAndVaultLogoWrap .normalGreen{
    background:  linear-gradient(0deg, #05450a, #0fb317, #4baf13);
}    

.buttonOptionsVaultFarm{
    padding: 5px 15px;
    border-radius: 9px;
    border: 1px solid #c1bfbf;
    color: #ffcc00;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0px 0px 4px 1px cyan;
    margin: 5px 0;
    min-width: fit-content;
}
.vaultOfFarmDetails{

}
.btnPurpler{
    background: linear-gradient(0deg, #601b54, #8500c7, #2e2e2e) ;
}
.btnGreenish{
    background: linear-gradient(0deg, #05450a, #0fb317, #4baf13) ;
}
.btnReddish{
    background:linear-gradient(0deg, #451805, #b3180f, #af1313) ;
}

.btnGreen{
    width:min-content;min-width:200px;background:linear-gradient(45deg, #184a32, #06431b) !important;
}
.btnRedYlw{
    width:min-content;min-width:200px;
    background: linear-gradient(0deg, #7a0606, #c70000, #b8a504) !important;
}
.btnBlueYlw {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #062c7a, #04a2b8, #0057c7) !important;
}
.btnGreener {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #05450a, #0fb317, #4baf13) !important;
}
.btnGreener2 {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #224505, #31b30f, #2b7a11);
}
.btnPurpleDark {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #601b54, #8500c7, #2e2e2e) !important;
}
.btnSandyBrown {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #451805, #b3670f, #af7e13) !important;
}
.btnReYellow {
    width: min-content;
    min-width: 200px;
    background: linear-gradient(0deg, #451805, #b3180f, #af1313) !important;
}
.messageVL{
    transform: translateY(72px);
    font-family: monospace;
    background: url(images/safeFrontMini.webp);
    background-size: 100% 100%;
    padding: 5px 10px;
    text-transform: uppercase;
    display: inline-block;
    min-width: 67%;
}
.dial{
    width: 35px;
    height: 35px;
    border: 1px solid #767272;
    border-radius: 50%;
    background-color: black;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow:0px 0px 0 1px #161616a6;
    user-select: none;
    transition: all 0.3s ease-out;
}
.wheels{
    display: flex;
    justify-content: center;
    gap: 12px;
    transform: translateY(70px);
}
.promoCardMakingWrap .playerIconsWrap{
    zoom: 0.75;
}
.promoCardMakingWrap #CardTargetArea{
        margin-bottom: -2em ;
}

.vaultFarmStats{
    position: absolute;
    left: 5px;
    top: 5px;
}
.farmAndVaultLogoWrapAddedTab{
    border-radius: 0 0 18px 18px;
    background: #0000008f;
    margin: 0px 6px 6px 6px;
    border-top: 1px solid #c1c0bf;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    /* maybe do a different style and alignment as this push me to have it align */
    padding: 10px 0px 10px 4em;
}
.safeButton{
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #343434;
    position: absolute;
    font-family: monospace;
    bottom: 52px;
    display: none;
    right: 0;
    text-transform: uppercase;
    BACKGROUND: linear-gradient(#1f1e1e, #5f5d5d, #1f1e1e);
    left: 0;
    font-size: 16px;
    cursor: pointer;
    color: #ffcc00;
    width: fit-content;
    margin: 0 auto;
}
.numbersCounter{
    padding: 2px 4px;
    background: #c1beb78f;/* a bit lighter glass like look but harer to see numbers..*/
    background: #5655558f;
    
    border-right: 1px solid black;
    border-radius: 2px;
}
.safeNumbers{
    background: url(images/safeFrontMini.webp);
    background-size: 100% 100%;
    padding: 5px 10px;
    color: #e4e4e4;
    text-shadow: 1px 1px black;
    font-size: 1.2em;
    position: absolute;
    top: 55px;
    margin: 0 auto;
    right: 0;
    left: 0;
    width: fit-content;
}
.messageIcon2, .messageIcon{
    display: inline-block;
    bottom: 0.25em;
    position: relative;
    right: 1em;
}
.messageIcon span, .messageIcon2 span{
    color: #ffffff;
    background: #004fb4;
    border: 1px solid #ebe2d0;
    cursor: pointer;
    border-radius: 50%;
    padding: 0px 3px;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: -1px;
    left: -5px;
}
.bigImageWrapper::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 10%;
    width: 80%;
    height: 100%;
    background: radial-gradient(circle, rgb(134 134 134 / 98%) 0%, rgb(122 122 122 / 94%) 70%);
    border-radius: 50%;
    filter: blur(55px);
    z-index: 0;
    animation:  smokeDrift  6s ease-in-out infinite;
    
}
/* ensure the viewport can host an overlay */
#viewPortMain { position: relative; overflow: hidden; }

/* shared base for the weather overlay */
#viewPortMain::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;                 /* above the background image, below UI */
  will-change: background-position, opacity, transform, filter;
}
/* ================= LIGHTER FOG / HAZE ================= */
#viewPortMain.fog::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;

  /* wider, more transparent horizontal haze bands */
  background-image:
    linear-gradient(to right, rgba(230,230,230,.15) 0%, rgba(230,230,230,0) 70%),
    linear-gradient(to right, rgba(210,210,210,.12) 0%, rgba(210,210,210,0) 65%),
    linear-gradient(to right, rgba(240,240,240,.10) 0%, rgba(240,240,240,0) 60%);
  background-size: 400% 35%, 300% 50%, 250% 70%;
  background-position: 0 25%, 0 55%, 0 75%;
  background-repeat: no-repeat;

  filter: blur(30px);
  opacity: .55;
  animation: fogLayersSoft 120s linear infinite;
}

@keyframes fogLayersSoft {
  0%   { background-position: 0 25%, 0 55%, 0 75%; }
  50%  { background-position: -200% 20%, -150% 60%, -100% 80%; }
  100% { background-position: 0 25%, 0 55%, 0 75%; }
}

/* bonus clarity on browsers that support backdrop blur */
@supports (backdrop-filter: blur(2px)){
  #viewPortMain.fog::before{ backdrop-filter: blur(2px) saturate(1.1); }
}

/* ================== STORM (lightning flashes) ================== */
/* ================== THUNDERSTORM ================== */
#viewPortMain.storm::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;

  /* dark stormy tint over the scene */
  background: rgba(0,0,0,0.3);
  opacity: 1;
  animation: stormDarken 10s linear infinite;
}

@keyframes stormDarken {
  0%, 100% { background: rgba(0,0,0,0.3); }
  50% { background: rgba(0,0,0,0.45); } /* pulses darker like cloud cover */
}


#mmLandPanel_Underworld,
#mmLandPanel_Shop{
    z-index: 2;
}
#mmLandPanel_1,
#mmLandPanel_2,
#mmLandPanel_3,
#mmLandPanel_4,
#mmLandPanel_5,
#mmLandPanel_6{
    z-index: 3;
}
.companion {
  display: inline-block;
  transform-origin: center bottom;
  will-change: transform;
  
  
  transform: scale(1.25);
  
  z-index: 3;
}



@media (prefers-reduced-motion: reduce) {
  .companion {
    animation: none !important;
    transform: scale(1.25) !important;
  }
}@keyframes companion-curious {
  0%   { transform: translate(0px, 0px) scale(1.25) rotate(0deg) scaleX(1); }
  4%   { transform: translate(1px,-1px) scale(1.24) rotate(0deg) scaleX(1); }
  8%   { transform: translate(2px,-1px) scale(1.24) rotate(0deg) scaleX(1); }
  12%  { transform: translate(3px,-2px) scale(1.23) rotate(-1deg) scaleX(1); }
  16%  { transform: translate(4px,-2px) scale(1.23) rotate(0deg)  scaleX(1); }
  20%  { transform: translate(5px,-3px) scale(1.22) rotate(-1deg) scaleX(1); }
  24%  { transform: translate(6px,-4px) scale(1.21) rotate(0deg)  scaleX(1); }
  28%  { transform: translate(6px,-4px) scale(1.21) rotate(-1deg) scaleX(1); }
  32%  { transform: translate(6px,-4px) scale(1.21) rotate(0deg)  scaleX(1); }
  36%  { transform: translate(6px,-4px) scale(1.21) rotate(1deg)  scaleX(1); }
  40%  { transform: translate(6px,-4px) scale(1.21) rotate(0deg)  scaleX(1); }
  44%  { transform: translate(5px,-3px) scale(1.22) rotate(-2deg) scaleX(-1); }
  48%  { transform: translate(4px,-2px) scale(1.23) rotate(0deg)  scaleX(-1); }
  52%  { transform: translate(3px,-2px) scale(1.23) rotate(1deg)  scaleX(-1); }
  56%  { transform: translate(2px,-1px) scale(1.24) rotate(0deg)  scaleX(-1); }
  60%  { transform: translate(0px, 0px) scale(1.25) rotate(-1deg) scaleX(-1); }
  64%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(-1); }
  68%  { transform: translate(0px, 0px) scale(1.25) rotate(-2deg) scaleX(-1); }
  72%  { transform: translate(0px, 0px) scale(1.25) rotate(1deg)  scaleX(-1); }
  76%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(-1); }
  80%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg) scaleX(1); }
  84%  { transform: translate(0px, 0px) scale(1.25) rotate(-1deg) scaleX(1); }
  88%  { transform: translate(0px, 0px) scale(1.25) rotate(1deg)  scaleX(1); }
  92%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
  96%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
  100% { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
}

@keyframes companion2 {
  0%   { transform: translate(0px, 0px) scale(1.25) rotate(0deg) scaleX(1); }
  4%   { transform: translate(-3px,-1px) scale(1.24) rotate(1deg)  scaleX(1); }
  8%   { transform: translate(-6px,-2px) scale(1.23) rotate(0deg)  scaleX(1); }
  12%  { transform: translate(-9px,-3px) scale(1.22) rotate(-1deg) scaleX(1); }
  16%  { transform: translate(-11px,-5px) scale(1.20) rotate(0deg) scaleX(1); }
  20%  { transform: translate(-12px,-6px) scale(1.18) rotate(1deg)  scaleX(1); }
  25%  { transform: translate(-12px,-6px) scale(1.18) rotate(0deg)  scaleX(1); }
  32%  { transform: translate(-8px,-10px) scale(1.15) rotate(0deg)  scaleX(1); }
  40%  { transform: translate(-2px,-13px) scale(1.12) rotate(-1deg) scaleX(1); }
  50%  { transform: translate(6px,-15px)  scale(1.10) rotate(0deg)  scaleX(-1); }
  60%  { transform: translate(-2px,-13px) scale(1.12) rotate(1deg)  scaleX(-1); }
  68%  { transform: translate(-8px,-10px) scale(1.15) rotate(0deg)  scaleX(-1); }
  72%  { transform: translate(-8px,-10px) scale(1.15) rotate(0deg)  scaleX(-1); }
  80%  { transform: translate(-12px,-6px) scale(1.18) rotate(0deg)  scaleX(-1); }
  100% { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
}

@keyframes companion3 {
  0%   { transform: translate(0px, 0px) scale(1.25) rotate(0deg) scaleX(1); }
  10%  { transform: translate(5px,-1px)  scale(1.23) rotate(0deg)  scaleX(1); }
  20%  { transform: translate(10px,-4px) scale(1.20) rotate(-1deg) scaleX(1); }
  30%  { transform: translate(8px,-10px) scale(1.12) rotate(0deg)  scaleX(-1); }
  40%  { transform: translate(0px,-8px)  scale(1.14) rotate(0deg)  scaleX(-1); }
  50%  { transform: translate(-8px,-10px) scale(1.12) rotate(0deg)  scaleX(-1); }
  60%  { transform: translate(-10px,-4px) scale(1.20) rotate(1deg)  scaleX(-1); }
  70%  { transform: translate(-5px,-1px) scale(1.23) rotate(0deg)  scaleX(-1); }
  80%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
  90%  { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
  100% { transform: translate(0px, 0px) scale(1.25) rotate(0deg)  scaleX(1); }
}

@keyframes idle {
  0%,100% { transform: translate(0px, 0px) scale(1.25) rotate(0deg) scaleX(1); }
}

@keyframes kitten-circle-right {
  0%   { transform: translate(0px, 0px)  scale(1.25) rotate(0deg) scaleX(-1); }
  4%   { transform: translate(-1px,-1px) scale(1.24) rotate(-1deg) scaleX(-1); }
  8%   { transform: translate(-2px,-2px) scale(1.23) rotate(0deg)  scaleX(-1); }
  12%  { transform: translate(-4px,-3px) scale(1.22) rotate(-2deg) scaleX(-1); }
  16%  { transform: translate(-6px,-5px) scale(1.20) rotate(0deg)  scaleX(-1); }
  20%  { transform: translate(-8px,-6px) scale(1.18) rotate(-3deg) scaleX(-1); }
  22%  { transform: translate(-9px,-11px) scale(1.16) rotate(-8deg) scaleX(-1); }
  25%  { transform: translate(-10px,-8px) scale(1.17) rotate(0deg) scaleX(-1); }
  28%  { transform: translate(-12px,-9px) scale(1.16) rotate(1deg)  scaleX(-1); }
  32%  { transform: translate(-14px,-10px) scale(1.15) rotate(-1deg) scaleX(-1); }
  36%  { transform: translate(-16px,-11px) scale(1.14) rotate(0deg)  scaleX(-1); }
  40%  { transform: translate(-18px,-12px) scale(1.13) rotate(2deg)  scaleX(-1); }
  44%  { transform: translate(-21px,-13px) scale(1.12) rotate(0deg)  scaleX(-1); }
  48%  { transform: translate(-23px,-14px) scale(1.11) rotate(-1deg) scaleX(-1); }
  50%  { transform: translate(-25px,-15px) scale(1.10) rotate(0deg) scaleX(1); }
  52%  { transform: translate(-23px,-14px) scale(1.11) rotate(1deg)  scaleX(1); }
  56%  { transform: translate(-21px,-13px) scale(1.12) rotate(0deg)  scaleX(1); }
  60%  { transform: translate(-18px,-12px) scale(1.13) rotate(-2deg) scaleX(1); }
  64%  { transform: translate(-16px,-11px) scale(1.14) rotate(0deg)  scaleX(1); }
  68%  { transform: translate(-14px,-10px) scale(1.15) rotate(2deg)  scaleX(1); }
  72%  { transform: translate(-12px,-9px)  scale(1.16) rotate(0deg)  scaleX(1); }
  75%  { transform: translate(-9px,-11px) scale(1.18) rotate(-6deg) scaleX(1); }
  78%  { transform: translate(-8px,-5px)  scale(1.19) rotate(0deg)  scaleX(1); }
  82%  { transform: translate(-6px,-4px)  scale(1.20) rotate(1deg)  scaleX(1); }
  86%  { transform: translate(-4px,-2px)  scale(1.22) rotate(0deg)  scaleX(1); }
  90%  { transform: translate(-2px, 0px)  scale(1.23) rotate(-2deg) scaleX(1); }
  95%  { transform: translate(-1px, 1px)  scale(1.24) rotate(0deg)  scaleX(1); }
  100% { transform: translate(0px, 0px)   scale(1.25) rotate(0deg)  scaleX(1); }
}



/* =================== SANDSTORM (sideways dust + haze) ====================== */
#viewPortMain.sandstorm::before{
  /* BIG moving haze + two dusty particle fields */
  background-image:
    radial-gradient(130% 60% at -10% 80%, rgba(214,182,126,.26) 0%, rgba(214,182,126,0) 70%),  /* near haze */
    radial-gradient(120% 50% at 110% 70%, rgba(198,164,112,.22) 0%, rgba(198,164,112,0) 72%),  /* far haze */
    radial-gradient(circle, rgba(219,186,130,.45) 1.2px, transparent 1.2px),                    /* dust field A */
    radial-gradient(circle, rgba(219,186,130,.30) 1px,   transparent 1px);                      /* dust field B */
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 200% 120%, 220% 120%, 170px 120px, 260px 180px;
  background-position: 0% 90%, 100% 75%, 0 0, 80px -40px;

  /* warm tint near ground for that desert choke */
  box-shadow: inset 0 -14vh 22vh rgba(201,160,96,.38);
  filter: blur(.3px) saturate(1.05);
  opacity:.9;

  animation: sand_drift 18s linear infinite;
}
@keyframes sand_drift{
  0%   { background-position: 0% 90%,  100% 75%, 0   0,   80px -40px; }
  100% { background-position: 140% 88%, -40% 78%, 900px 0, 1400px -60px; }
}

/* ============================ SNOW (kept) ================================== */
#viewPortMain.snow::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.7) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 150px 150px, 250px 250px, 400px 400px;
  background-repeat: repeat;
  animation: snow_fall 15s linear infinite;
}
@keyframes snow_fall{
  from { background-position: 0 -200px, 0 -250px, 0 -400px; }
  to   { background-position: 50px 600px, 80px 800px, 100px 1000px; }
}

.bigImageWrapper .bigImage {
    filter: drop-shadow(0 0 14px #e8e1d0c9);
}
@keyframes smokeMove {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.9;
    }
    25% {
        transform: translate(-5px, -5px) scale(1.05) rotate(1deg);
        opacity: 0.85;
    }
    50% {
        transform: translate(5px, -10px) scale(1.1) rotate(-1deg);
        opacity: 0.8;
    }
    75% {
        transform: translate(-5px, -15px) scale(1.05) rotate(2deg);
        opacity: 0.85;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.9;
    }
}

@keyframes smokeDrift {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.9;
    }
    20% {
        transform: translate(-15px, -20px) scale(1.1) rotate(2deg);
        opacity: 0.85;
    }
    40% {
        transform: translate(20px, -25px) scale(1.15) rotate(-3deg);
        opacity: 0.8;
    }
    60% {
        transform: translate(-10px, -30px) scale(1.1) rotate(1deg);
        opacity: 0.85;
    }
    80% {
        transform: translate(10px, -15px) scale(1.05) rotate(-2deg);
        opacity: 0.88;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.9;
    }
}
.vaultTabHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  margin-bottom: 8px;
}

.vaultTokenInfo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vaultTokenIconBig {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.vaultTokenName {
  font-weight: bold;
  color: #f3c23d;
  font-size: 1.2em;
}

.tokenLink {
  color: #89b9ff;
  font-size: 0.8em;
  text-decoration: none;
}
.tokenLink:hover {
  text-decoration: underline;
}

.vaultTypeBadge {
  background: linear-gradient(90deg,#6e00ff,#b700ff);
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.9em;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(150,0,255,0.4);
}

.vaultStatsGrid {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

.statBlock {
  text-align: center;
  color: #fff;
}

.labelSmall {
  font-size: 0.8em;
  opacity: 0.8;
}

.valueLarge {
  font-size: 1.3em;
  font-weight: bold;
  color: #f3c23d;
}

.vaultActions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.vaultDescNote {
  text-align: center;
  font-size: 0.85em;
  margin-top: 8px;
  opacity: 0.9;
}

.selectedListItem{
     background: #e28a06 !important;
        color: #2a2a2a;
        text-shadow: none;
        cursor: pointer;
}
.listTab{
   min-height: 24px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    justify-content: center;
}
.listTab:hover{
    background: #d1aa68;
    color: #2a2a2a;
    text-shadow: none;
    cursor: pointer;
}
.listTabWrap{
    background: #545143;
    max-height: 10em !important;
    border-radius: 2px !important;
    width: 70%;
    margin: 1em auto;
    padding: 0px !important;
    color: wheat;
    overflow-y: auto;
}
.vault{
    background: url(images/safeFront.webp);
    background-size: 100% 100%;
    /* border: 6px solid gold; */
    border-radius: 0;
    padding: 25px 20px;
    text-align: center;
    box-shadow:0px -3px 0px 3px rgb(60 60 60 / 78%);
    /* box-shadow: 0 0 25px rgba(255, 255, 0, 0.4); */
    display: inline-block;
    height: 12em;
    width: 10em;
    position: relative;
    bottom: 0;
}
.logoTopMarket .vault{
    bottom: 2.5em;
}
.logoTopMarket .safeButton{
    display: inline-block;
}
/* Container for all guilds */
#guildShowcaseContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    overflow-x: hidden;
    padding: 10px;
}

.guildBtn{
    background: linear-gradient(0, #2c3f42, #293c3d, #001730);
    color: #f8d9b4;
    border: 2px solid #8b5a2b;
    border-radius: 5px;
    /* width: 1em; */
    text-transform: uppercase;
    padding: 8px;
    right: 2em;
    font-weight: bold;
    cursor: pointer;
}

.guildBtnWrap{
    color: #f8d9b4;
    right: -2px;    
    z-index: 11;
    width: 35px;
    position: relative;
    height: 35px;
    border: 1px solid #8a4f1a;
    padding: 2px;
    background: radial-gradient(circle, #5a1a1ac4, #300000cf);
    cursor: pointer;
    border-radius: 50%;
}
/* Each guild card as a mini tavern/wooden board */
.class-new-guildCard {
    width: 280px;
    height: fit-content;
    background: url('images/OpenBook.webp'); /* wood texture image */
    background-size: 100% 100%;
    border: 4px solid #8B5A2B;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 12px;
    color: #f0e6d2;
    font-family: 'Cinzel', serif; /* medieval tavern feel */
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
}

.righInBook{
    transform: rotate(-2deg);
    position: absolute;
    right: 40px;
}

/* Header: guild name + faction + settings/airdrop icons */
.class-new-guildHeader {
    display: flex;
    justify-content: space-between;.righInBook{
        text-align: right;
    }
    align-items: center;
}

.class-new-guildTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    bottom: 8px;
    left: 4px;
}

.class-new-guildName {
    font-weight: bold;
    font-size: 18px;
    color: #FFD700; /* gold-ish text */
}

/* Faction icons */
.class-new-factionIcon {
    width: 24px;
    height: 24px;
}

/* Settings/Airdrop icons */
.class-new-guildIcons {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Description / info */
.class-new-guildDescription {
    font-size: 14px;
    line-height: 1.3;
    color: #f5f1e6;
    background-color: rgba(0,0,0,0.2);
    padding: 6px 0;
    border-radius: 6px;
    font-family: system-ui;
    font-style: italic;
}
/* Medieval/Fantasy Guild Search Input */
.guildBox #guildSearchInput {
    font-family: 'Cinzel', 'Garamond', serif; /* fancy serif for medieval vibe */
    font-size: 16px;
    color: #3b2e1a; /* dark brown text */
    background: wheat;
    
    border: 3px solid #7a5230; /* carved wood border effect */
    border-radius: 8px;
    padding: 10px 15px;
    width: 220px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.2);
    outline: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}

.guildBox #guildSearchInput::placeholder {
    color: #a78b5d; /* parchment/aged paper tone */
    font-style: italic;
}

.guildBox #guildSearchInput:focus {
    border-color: #8b5a2b; /* gold highlight when focused */
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4), 0 0 8px rgba(212,175,55,0.6);
}


/* Booster section */
.class-new-boostSection {
    display: flex;
    gap: 4px;
    margin: 9px 45px 9px 45px;
    flex-wrap: wrap;
    justify-content: flex-start;
    left: 0;
    top: -9px;
    position: relative;
}

/* Stats section */
.class-new-guildStats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    left: 20px;
    top: -10px;
    transform: rotate(1deg);
    position: relative;
}

.class-new-statBox {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Join button */
.class-new-joinButton {
    background: #8B5A2B;
    color: #FFF7E6;
    border: 2px solid #5C3A21;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6px;
    width: -webkit-fill-available;
    transition: background 0.2s ease;
}

.class-new-joinButton:hover {
    background: #A67C52;
}

.uwScroll{
    background: url(images/icons/burnedScroll.webp);
    background-size: 100% 100%;
    padding: 24px 24px 10px;
    transition: 0.3s ease-in-out;
    color: #ffcc00;
    border: none;
    font-weight: bold;
    font-size: 20px;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    
}
.mainMEnu li{
    cursor: pointer;
}
.btnWrapFlex{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    /* height: 100%; */
    position:absolute;
    gap:12px;
    bottom: 4%;
    width: 100%;
}
.styleUserInventoryBottom{
    background: rgb(28 36 10);
    bottom: 0;
    left: 0;
    right: 0;
    /* width: 100%; */
    padding: 5px 0;
    display: inline-block;
    min-height: auto;
}
.ownedItemsWoodBoard{
    text-align: left;
    background: url(images/skins/woodFrame.webp);
    margin: 0 auto;
    padding: 1em 1.75em;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    width: max-content;

}
.styleUserInventoryBottom span{
    color: wheat;
    border-color: #783607;
    text-shadow: 1px 1px 1px black;
    font-family: anton;
    padding: 0 8px;
}
.ticker-container{
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
}
.ticker-content{
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;

}
.tokenWrappers{
    color:wheat;
    border: 2px solid #8b5e3c !important;
    font-family: anton;
}
.wheatBox{
        font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    text-shadow: 1px 1px #a67c52;
    background: #e6d1ab;
    color: #1f1f1f;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid black;
}
.marketWrapper{
    position: absolute;
    background: rgb(28 36 10);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 5px 0;
    display: inline-block;
    border-bottom: 2px solid #8b5e3c;
    min-height: auto;
    border-top: 2px solid #8b5e3c;
    border-radius: 0;
}
.Banking{
    display: flex;
    align-items: center;
    justify-content: center;
    zoom: 0.75;
}
.preorderHeaderSEction{
  font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    text-shadow: 1px 1px #f2b45f;
    color: #131312;
    transition: all 1s ease;
}
.oreOrderSection{
  font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    text-shadow: 1px 1px #f2b45f;
    color: #131312;
    background-color: #f5deb363;
    padding: 2em 1em;
    transition: all 1s ease;
    border-radius: 4px;
}
.oreOrderSection:hover, .oreOrderSection:active{

    background-color: wheat;
}
.insideWoodFrame{
    font-family: fantasy;
    color: wheat;
    text-shadow: 1px 1px 1px #4d2600;
    margin: 5px;
    font-size: 2em;
}
.imgButton{
    background-image: url(images/skins/morphButtonStone.webp);
    background-size: 100% 100%;
    /* border: none; */
    /* margin: 1em 2em; */
    /* font-size: 1.5em; */
    padding: 1em;
    width: 6em;
    height: 4em;
    display: inline-block;
}
.lbBottomTabs{
        padding: 0 0 8px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    /* width: 100%; */
    height: 2em;
    align-content: center;
    z-index: 1;
    right: 1px;
    position: absolute;
    bottom: 0px;
}
.guildLbLi{
    position: relative;
    background: rgb(36, 21, 10);
    top: 48px;
    width: 92%;
    margin: 0 0em 0 4%;
}
.rewardSection{
    display: inline-block;
    background-image: url(images/skins/backgrounds/rewardsFrame.webp);
    background-size: 100% 100%;
    min-width: 48%;
    width: max-content;
    min-height: 11em;
    transition: all 0.4s ease;
}
.bgImgWithText{
    display: inline-block;
    background-image: url(images/skins/emptyFrame.webp);
    background-size: 100% 100%;
    padding: 14px 28px 12px;
    margin: 0 auto;
}
.imgHeader{
    height: 4em;
    display: block;
    margin: 0 auto;
    width: max-content;

}

.rushChallengeIcon{

    position: absolute;
    cursor: pointer;
    right: -8px;
    bottom: 0em;
    width: 1.5em;
}
.finishChallengeIcon{
    width: 4em;
    display: inline-block;
    position: absolute;
}
#openChestButton, #openMoreChestButton, #openLessChestButton{
    cursor: pointer;
}
#openChestButton:active, .finishChallengeIcon:active, #openMoreChestButton:active, #openLessChestButton:active{
    scale: 0.9;
}
.trophyHeaders{
    text-transform: uppercase;
    text-shadow: 1px 1px 1px black;
    color: wheat;
    font-family: fantasy;
    max-width: 4em;
}
.trophyWrappers{
    display: inline-block;
    margin: 0 10px;
}
.shelfWrap{
    display: inline-block;
    margin: 5PX auto 2PX;
    padding: 0.75em 0.5em;
    background: #8fd8fb4f;
    background-size: 100% 100%;
    border-radius: 0 0 50% 50%;
    border: 2px solid #5b5852;
    BOX-SHADOW: 0PX 1PX 2PX 2PX BLACK;
}
.footOptions {
    margin: 0 20px;
    padding: 10px 0;
    display: inline-block;
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.iconInListDrop{
    max-height: 14px;
}
#CardTargetArea .miniCardViewer{
    display: inline;
}
#CardTargetArea{
    margin-bottom: -3em;
}

.step-tab-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#wrapRankCost{
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
}
.nftTokenDropdown{
    position: absolute;
    background: #323232;
    border: 1px solid rgb(204, 204, 204);
    width: 94%;
    max-height: 86px;
    overflow-y: auto;
    z-index: 1000;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.h3HeaderReplacer{
    color: #e5b804;
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.nft-option{
    text-align: right;
    padding-right: 10px;
    border-bottom: 1px solid wheat;
    cursor: pointer;
    background-color: #323232;
}
.nft-option:hover{
    background-color: #232323;
}
.skinnyMedievalButton{
    background: linear-gradient(90deg, #2e1a10, #4a2818);
    border: 1px solid #a67c52;
    padding: 2px 4px;
    border-radius: 4px;
    transition: 0.3s ease-in-out;
    color: #d4af7a;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer
}
.step-tab {
    width: 40px;
    height: 40px;
    background-color: #444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}
.step-tab:hover {
    background-color: #666;
}
.step-line {
    width: 40px;
    height: 4px;
    background-color: #888;
}
.step-tab.active {
    background-color: #ffcc00;
    color: black;
}
.step-line.active {
    background-color: #ffcc00;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.lightHeader{
    color: #ffeec3;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.rankOptionsnft label{
    display: block;
}
.footOptions span {
    
    font-size: 16px;
    font-weight: bold;
    display: block;
    color: #c9b37a;
    padding: 4px 0 0 0;
    cursor: pointer;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
    position: relative;
}
.footOptions div{
    color: #ffeec3;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-indent: 8%;
    margin: 0 0 5px 0;
}
.footOptions span:hover {
    color: #c9c8c6;
    text-shadow: 0 0 8px gold; /* Glowing effect */
}

#popUpWrapperUsersChests{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(-0%, -0%);
    background: url("images/skins/gameBoards/chestBg1.webp") 0% 0% / 100% 100%;
    background-size: 100% 100% !important;
    border: 3px solid black;

}
#popUpWrapperUsersTrophies{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding:0;
    overflow: auto;
    transform: translate(-0%, -0%);
    background: linear-gradient(122deg, #000000, #003364, #000000);
    background: url("images/skins/gameBoards/trophies.webp") 0% 0% / 100% 100%;
    background-size: 100% 100% !important;
    border: 3px solid black;
}
.popUpWrapper2 {
    transition: all 1s ease;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(images/woodFrame2.webp);
    background-size: 100% 100% !important;
        background: linear-gradient(122deg, #000000, #2e2e2e, #000000);
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;
        border: 1px solid wheat;
    padding: 20px 20px 50px 20px;
    font-family: "MedievalSharp", cursive;
    text-align: center;
    
    border: 4px solid #7a5230;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.popUpWrapper input:not([type="checkbox"]):not([type="radio"]),
.popUpWrapper select,
.popUpWrapper textarea {
  font-family: 'Cinzel', 'Garamond', serif;
  font-size: 16px;
  color: #f8e8c0;
  background: linear-gradient(180deg, #2b1e0e 0%, #1a1208 100%);
  border: 2px solid #d6b273;
  border-radius: 8px;
  padding: 8px 14px;
  width: 90%;
  letter-spacing: 0.5px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}
.popUpWrapper input[type="checkbox"] {
  accent-color: #d6b273; /* modern browsers */
  transform: scale(1.2);
  cursor: pointer;
}
.battle-modal{
    z-index: 25 !important;
}
.helperMentorMorph .backButton {
  position: absolute;
  top: 6px;
  right: 10px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f7e2b4;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s
}
.hubPlayer {
  transition: left 0.25s ease, top 0.25s ease;
  border-radius: 50%;
}
#mmLandPanel_MetaMorphis{
    z-index: 2;
}
#market-list{
    margin-bottom: 1.5em;
}

/* Hover / focus glow */
.popUpWrapper input:focus,
.popUpWrapper select:focus,
.popUpWrapper textarea:focus {
  outline: none;
  border-color: #ffdc73;
  box-shadow:
    0 0 8px rgba(255, 220, 115, 0.3),
    inset 0 2px 6px rgba(255, 220, 115, 0.2);
  background: linear-gradient(180deg, #3b2a13 0%, #1a1208 100%);
}

/* Disabled input state */
.popUpWrapper input:disabled {
  opacity: 0.6;
  background: #2a2a2a;
  border-color: #555;
}

/* Label styling */
.popUpWrapper label {
  display: block;
  font-family: 'Cinzel', serif;
  color: #ffdc73;
  font-size: 15px;
  text-align: left;
  margin: 8px 0 3px 5%;
  text-shadow: 0 0 6px rgba(255, 220, 115, 0.2);
}
.popUpWrapper button {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.6px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.popUpWrapper button.confirmBtn {
  background: linear-gradient(180deg, #47b34a 0%, #256a28 100%);
  border-color: #3adb45;
  color: #fff;
}
.popUpWrapper button.confirmBtn:hover {
  background: linear-gradient(180deg, #5aff5f 0%, #268e2a 100%);
  box-shadow: 0 0 10px rgba(70, 255, 120, 0.6);
}

.popUpWrapper button.cancelBtn {
  background: linear-gradient(180deg, #c83c3c 0%, #611c1c 100%);
  border-color: #ff6969;
  color: #fff;
}
.popUpWrapper button.cancelBtn:hover {
  background: linear-gradient(180deg, #ff5555 0%, #832020 100%);
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.5);
}
.popUpWrapper {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px 50px 20px;
  text-align: center;
  font-family: "MedievalSharp", cursive;

  /* === Base look (yours, but cleaner layering) === */
  background: radial-gradient(circle at top center, #1a1a1a 0%, #0c0c0c 100%);
  background-blend-mode: overlay;
  border: 3px solid #7a5230;
  border-radius: 12px;

  /* === Depth and polish === */
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 0 -1px 4px rgba(255, 200, 130, 0.05);

  /* === Subtle glowing edges === */
  outline: 1px solid rgba(255, 220, 150, 0.2);
  outline-offset: -2px;

  /* === Subtle entry animation === */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  animation: popupFadeIn 0.25s ease-out forwards;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
        right: -50%;
  }
  to {
        right: 0%;
    opacity: 1;
  }
}

.popUpWrapperMiniMarket {
    transition: all 1s ease;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    min-width: 95.25%;
    transform: translate(-50%, -50%);
    background: url(images/woodFrame2.webp);
    background-size: 100% 100% !important;
        background: linear-gradient(122deg, #000000, #2e2e2e, #000000);
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;
        border: 1px solid wheat;
        
    font-family: "MedievalSharp", cursive;
    text-align: center;
    
    border: 4px solid #7a5230;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.styleInput{
        font-family: 'Cinzel', 'Garamond', serif;
    font-size: 16px;
    color: #3b2e1a;
    background: wheat;
    border: 3px solid #7a5230;
    border-radius: 8px;
    padding: 5px 15px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}
.medievalInput option{
    cursor: pointer;
}
.nameSetOnWood{
    position: relative;
    z-index: 999;
    max-height: 19px;
    transition: all 0.15s ease;
    filter: drop-shadow(0px 0px 1px wheat);
    background-image: url(images/skins/woodButtonEmpty.webp);
    background-size: 100% 100%;
    color: rgb(255, 228, 148);
    font-size: 0.33em;
    display: inline-block;
    max-height: 14px;
    min-width: 76px;
    padding: 5px 0;
    top: -6px;
    letter-spacing: 0.02em;
    font-family: anton;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    text-align: center;
}

.registerAndNameOnWood{
    font-size: 2em; 
}   
.playerImageBadgeLeft{
    width: 5em;
    height: 5em;
    position: absolute;
    left: -1.5em;
    top: -2.5em;
    transform: translate(4px, 10px);
}
.playerImageRankInsideBadge{
    width: 3.5em;
    height: 3.5em;
    position: absolute;
    left: -0.75em;
    top: -1.75em;
    transform: translate(4px, 10px);
    z-index: 1;
}

.progWRap{
    margin: 15px 20px;
    
    position: relative;
}
.progWRap .playerProgBars:first-of-type {
    max-width: 94%;
    left: 3%;
}
.shareButton img:hover{
    cursor: pointer;
    scale: 1.1;
    box-shadow: 0px 0px 4px 1px wheat;
    border-radius: 3px;
    transition: all 0.4s ease;
}
.gridWrapthreebythree{
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    padding: 0 10px 0 0;
}
.sliding-to-hide{
    transition: all 2s ease !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translate(100%, 0px) !important;
    left: auto !important;

}
.slidingToView{
    transition: all 2s ease;
    min-width: 40%;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    transform: translate(0, 0px);
    
  animation: slideIn 0.25s ease-out forwards;
}
.shareButton img{
    top: 2px;
    right: -2px;
    position: relative;
    width: 20px; height: 20px;
}
.rankCardHeader{
    COLOR: WHEAT;
    text-shadow: 1px 1px 0px black;
    font-family: 'ANTON';
    POSITION: RELATIVE;
    top: -0.25em;
}
.playerWrapBadge{
    width: 16em;
    position: relative;
    display: inline-block;

}
.amountInsideXpBar{
    position: absolute;
    font-size: 16px;
    display: inline-block;
    text-align: right;
    right: 10px;
    z-index: 1;
    top: 4px;
    text-shadow: 1px 1px 0 BLACK;
    color: #e7e1db;
}
.topLeftOnBar{
   
    position: absolute;
    height: 1em;
    display: inline-block;
    min-width: 1em;
    text-align: left;
    left: 4px;
    z-index: 1;
    top: -15px;
    color: wheat;
    text-shadow: 1px 1px 0px black;
/*
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    font-size: 1.05em;
    background: linear-gradient(180deg, #3a1a00 0%, #1f0c00 40%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: -1px -1px 0 #785800, 0 1px 2px #000000, 0 0 0px #000000;
*/
    
}
#userTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
      top: -4px;
position: relative;
  padding: 10px 12px;
  background: linear-gradient(180deg, #3a1a00, #1a0a00);
  border-bottom: 2px solid #a6771a;
  border-radius: 0;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
  font-family: "Cinzel", serif;
  color: #ffdf73;
  text-shadow: 1px 1px 2px #000;
}

#userTopBar img {
  height: 2em;
  width: 2em;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid #7a4800;
  background: radial-gradient(circle at center, #3a1a00, #000);
  box-shadow: 0 0 6px rgba(255,200,80,0.25);
}
.tokenBalances {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin: 6px 0 10px;
}

.tokenBar {
   position: relative;
  
  height: 26px;
  background: linear-gradient(180deg, #2b1600 0%, #1a0d00 100%);
  display: inline-block;
width: 32%;
  border: 1px solid #704a1c;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.8),
    inset 0 -1px 2px rgba(255,200,80,0.2);
  padding-left: 32px;
  margin: 4px auto;
  font-family: 'Cinzel', serif;
  color: #ffdf73;
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 1px 1px 1px #3a1a00;
   background: radial-gradient(circle at 30% 30%, #3b1d00, #120700);
  border: 1px solid #8c6b28;
  box-shadow:
    0 0 3px rgba(255, 210, 100, 0.3),
    inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tokenBar:hover {
  filter: brightness(1.1);
  box-shadow:
    inset 0 0 0 1px #fff2b3,
    0 0 8px rgba(255,200,80,0.4);
}

.tokenIconNewer {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 18px;
  filter: drop-shadow(0 1px 1px #2c2c2c);
}

.tokenAmount {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.user-left, .user-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

#usersNameInProfileView, #userAcntInfo {
  font-weight: 700;
  font-size: 0.95em;
}

.playersNumbers{    
    right: 1em;
    top: -15px;
    position: absolute;
    font-family: anton;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 black;
    color: #e7e1db;
}
.wrapAgain{
    background-image: url(images/woodFrame2.webp);
    background-size: 100% 100%;
    padding: 1em;
    display: inline-block;
    opacity: 1;
    height: 19em;
    display: inline-block;
    border: 2px solid wheat;
    border-radius: 15px;
    box-shadow: 0 0 0 2px black;
}
.playerProgBars{
    margin: 0em 0 1.5em;
    position: relative;
}
.medievalButton{ 
    margin: 1em auto 0;
    padding: 10px 20px;
    background-color: #8b5a2b;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    border: 3px solid wheat;
    box-shadow: 0 0 0px 1px black;
    font-family: 'MedievalSharp', serif;
}
.holderText{
    color: white;
    font-size: 14px;
    margin-bottom: 0px;
    font-family: auto;
}
.medievalInput{
    


    font-family: 'Cinzel', 'Garamond', serif;
    font-size: 16px;
    color: #3b2e1a;
    background: wheat;
    border: 3px solid #7a5230;
    border-radius: 8px;
    padding: 5px 15px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}
.imgBtmLeft{
    opacity: 1;
    position: absolute;
    bottom: 0em;
    left: 0em;
    width: 4em !important;
    height: 1.5em;
    border: none !important;
    box-shadow: none !important;
    transform: rotate(39deg) translate(-10px, -5px);
}
.priceWraps{
        bottom: 100%;
        background-size: 100% 100%;
        /* background-image: url(images/skins/nameBannerPaper.webp); */
        left: 0;
        right: 0;
        position: absolute;
        height: 1.8em;
}
.priceText{
    font-family: fantasy;
    color: #4d2600;
    text-shadow: 1px 1px 1px wheat;
    margin: 5px;
}
.imgTopRight{
    opacity: 1;
    position: absolute;
    top: 0em;
    right: 0em;
    text-shadow: 1px 1px 1px black;
    padding: 2px 0px 0px 0px;
    color: #ffffff;
    width: 4em !important;
    background-size: 100% 100%;
    background-image: url(images/skins/nameBannerPaper.webp);
    height: 1.5em;
    border: none !important;
    box-shadow: none !important;
    transform: rotate(39deg) translate(11px, -9px);
}
.magic-header {
    font-family: 'Uncial Antiqua', serif; /* Medieval-style font */
    font-size: 32px; /* Adjust to your needs */
    color: #4d2600; /* Dark brown, medieval ink-like text color */
    text-shadow: 2px 2px 0px #d8be9463, 4px 4px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
  }
  .magic-subheader{
    margin: 0 0 22px;
    font-family: 'Uncial Antiqua', serif; /* Medieval-style font */
    font-size: 16px; /* Adjust to your needs */
    color: #4d2600; /* Dark brown, medieval ink-like text color */
    text-shadow: 2px 2px 0px #d8be9463, 4px 4px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
  }
  .collectionWrapInfo{
    background-image: url(images/woodFrame2.webp);
    background-size: 100% 100%;
    padding: 3em 3em 0;
    width: 12em;
    height: 8em;/*Adjust height with more items*/
    position: relative;
    display: inline-block;
    top: 0em;
  }
  .otherThings{
    text-align: right;
    display: inline-block;
    position: absolute;
    width: max-content;
    right: -1.75em;
  }
  .thingSelect{
    position: relative;
    font-family: anton;
    color: wheat;
    text-transform: uppercase;
    top: -0.95em;
    display: block;
    left: -0.5em;
    text-align: left;
  }
  .mintPackWrap, .mintPackWrap2{
    display: inline-block;
    margin: 2em auto 0;
  }
.iconArrows{
    border-radius: 50%;
    width: 20px;
    position: relative;
    top: 7px;
    height: 20px;
    border: 2px solid #8a4f1a;
    padding: 2px;
    background: radial-gradient(circle, #5a1a1a, #300000);
}
.iconRectangles{
    height: 1.75em;
    top: 7px;
    margin: 0 5px;
    position: relative;
    cursor: pointer;
}
.iconArrows:hover{
    border:2px solid wheat;
    cursor:pointer;
}
.iconArrows:active, .iconRectangles:active, #confirmMintOrBuy:active{
    scale:0.9;
}
.totCostWrap{
    display: block;
    font-family: anton;
    text-shadow: 2px 2px 0px black;
    color: #fafbdf;
    text-transform: uppercase;
    font-size: 1.2em;
}
.checkoutCartBtnWrapper{
    position: absolute;
    bottom: 8em;
    left: 0;
    right: 0;
}
.rotatedCard{
    transform: rotateY(-90deg) !important;
    transition: all 1s ease;
    
}
.nftWhiteBoosterCard .microCardViewer{
    display: inline-block;
    transform: translate(-4px, -2px);
    position: absolute;
    top: -3px;
    left: 0px;
    max-height: 10em;
    max-width: 7em;
    scale: 0.45 0.359;
    transform-origin: top left;
}
.shinyPack{
    animation: shineARoundPack 2s;
}
/* Wrapper for each cart item */
.cartItemsWrap .cartThing{
    border: 1px solid #814f26;
    background: linear-gradient(299deg, #41240ab0, #6e450754);
    position: relative;
    border-radius: 4px;
    padding: 4px 24px 8px 12px;
    margin: 10px 0;
    box-shadow: 1px 1px 1px wheat;
}

.shinyPack::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 25em;
    height: 36em;
    border-radius: 20px;
   
}
#targetForCardReveals::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 24.25em;
    height: 30em;
    border-radius: 20px;
    background: #00000040;
}
.energyPulseMythic::before {
    animation: energyPulseMythic 2s infinite;
}

.energyPulseLegendary::before {
    animation: energyPulseLegendary 2s infinite;
}

.energyPulseEpic::before {
    animation: energyPulseEpic 2s infinite;
}

.energyPulseRare::before {
    animation: energyPulseRare 2s infinite;
}

.energyPulseUncommon::before {
    animation: energyPulseUncommon 2s infinite;
}

.energyPulseCommon::before {
    animation: energyPulseCommon 2s infinite;
}
.shinyPack::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* animation: lightStreaks 3s linear infinite;*/
}

.spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), transparent);
    animation: sparkFlares 0.8s infinite ease-in-out;
    top: 50%;
    left: 50%;
    transform-origin: center;
}
@keyframes sparkFlares {
    0% {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.8);
        transform: translate(-50%, -50%);
    }
    25% {
        width: 15px;
        height: 15px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 15px 5px rgba(255, 255, 255, 1), 0 0 25px 10px rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%) translateY(-30px);
    }
    50% {
        width: 20px;
        height: 20px;
        background: rgba(255, 223, 0, 0.9);
        box-shadow: 0 0 30px 10px rgba(255, 223, 0, 0.7), 0 0 50px 20px rgba(255, 223, 0, 0.3);
        transform: translate(-50%, -50%) translateY(30px);
    }
    75% {
        width: 15px;
        height: 15px;
        background: rgba(255, 0, 255, 0.8);
        box-shadow: 0 0 15px 5px rgba(255, 0, 255, 0.8), 0 0 25px 10px rgba(255, 0, 255, 0.5);
        transform: translate(-50%, -50%) translateY(-15px);
    }
    100% {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.8);
        transform: translate(-50%, -50%) translateY(0);
    }
}

.microCardViewer .creatureInfo{
    display: block;
}
.textInBackSideOfMagicCard{
    display: inline-block;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    width: 12em;
}
.infoTopLeft{
    position: absolute;
    left: 1px;
    top: 1px;
    background: black;
    padding: 2px 8px;
    border-radius: 31%;
    border: 1px solid #ffdc73;
}
/* Basic styles for the info box */
.addToDeckSymbol{
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    z-index: 1;
    cursor: pointer;
}
#endTurnAndEngageButton{
    position: fixed;
    cursor:pointer;
    z-index: 13;
}

#turn-timerOld{
    display: inline-block;
    position: absolute;
    top: -8px;
    /* width: 100%; */
    right: 33%;
    background: #000000;
    padding: 0 2px;
    border-radius: 5px;
    border: 1px solid white;
}
.attackingBtnWrapper{
    top: -3.25em;
    right: 0;
    z-index: 13;
    transform: rotate(0deg);
    position: absolute;
}
.attackingIconButton{
    max-height: 3em;
    filter: drop-shadow(0px 0px 1px red);
    cursor: pointer;
    transition: all 0.1s ease;
    position: absolute;
    right: 0;
}
.chestWrap{
    display: flex;
    top: 3em;
    align-items: center;
    justify-content: center;
    position: relative;
}
.glowyel{
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: bold;
    display: block;
    color: #c9b37a;
}
#engageToAttack-old{
    position: absolute;
    right: 3.5em;
    top: -3.25em;
}
.info{
    position: absolute;
    left: 10px;
    bottom: 0;
}
.info div{
    background: #000000;
    padding: 0 2px;
    border-radius: 1px;
    color: #c9b37a;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.7);
    letter-spacing: 0.5px;
    
}
.iconsProfileArea{
    border: 1px outset #42403b;
    border-radius: 50%;
    margin: 0.25em 0.5em;
    box-shadow: 0px 0px 4px 1px #000000;
    width: 20px;
    height: 20px !important;
    position: relative;

    cursor: pointer;
}

.iconsProfileArea:hover{
    border: 1px outset #74726d;
}

.unlockSymbol, .unlockPWRSymbol{
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    z-index: 1;
    cursor: pointer;
}
.upgradeSymbol{
    position: absolute;
    top: 0;
    left: 2em;
    width: 2em;
    height: 2em;
    z-index: 1;
    cursor: pointer;
}
.unlockNFTSymbol, .burnedNftHallOfFame{
    position: absolute;
    top: 20%;
    left: 25%;
    width: 50%;
    height: 50%;
    z-index: 1;
    cursor: pointer;
}
.guildBox{
    padding: 20px;
    background: url(images/tavernBgLandscape.webp);
    background-size: 100% 100%;
    color: rgb(255, 255, 255);
    font-family: serif;
    border: 3px solid rgb(165, 124, 72);
    border-radius: 2px;
    width: -webkit-fill-available;
    height: 87.5vh;
    position: fixed;
    top: 2.75em;
}
.guildListItem{
    background: #593b1f; 
    padding: 10px; 
    border-radius: 5px; 
    margin-bottom: 8px;
    padding: 0 1em;
    position: relative;
    min-height: 5em;
}
.guildListItem span{
    display: inline-block;
}
.settingsForGuildOwner{
    position: absolute;       
    top: 5px;
    cursor: pointer;
    left: 5px;
}
.saveButtonWrap{
    position: absolute;       
    top: 5em;
    right: 5px;
}
.saveButton{
    padding: 6px 12px;border: none;border-radius: 5px;background-color: rgb(15, 161, 68);color: rgb(255, 255, 255);cursor: pointer;
}
.guildBoostIcons{
    position: absolute;
    left: 0;
    bottom: 0;
    
}
.memeberCounter{
    position: absolute;
    top: 5px;
    right: 5px;
}
.guildBoostIconsImages{
    width: 20px;
    height: 20px !important;
    position: relative;
    top: 3px;
    border-radius: 50%;
}
.rewardTokens{
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #ffeec3;
    font-family: 'Cinzel', serif;
    font-weight: bold;
}
.headerLight{
    color: #ffeec3;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-indent: 8%;
    margin: 0 0 5px 0;
}
.listGuilds{
    list-style: none;
    padding: 0px;
    margin: 0 auto;
    padding: 0;
    overflow-y: auto;
    height: 79vh;
    background: #1c1c1c;
    padding: 0 11px;
    border-radius: 11px 3px 3px 11px;
    border: 1px solid wheat;
}
.redishbtn{
    background: radial-gradient(circle, #5a1a1a, #300000);
    color: #f8d9b4;
    border: 2px solid #8a4f1a;
    border-radius: 5px;
    /* width: 1em; */
    text-transform: uppercase;
    padding: 8px;
    right: 2em;
    font-weight: bold;
    cursor: pointer;
}
.redishbtn :hover{
    border:  2px solid wheat;
}
.infoBox {
    display: none;
    position: absolute;
    
    background: linear-gradient(291deg, #000000, #2f2a2a, #000000);
    color: #fff;
    padding: 10px;
    max-width: 10em;
    border:1px solid #ffdc73;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
  }
  #infoBox{
    position: absolute;
    display: none;
  }
  .infoTopLeft {
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
  }
  
  /* Tooltip position */
  .tooltip-active {
    display: block !important;
  }
      
.onBoardCardViewer .textInBackSideOfMagicCard{
    display: inline-block;
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    width: max-content;
}
@keyframes shineARoundPack{
    0% {
        box-shadow: 0 0 20px cyan;
    }
    
    75% {
        box-shadow: 0 0 1250px wheat;
    }
    100% {
        box-shadow: 0 0 120px cyan;
    }
}
@keyframes cardRevealAnimation {
    0% {
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
    20% {
        transform: scale(1.1);
        filter: brightness(1.5);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.15);
        filter: brightness(2);
        opacity: 1;
    }
    80% {
        transform: scale(1.1);
        filter: brightness(1.7);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
}


/* Keyframes for different rankings with color */
@keyframes energyPulseMythic {
    0% {
        box-shadow: 0 0 10px 5px rgba(255, 100, 0, 0.5), 0 0 20px 10px rgba(255, 150, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(255, 100, 0, 0.8), 0 0 100px 50px rgba(255, 200, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(255, 100, 0, 0.5), 0 0 20px 10px rgba(255, 150, 0, 0.3);
    }
}

@keyframes energyPulseLegendary {
    0% {
        box-shadow: 0 0 10px 5px rgba(255, 100, 0, 0.5), 0 0 20px 10px rgba(255, 150, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(255, 100, 0, 0.8), 0 0 100px 50px rgba(255, 150, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(255, 100, 0, 0.5), 0 0 20px 10px rgba(255, 150, 0, 0.3);
    }
}

@keyframes energyPulseEpic {
    0% {
        box-shadow: 0 0 10px 5px rgba(255, 0, 255, 0.5), 0 0 20px 10px rgba(255, 0, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(255, 0, 255, 0.8), 0 0 100px 50px rgba(255, 0, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(255, 0, 255, 0.5), 0 0 20px 10px rgba(255, 0, 255, 0.3);
    }
}

@keyframes energyPulseRare {
    0% {
        box-shadow: 0 0 10px 5px rgba(0, 255, 0, 0.5), 0 0 20px 10px rgba(0, 255, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(0, 255, 0, 0.8), 0 0 100px 50px rgba(0, 255, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(0, 255, 0, 0.5), 0 0 20px 10px rgba(0, 255, 0, 0.3);
    }
}

@keyframes energyPulseUncommon {
    0% {
        box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.5), 0 0 20px 10px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(0, 255, 255, 0.8), 0 0 100px 50px rgba(0, 255, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.5), 0 0 20px 10px rgba(0, 255, 255, 0.3);
    }
}

@keyframes energyPulseCommon {
    0% {
        box-shadow: 0 0 10px 5px rgba(128, 128, 128, 0.5), 0 0 20px 10px rgba(128, 128, 128, 0.3);
    }
    50% {
        box-shadow: 0 0 50px 25px rgba(128, 128, 128, 0.8), 0 0 100px 50px rgba(128, 128, 128, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 5px rgba(128, 128, 128, 0.5), 0 0 20px 10px rgba(128, 128, 128, 0.3);
    }
}

@keyframes lightStreaks {
    0% {
        background: conic-gradient(from 0deg, transparent, rgba(255, 255, 0, 0.3), transparent);
        transform: rotate(0deg);
    }
    100% {
        background: conic-gradient(from 0deg, transparent, rgba(255, 255, 0, 0.3), transparent);
        transform: rotate(360deg);
    }
}

.backideInfoCard{
    transform: rotateY(-90deg);/*Go to 0 after 1s?*/
    transition: all 1s ease;
    background-size: 100% 100%;
    background-image: url(images/frameMetalAndPaper.webp);
    border: 4px solid rgb(64 0 235 / 60%);
    width: 7.5em;
    margin: 0em auto 2em;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    height: 10em;
    border-radius: 12px;
}
.cartSectionCardPackIcons{
    height: 60px;
    width: 40px;
    top: 26px;
    border: 1px dashed wheat;
    position: relative;
}
.detailsHallOfFame{
    background: linear-gradient(to right, rgb(12 65 92), rgb(13 52 73));
    border: 2px solid #deb887;
    border-radius: 0 0 12px 12px;
    padding: 10px 20px;
    box-shadow: 0 0 10px #222 inset;
    display: inline-block;
    position: relative;
    top: -3px;
}
.detailsHallOfFame .divider {
    margin: 0 12px;
    color: #999;
  }
.funny-bubble {
    position: absolute;
    top: 0px;
    right: 0px; /*alternate - full card with starts at right 0*/
    right: 30%; 
    background: wheat;
    color: #141212;
    border: 2px solid #333;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85em;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    max-width: 180px;
    z-index: 1000;
    white-space: normal;
    line-height: 1.2;
    text-shadow: 0 0 BLACK;
  }
  
  .funny-bubble::after {
    content: "";
    position: absolute;
    bottom: -4px;/*alternate - full card with starts at right 0*/
    bottom: -5px;
    right: 0px;
    width: 0;
    transform: rotate(-24.5deg);
    height: 0;
    border: 10px solid transparent;
    border-top-color: #f5deb3;
    border-bottom: 0;
    margin-left: -5px;
    filter: drop-shadow(1px 1px 0 #000);
  }
  
.cartPriceWrap{
    font-family: 'MedievalSharp', serif;
    color: wheat;
    top: 0;
    position: relative;
    text-shadow: 1px 1px 0px black;
}
#listOfTokens, #listOfWhitelistedTokens {
    max-height: 8em;
    overflow-y: auto;
    background: #572d08;
    border-radius: 3px;
    border: 2px solid #d2ac6a;
    box-shadow: 0px 0px 0px 2px #62340c;
}
.tokenIdList {
    margin: 3px;
    border: 1px solid #62340c;
    padding: 4px 6px;
    border-radius: 3px;
    background: #a38854;
    color: wheat;
    position: relative;
    display: block;
    transition: all ease 0.4s;
    text-shadow: 1px 1px black;
    cursor: pointer;
    font-family: 'MedievalSharp', serif;
}
.tokenImage{
    border-radius: 5px;
    position: absolute;
    border: 1px solid #572d08;
    left: 5px;
}
.tokenImage2{
    border-radius: 5px;
    position: absolute;
    border: 1px solid transparent;
    right: 5px;
    opacity: 0;
}
.tokenIdList:hover {
    background: #d2ac6a;
}
.medievalInput::placeholder {
    color: black !important; /* A softer brown for the placeholder */
    font-style: italic; /* Adds an old-fashioned feel */
    opacity: 0.8; /* Slightly faded for a natural look */

}
.thingsBelowCardInWrap{
    position: absolute;
    bottom: -1.5em;
    left: 0;
    right: 0;
    margin: 0em auto 1.5em;
}
.btmRightPlaceholder{
    position: absolute;
    bottom: 2px;
    right: 5px;
}
.medievalInput:focus, .medievalInput:focus {
    color: #000;
    outline: 0;
    font-weight: bold;
}

.medievalInput, select, textarea{
    color: #000;
    outline: 0;
    font-weight: bold;

}
#topButton{top:7.5em;}
#midButton{top:8.15em;}
#lastButton{top:8.8em;}
.loginWoodButtonsCleaWrap img{
    position: relative;
    z-index: 999;
    max-height: 19px;
    transition: all 0.15s ease;
    cursor: pointer;
    filter: drop-shadow(0px 0px 1px wheat);
}
.loginWoodButtonsCleaWrap img:hover{
    cursor: pointer;
}
.loginWoodButtonsCleaWrap img:active{
    scale:0.9;
}

.popupConfirmerStyles {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 90%;
    background: radial-gradient(circle at top, #2d2a1e 0%, #1b1a16 100%);
    border: 3px solid #ffd966;
    border-radius: 16px;
    padding: 32px 26px;
    box-shadow: 
        0 0 25px rgba(255, 217, 102, 0.6),
        inset 0 0 18px rgba(0,0,0,0.7),
        0 10px 30px rgba(0,0,0,0.5);
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    color: #ffd966;
    text-align: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: popupScaleIn 0.3s cubic-bezier(0.25, 1.25, 0.5, 1);
}

/* Title */
.popupConfirmerStyles h2 {
    font-size: 1.8em;
    margin-bottom: 18px;
    text-shadow: 0 0 12px rgba(255, 217, 102, 0.7);
}

/* Transaction or description */
.popupConfirmerStyles p {
    font-size: 1em;
    margin-bottom: 22px;
    color: #ffeab3;
    word-break: break-word;
}

/* Input field */
.popupConfirmerStyles input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 20px;
    border: 2px solid #ffd966;
    border-radius: 10px;
    background: wheat;
    color: #ffd966;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Input field */
.popupConfirmerStyles button {
margin-top: 0.8rem;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.popupConfirmerStyles input:focus {
    border-color: #fff19c;
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.8);
}

/* Buttons */
.popupConfirmerStyles .popup-btn {
    padding: 12px 28px;
    margin: 6px;
    border: none;
    border-radius: 14px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 4px #000;
}

/* Confirm button */
.popupConfirmerStyles .popup-btn-confirm {
    background: linear-gradient(145deg, #ffd966, #ffcc33);
    color: #1a1a1a;
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.8);
}

.popupConfirmerStyles .popup-btn-confirm:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 20px rgba(255, 217, 102, 1), inset 0 0 10px rgba(255, 217, 102, 0.4);
}

/* Cancel button */
.popupConfirmerStyles .popup-btn-cancel {
    background: #333;
    color: #ffd966;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

.popupConfirmerStyles .popup-btn-cancel:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.5);
}

/* Entrance animation */
@keyframes popupScaleIn {
    0% { transform: translate(-50%, -50%) scale(0.75); opacity: 0; }
    70% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}






.nftViewWrap{
    background: url("images/portalPortrait.webp") 0% 0% / 100% 100%;
    border: 0;
    padding: 0 0 0em 0;
    min-height: 79vh;
    z-index: 1;
    border-top: none;
    position: relative;
}
.gameMenuWrap{
    left: 0;
    z-index: 1;
    background: #f5deb359;
    justify-content: center;
    align-items: center;
    display: block;
    transition: 1s all ease;
    min-height: 79vh;
    right: 0;
}
.morphWrap{
    display: block;
    z-index: 1;
    background: #f5deb359;
    padding-top: 2em;
    transition: 1s all ease;
    min-height: 79vh;
}
.left {
    display: flex; /* Make inner div flex to align spans inline */
    gap: 10px; /* Add spacing between spans */
  }
.boxesInfo{
    background-image: url('images/skins/backgrounds/Wood.webp');
    background-size: 100% 100%;
    transition: all 1s ease;
    min-width: 11em;
    margin: 1em;
    display: inline-block;
    min-height: 15em;
    cursor: pointer;
    border-radius: 9px;
    border: 4px solid #4c220c;
    box-shadow: 0px 0px 0px 3px #371808;
    position: relative;
}
.mysteryIcons{
    width: 7em;
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    top: 4em;
    left: 2em;
    backface-visibility: hidden;
    transition: all 1s ease;
    transform: rotateY(180deg);
}
#cardMorphSelection3{
    background-image: url('images/cards/mysteryPack1.webp');    
}
.boxesInfo2{
    background-image: url('images/skins/backgrounds/Wood.webp');
    background-size: 100% 100%;
    transition: all 1s ease;
    min-width: 11em;
    margin: 1em;
    display: inline-block;
    min-height: 15em;
    border-radius: 9px;
    border: 4px solid #4c220c;
    height: 370px;
    width: 250px;
    box-shadow: 0px 0px 0px 3px #371808;
}


.cardBgMissions{
    background-image: url('images/skins/backgrounds/missions.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.cardBgIncinerator{
    background-image: url('images/skins/backgrounds/incinerator.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.boxesInfo img{
    max-width: 10em;
    position: relative;
    top: 1.5em;
}
/*Three-Card Monte*/

.cardBgArcarde{
    background-image: url('images/skins/backgrounds/arcade.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.cardBgArena{
    background-image: url('images/skins/backgrounds/missions2.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.bgWarpHorizontalBar{
    background-image: url(images/nameBarMid.webp);
    background-size: 100% 100%;
    position: relative;
    padding: 10px 4px;
    border-radius: 10px;
}
.brBarUnderCard{
    background-image: url(images/nameBarMidUnd.webp);
    background-size: 100% 100%;
    position: relative;
    padding: 10px 5px;
    border-radius: 10px;
    display: inline-block;
    height: fit-content;
    position: absolute;
    left: 11px;
    bottom: 15px;
}
.infoBurnswrap{

    padding: 10px 4px;
}
.infoHeadings{
    color: #ede5d8;
}
.underworldButton:active{
    scale:0.9;
}
.underworldButton{
    background: linear-gradient(0deg, #7a0606, #c70000, #b8a504);
    border: 1px solid #a67c52;
    padding: 12px;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
    color: #ffcc00;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}
.fireSaleWrap div{
   padding: 11px 17px;
    color: black;
    display: inline-block;
    background-image: url(images/skins/nameBannerPaper.webp);
    background-size: 100% 100%;
}
.insideBarTextright{
    color: #ede5d8;
    text-align: right;
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 1;
    font-weight: bold;
    text-shadow: 1px 1px 0px black;
}
.cardBgPoker{
    background-image: url('images/skins/backgrounds/pokerInspo.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.cardBgWagerwar{
    background-image: url('images/skins/backgrounds/incinerator.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.cardBgMonte{
    background-image: url('images/skins/backgrounds/magicMonte.webp');
    background-size: 100% 100%;position: relative;
    border: 0px solid #4c220c;
    box-shadow: 0px 0px 0px 0px #371808;
}
.mysteryMintStone{
    background-image: url('images/skins/backgrounds/Stone.webp');
    background-size: 100% 100%;position: relative;
}
.mysteryMintLava{
    background-image: url('images/skins/backgrounds/Lava.webp');
    background-size: 100% 100%;position: relative;
}
.mysteryMintIce{
    background-image: url('images/skins/backgrounds/Ice.webp');
    background-size: 100% 100%;position: relative;
}
.mysteryMintSteampunk{
    background-image: url('images/skins/backgrounds/Steampunk.webp');
    background-size: 100% 100%;position: relative;
}
.mysteryMintStoneAdd{
    background-image: url('images/skins/backgrounds/StoneAdd.webp');
    background-size: 100% 100%;position: relative;
}
.mysteryMintSteampunkAdd{
    background-image: url('images/skins/backgrounds/SteampunkAdd.webp');
    background-size: 100% 100%;position: relative;
}
.iconsInPaperFront{
    height: 1.5em;
    width: 1.5em;
    opacity: 1;
    display: inline-block;
    padding: 0;
    position: relative;
    top: 8px;
}
.loginScreenWood{
    background-image: url('images/skins/loginScreen.webp');
    background-size: 100% 100%;
    transition: all 1s ease;
    font-size: 2em;
    display: inline-block;
    position: absolute;
    color: gold;
    filter: drop-shadow(0px 0px 1px gold);
    min-height: 9em;
    min-width: 9em;
}
.challengesButtonImage {
    height: 3em;
    cursor: pointer;
    filter: drop-shadow(0px 0px 2px red);
    box-shadow: 0px 1px 1px 1px #5e0019;
    transition: all 1s ease;
    background: #ff2e23;
    border-radius: 28px;
}
#fullScreenIcon{
    z-index: 200;
}
.itemsOntopOfItem{
    position: absolute;
    top: -2.95em;
    width: 100%;
    left: 0;
}
.buttonInChallengeList{
    width: 12em;
    color: #f1e6d6;
    font-family: 'Georgia', serif;
    padding: 12px 20px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #3a2c1a;
    background-color: orange;
}
.challengeListItem {
    display: inline-flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em;
    border: 1px solid black;
    margin: 1em 0;
    background-color: #f3e3c3;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}
.promoChallengeItems{
    display: inline-flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em;
    border: 1px solid black;
    margin: 1em 0;
    background-color: #f3e3c3;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.challengeHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.challengeButton {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.4em 1em;
    background-color: orange;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.challengeIcons {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.challengeIcons img {
    width: 2em;
    height: 3em;
}

.vsIcon {
    font-style: italic;
    opacity: 0.85;
    display: inline-block;
    font-size: 1.5em;
    position: relative;
    right: 4px;
}

.challengeProgressBar {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.barWrap {
    position: relative;
    width: 100%;
    background: wheat;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
}

.barFull {
    position: absolute;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 83 161), rgb(33 61 202));
    width: 0%;
    z-index: 1;
}
.challengeListItem .challengeProgressBar, .promoChallengeItems .challengeProgressBar {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    position: relative;
}

.challengeListItem .hpBarNewWrap, .promoChallengeItems .hpBarNewWra {
    position: relative;
    width: 100%;
    background: #b29e77;
    padding: 1px;
    border-radius: 1px;
}

.challengeListItem .hpBarNew, .promoChallengeItems .hpBarNew {
    
    height: 16px;
    background: linear-gradient(180deg, rgb(25 122 226), rgb(19 74 102));
    color: #fddd7f;
}
.barPartial {
    position: absolute;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 83 161), rgb(33 61 202));
    border-top: 1px solid wheat;
    width: 0%;
    z-index: 2;
}

.rushInfo {
    text-align: right;
    font-size: 0.9em;
    color: #3e3b34;
    position: relative;
    padding-right: 2em;
}

.shardIcon {
    height: 1em;
    vertical-align: middle;
}


.medievalButtonBrowner{
    display: block;
    margin: 0 auto;
    background-color: #7c5e3d;
    border: 2px solid #3a2c1a;
    color: #f1e6d6;
    font-family: 'Georgia', serif;
    padding: 12px 20px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}
#cardsYouPlayMini{
    display: inline-block;
}
#cardsYouPlayMini img{
    border-radius: 4px;
    height: 2em;
    width: 2em;
    border: 2px ridge #0c5381;
}
.nftCardWrap img, .nftCARD{
    border-radius: 1px;
    height: 180px;
    width: 132px;
}
#cardsYouPlay .nftCardWrap, #boosterCardsYouPlay .waterCrystalWeb{
    margin: 0 0 0 -6em;
}
#cardsYouPlay .nftCardWrap:hover, #boosterCardsYouPlay .waterCrystalWeb:hover{
   z-index: 2;
}
#listTheOwnedIds{
    margin: 1em auto 0;
    display: block;
}
.badgeWrapForNumber{
    background: url(images/skins/heroPowerIcons/bronzeForText.webp);
    background-size: 100% 100%;
    width: 1.5em;
    height: 1.5em;
    font-size: 2em;
    font-family: anton;
    z-index: 3;
    color: #ffeabd;
    text-shadow: 1px 1px 0px black;
}
/* Top-right icon */
.topRightIcon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 1em;
}

/* Main wrapper */
.pokerWrap {
    padding: 0.1em 1em 0.1em 3.5em;
    display: none;
    position: relative;
    max-height: 3.25em;
    background: #2e5327; /* Darker green with a medieval feel */
    background: #2f2753;/*Blue dark to fit the style*/
    background-image: url(images/skins/ornateBorderPattern.webp); /* Add a decorative medieval border */
    border-radius: 39px 8px 8px 39px; /* Rounded edges and square right edges  */
    border: 3px solid #d4a373; /* Golden ornate-style border */
    transition: all 0.5s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7); /* Add depth */
    font-family: "Cinzel", serif; /* Medieval font */
    color: #ffeabd; /* Warm, glowing text */
    text-shadow: 1px 1px 1px #000;
    margin: 1em 0 1em 0;
}
.headerAbs{
    position: absolute;
    top: -1.5em;
    left: 0;
    right: 0;
    color: #4d2600;
    text-shadow: 1px 1px 0px #d8be9463, 3px 2px 2px rgba(0, 0, 0, 0.3);
}
.arrows{
    position: absolute;
    top: 1.25em;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.5;
    font-size: 20px;
    pointer-events: auto;
    color: black;
}
/* Overlay text styles */
.aboveLayer {
    font-family: "Cinzel", serif; /* A medieval font */
    font-size: 1em;
    color: #ffeabd;
    text-shadow: 1px 1px 0px #000;
    position: relative;
    z-index: 2;
    
}
.aboveLayer .iconStatWrap{
    display: block;
}
/* Button styling */
.pokerWrap button {
    background: #a67c52; /* Medieval parchment-style background */
    border: 2px solid #8B4513; /* Rich brown border */
    border-radius: 10px;
    font-family: "Cinzel", serif;
    color: #ffeabd;
    padding: 0.5em 1em;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    top: -16px;
    position: relative;
    margin: 0 0em 0 1em;
}

.pokerWrap button:hover {
    background: #c59c6c; /* Slightly lighter on hover */
    transform: scale(1.05); /* Add a subtle hover effect */
}
.hackMiniIcon{
    border-radius: 50%;
    width: 1em !important;
    display: inline-block;
    margin: 0;
    top: -0.6em;
    right: -0.25em;
    position: relative;
}
.pokerWrap .aboveLayer{
    z-index: 2;
    position: relative;
    display: inline-block;
}
.topLeftBadge{
    position: absolute;
    top: 5px;
    left: 3px;
    z-index: 1;
}
.deckWrapPreview{
    position: relative;
    background: url(images/woodFrame2.webp);
    background-size: 100% 100%;
    display:none;
    min-height: 2.25em;
    padding: 0.5em 2em;
    border-radius: 12px;
    transition: all 1s ease;
    border: 2px dashed #8d4b16;
}
.nftCardWrap{
    position: relative;
    background: linear-gradient(135deg, #4b2e17, #2a1a0e);
    border: 4px solid #aa7b4a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    height: 180px;
    width: 132px;
    margin: 10px;
    padding: 0;
    display: inline-block;
}
.collectionBadgeBooster{
    background-image: url('images/skins/heroPowerIcons/hero1.webp');
    padding: 1.5em;
    background-size: 100% 100%;
    height: 2.75em;
    display: inline-block;
    margin: 0 0.25em 0em;
    position: relative;
    cursor: pointer;
}
.iconBtmRight{
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 1.75em;
}
.iconTopRight{
    position: absolute;
    top: 5px;
    right: 5px;   
    width: 1.75em;
}
.gamePadIcons{ 
    width: 1.75em;
    filter: drop-shadow(0px 0px 1px cyan);
    cursor: pointer;
}
.collectionBadge span{
        border-radius: 50%;
        width: 2em;
        display: inline-block;
        margin: 0;

}
.removeCardDeck {
    position: absolute;
    top: 8px;
    right: 8px;
    background: radial-gradient(circle, #5a1a1a, #300000);
    color: #f8d9b4;
    border: 2px solid #8a4f1a;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Garamond', serif;
    text-align: center;
    line-height: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.removeCardDeck:hover {
    background: radial-gradient(circle, #7e2d2d, #500000);
    color: #ffd7a6;
    border-color: #af6b3a;
    box-shadow: 0px 0px 8px rgba(255, 200, 150, 0.8);
}

.waterCrystalWeb, .nftWhiteBoosterCard {
    position: relative;
    display: inline-block;
    margin: 10px;    transform: rotateY(0deg);
    transition: all 1s ease;
    padding: 10px;
    background: linear-gradient(135deg, #4b2e17, #2a1a0e);
    border: 4px solid #aa7b4a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);    
    height: 10em;
    width: 7em;
}

.waterCrystalWeb img:not(.playerIconsWrap img):not(.displayCard img),
.nftWhiteBoosterCard img:not(.playerIconsWrap img):not(.displayCard img) {
    display: block;
    width: 100%;
    border: 2px solid #d8c190;
    border-radius: 8px;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    width: 6em;
    margin: 0 auto; 
}

.exitIconBrown{
    z-index: 3;
    cursor: pointer;
    position: absolute;
    z-index: 4;
    color: #c3c3c3;
    top: 0.5em;
    right: 0.75em;
    background: radial-gradient(circle, #5a1a1a, #300000);
    color: #f8d9b4;
    border: 2px solid #8a4f1a;
    border-radius: 50%;
    width: 1em;
    padding: 3px;
    font-size: 2em;
}
.exitIconBrown:hover, .exitIconBrown:active{
    border: 2px solid wheat;
}
.exitIconBrown:active, .mediumImgShine2:active{
    scale: 0.9;
}
.waterCrystalWeb:hover, .nftWhiteBoosterCard:hover {
    border-color: #caa472;
    box-shadow: 0px 6px 10px rgba(255, 230, 180, 0.9);
}

.waterCrystalWeb{
    background-size: 100% 100%;
    background-image: url('images/cards/waterCrystalWeb.webp');
    cursor: pointer;
}
.nftWhiteBoosterCard{
    background-size: 100% 100%;
    background: url('images/cards/waterCrystalWebWhite.webp');
    cursor: pointer;
}

.burnWrap .nftWhiteBoosterCard, .equipmentPackWrapUR .nftWhiteBoosterCard,  .physicalItemsWrap .nftWhiteBoosterCard,  .equipmentPackWrap .nftWhiteBoosterCard, .skinPackWrapUR .nftWhiteBoosterCard, .skinPackWrap .nftWhiteBoosterCard, .mintPackWrap .nftWhiteBoosterCard, .mintPackWrap2 .nftWhiteBoosterCard, #darkPacksForSale, #boosterPacksForSaleUR, .shardPackWrap .nftWhiteBoosterCard, .shardPackWrapUR .nftWhiteBoosterCard, .burnWrap .nftWhiteBoosterCard, .morphNftsToCards .nftWhiteBoosterCard{
    border: 0px solid #c8a97b !important;
}

.listOfNfts{
    margin: 0em auto 0;
    transition: all 0.4s ease;
}
.skinPackWrapUR, .equipmentPackWrapUR, .skinPackWrapUR, .physicalItemsWrap, .equipmentPackWrap, .shardPackWrapUR, .mintPackWrap2, .skinPackWrap, .shardPackWrap, .mintPackWrap{
    margin: 0 0 2em 1em;
    display: inline-block;
}
#collectionBadgeIcons, #startGameButtonInPvP, #playerSetupArea{
    transition: all 0.4s ease;
}
.nftIconGame{
    width: 2.5em;
    height: 2.5em;
    border-radius: 30%;
    border: 1px solid #aa7b4a;
    transition: all 1s ease;

}

/*
.nftIconGame{
    width: 20em;
    height: 34em;
    transition: all 1s ease;
    position: relative;
}
#ownedIngameNfts{
    display: flex;
}
#ownedIngameNfts .playerIconsWrap.displayCard, #ownedIngameNfts .nftWrapIcon{
    margin: 0 0 0 -15em;
}
    */


    /* Style the dropdown menu with the class tokenDropdown */
.nftWrapIcon{
    position: relative;
}
.toggleInfo{
    position: relative;
    left: 3px;
}
.abilityInfoSection, .abilityInfoSection2{
    color: #fff9ed;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    display: inline-block;
    position: relative;
    transform: translateY(-55px);
    left: 3.2em;
}
.abilityInfoSection2{
    font-size: 13px;
    top: 2px;
    left: 3.75em;
}
.abilityNameSection{
    color: #fff9ed;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    display: inline-block;
    position: absolute;
    /* transform: translateY(-55px); */
    left: 0;
    bottom: 21px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}
.weakness{
    position: absolute;
    top: 13px; 
    right: 0;
    border-left:1px solid black;
    border-bottom:1px solid black;
}
.weakness img{
    height: 1.25em;
    width: 1.25em;
    bottom: -3px;
}
.weakness span{
    color: #fff9ed;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    font-size: 14px;
    margin-left: 2px;
}
.newMdimIcon{
    height: 1.5em;
    width: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 1px wheat);
}
.shopItemHeader{
    position: absolute;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    font-size: 13px;
    color: wheat;
}
.shopIconsMain{
    width: 35px;
    position: relative;
    top: 7px;
    height: 35px;
    border: 1px solid #8a4f1a;
    padding: 2px;
    background: radial-gradient(circle, #5a1a1ac4, #300000cf);
    cursor: pointer;
    border-radius: 50%;
}
.cartItemsWrap{
    overflow: auto;
    max-height: 60vh;
}
.shopIconsMain:hover{
    background: radial-gradient(circle, #5a1a1a, #300000);

}
.tokenDropdown, .tokenDropdown2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #232323;
    background: linear-gradient(291deg, rgb(0, 0, 0), rgb(47, 42, 42), rgb(0, 0, 0)) 0% 0% / 100% 100%;
    background:  linear-gradient(291deg, rgb(28 36 10), rgb(15 46 3), rgb(28 36 10)) 0% 0% / 100% 100%;
   background: linear-gradient(317deg, rgb(101, 1, 8), rgb(73, 0, 13), rgb(126, 3, 3));
    position: absolute;
    border: 2px solid #8b5e3c;
    color: wheat;
    min-width: 200px;
    display: none;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000000;
    position: absolute;
    top: 2.75em;
    right: 0;
    transition: all 0.4s;    min-width:15em;
    border-bottom: none;
    border-right: none;
    border-top: none;
    border-left: 4px solid #b77b1d;
    height: 77.5vh;
    overflow-y: auto;
    border-radius: 0;
}

.whateverBarButStyle {
    position: relative;
    min-width: 30%;
    margin: 8px auto;
    display: inline-block;
    width: fit-content;
    border: 1px solid wheat;
    padding: 5px 5px 0px 5px;
    background: #3c3c3c;
    height: 16px;
    border-radius: 5px;

}
.whateverBarButStyle:hover {
    border: 2px outset wheat !important;
}
.tokenDropdownLogin, .tokenDropdownRegister, .settingsList{
    transition: all 0.4s;
    margin: 0;
    padding: 0;
    
}
.big-hex {
    display: flex;
    flex-direction: column; /* Align rows vertically */
    align-items: center; /* Center the rows */
    position: absolute;
    filter: drop-shadow(3px 4px 0px black);
}

.row {
    display: flex;
    filter: drop-shadow(1px 2px 0px magenta);
}
.bottomLeftMap{
    border: 2px solid black;
    box-shadow: 1px 1px 1px wheat;
    padding: 4px 8px;
    background: #00000047;
    border-radius: 0 2px 2px 0;
    
}
.microIconsOnLand{
    filter: drop-shadow(0px 0px 2px black);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
}
.hexagon {
    transition: all 1s ease;
    transform: rotateZ(0deg);
    width: 57px;
    height: 57px; /* Adjust for proper hex shape */
    background-color: green;
    background: url("images/landHexes/Death.webp");
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin: 2px; /* Space between hexagons */
}
.hexagon img{
    position: absolute;
}
.trophyImages{
    
    width: 1.75em;
}
.rewardsIcons{
    border: 1px solid #ffe4c0;
    border-bottom: 2px solid #000000;
    display: inline-block;
    padding: 6px 9px;
    /* border-radius: 2px 2px 3px 3px; */
    box-shadow: 0px 4px 11px 0px #ffd8bc;
    BORDER-RADIUS: 5PX 5PX 0 0;
    /* outline: 0px solid black; */
    /* background: url(images/woodFrame2.webp); */
    /* background: #ffffff4a;*/
    /* background-size: 100% 100%;*/
}
.rewardsIcons img{
    width: 2.5em;
    top: 5px;
    height: 2.5em;
    position: relative;
    filter: drop-shadow(0px 0px 1px white);
    margin:0 auto;
}
#currentIcon{
    display: inline-block;
    bottom: 0.25em;
    position: relative;
    right: 0.25em;
}
/* Style for each item in the dropdown menu */
.tokenDropdown li, .tokenDropdown2 li {
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    color: #ffdc73;
}




.tokenDropdown2 li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    object-fit: contain;
    position: relative;
    top: 3px;
}

.nameWrapper{
    background-size: 100% 100%;
    background-image: url('images/skins/nameBannerPaper.webp');
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;

}
.playersCardsWrapper .wrapImage, .enemyFrame .wrapImage{
    background: url(images/wood.webp);
    background-size: 100% 100%;
    display: inline-block;
    border: 4px double #411e12;
    box-shadow: 0px -10px 15px 1px #a75726;
    scale: 1;
    position: relative;
}
.playersCardsWrapper .wrapImage{
    border-radius: 10px 10px 0 0;
    padding: 0 4.5em 0 2em;
    border-bottom: 0;
    min-height: 7em;
    min-width: 10em;
}
.enemyFrame .wrapImage{
    border-radius: 0 0 10px 10px;
    padding: 0 2em 0 4.5em;
    border-top: 0;
    min-height: 7em;
    min-width: 15em;
}
.manaWrapper{
    position: absolute;
    background: url("images/frameMetalAndPaper.webp");
    background-size: 100% 100%;
    padding: 0 0.5em;
    height: 98%;
    min-width: 1.4em;
    border-radius: 0px 6px 0px 0px;
    border: 1px solid #894b2c;
}
.playersCardsWrapper .manaWrapper{
    right: 0;
    border-radius: 0px 6px 0px 0px;
}
.enemyFrame .manaWrapper{
    left: 0;
    border-radius: 0px 0 0px 6px;
   
}
.manaBadge2{
    top: 33%;
    width: 1.75em;
    height: 1.75em;
    z-index: 2;
    position: relative;
    transform: rotate(0deg);
    filter: drop-shadow(0px 0px 1px cyan);
}
.playerNames{
    position: absolute;
    filter: drop-shadow(rgb(0, 0, 0) 0px 2px 1px);
    font-family: anton;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    padding: 0;
    color: #e0c675;
}
.playersCardsWrapper .playerNames{
    top: -1px;
    left: 8px;
}
.enemyFrame .playerNames{
    bottom: 1px;
    left: 48px;
}
.nameIcons{
    width: 1em;
    height: 1em;
    filter: drop-shadow(0px 0px 1px lime);
    position: relative;
}
.manaIcons{
    width: 1em;
    height: 1em;
    position: relative;
    top:1px;
    opacity: 0.5;
}
.playersCardsWrapper .nameIcons{
}
.enemyFrame .nameIcons{
}
.playersCardsWrapper .manaIcons{
    filter: drop-shadow(0px 0px 2px cyan);
}
.enemyFrame .manaIcons{
    filter: drop-shadow(0px 0px 2px cyan);
}
.metalWrapper{
    background: url(images/frameMetalOnly.webp) 0% 0% / 100% 100%;
    position: absolute;
    height: 16px;
    display: inline-block;
    padding: 3px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(137, 75, 44);
    border-image: initial;
}

.playersCardsWrapper .metalWrapper{
    top: 0;
    left: 0;
    right: 2.55em;
    border-radius: 6px 0px 0px 0px;
}
.enemyFrame .metalWrapper{
    left: 41px;
    bottom: 1px;
    right: 1px;
    border-radius:  0px 0 6px 0px;
}
.enemyFrame .cardIcons,.enemyFrame  .iconNum{
    display: none;
}
.emptyCardFrame::before{
    content: '';
    position: absolute;
    top: -7px;
    left: -10px;
    width: 11.35em;
    height: 13.75em;
    border-radius: 3px;
    box-shadow: 0 0 10px 5px rgb(0 0 0 / 30%), 0 0 20px 10px rgb(255 150 0 / 0%);
}
.emptyCardFrame{
    position: relative;
    top: 10px;
    display: inline-block;
    height: 12.5em;
    transition: all 1s ease;
    width: 10em;
    /* max-width: 5em; */
    padding: 2px 1px;
    margin: 0 -2em 0 0;
    background: url(images/frameMetalCard.webp);
    border: 3px solid #111111;
    box-shadow: 0px 0px 0px 2px #444443;
    background-size: 100% 100%;
}
.hpBarNewWrap{
    width: 98%;
    background: linear-gradient(306deg, rgb(153, 9, 9), rgb(122, 4, 4));
    border-radius: 2px;
    display: block;
}
.hpBarNew{
    color: #6c3e25;
    height: 14px;
    width: 100%;
    display: block;
    position: relative;
    border: 1px solid #6c3e25;
    background: linear-gradient(180deg, rgb(3 161 0), rgb(5, 93, 24));
    border-radius: 2px 1px 1px 0px;
    transition: all 0.75s;
}
.playersCardsWrapper .hpBarNew{
    border-radius: 2px 1px 1px 0px;
}
.enemyFrame .hpBarNew{
    border-radius: 1px 0px 2px 1px;
}
.enchantedIcon{
    width: 1em;height: 1em;border-radius: 50%;position: absolute;
}
.playersCardsWrapper .enchantedIcon{
    top: -0.5em;
    right: -0.5em;
    transform: rotateZ(0deg);
}
.enemyFrame .enchantedIcon{
    top: 3px;
    right:1px;
    transform: rotateZ(180deg);
}
.enemyFrame .abilityIcon{
    display: none;
    transform: rotateZ(180deg);
}
.abilityIcon{
    max-width: 1em !important;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 1.5em;
    right: 0;
    border-radius: 50%;
    border: 1px solid;
}
.iconNumKami{
    position: absolute;
    height: 1em;
    width: 1em;
    z-index: 1;
    top: -1px;
    color: red;
    color: #e0e0e0;
    border-radius: 50%;
    /* background: red; */
    text-shadow: 1px 1px 0px black;
    font-family: fantasy;
    left: 1px;
    font-size: 15px;
}
.holderForCardRevealings{
    border-radius: 9px;
    transition: 0.1s;
    border: 1px solid wheat;
    width: 19.25em;
    position: relative;
    display: inline-block;
    height: 26.5em;
    padding: 8px 16px 8px 22px;
    background: url(images/cards/waterCrystal.webp) 0% 0% / 100% 100%;
}

.holderForCardRevealings .miniCardViewer{
    transform: scale3d(1, 1, 1);
    scale: 1;
    max-width: max-content;
    transition: transform 1.5s ease-out, opacity 2.3s ease-out, z-index 0s;
    z-index: 2;
    position: absolute;
    display: block;
}
#challengeImage1 .miniCardViewer, #challengeImage2 .miniCardViewer{

    transform: scale3d(1, 1, 1);
    scale: 1;
    max-width: max-content;
}
.holderForCardRevealings .miniCardViewer.slide-left {
    transform: translateX(-20em);
}

.holderForCardRevealings .miniCardViewer.slide-right {
    transform: translateX(20em);
}

/* Slide the card back into place */
.holderForCardRevealings .miniCardViewer.slide-in {
    transform: translateX(0);
}
.miniCardViewer .playerIconsWrap.displayCard {
   /*   height: 300px !important;
   */ 
    min-width: 224px;
}
#challengeImage1 .miniCardViewer .playerIconsWrap.displayCard, #challengeImage2 .miniCardViewer .playerIconsWrap.displayCard{
    height: 359px !important;
}
.boxesInfo2 .miniCardViewer .oneSec{
    max-height: 9.5em !important;
    min-width: 11.5em !important;
}
.buttonRed{
    padding: 6px 12px; 
    border: none; 
    border-radius: 5px; 
    background-color: rgb(161, 15, 15); 
    color: rgb(255, 255, 255);
    cursor: pointer;
}
.packFrontAndBack{
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
    background: url('images/cards/packs/MagicMorphsPackBackside.webp')  0% 0% / 100% 100% !important;
}


.flipped {
    transform: rotateY(180deg);
}

.openPackButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #ffcc00;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

.miniCardViewer .imgIn3{/* this needs scome changes, its affecting to many icons on memewar challengecard f eks*/
   
    z-index: 1;
}

/*

.boxesInfo2 .miniCardViewer .atkToUpdate {
    height: 2em !important;
    position: absolute;
    transform: translateX(-12px) translateY(-33px) !important;
    text-shadow: 2px 1px 0px black;
    z-index: 2;
    font-family: anton;
    font-size: 2em;
    right: 3px;
    color: snow;
    bottom: -30px;
}
.boxesInfo2 .miniCardViewer .imgIn3.atkIcon{
   
transform : translateX(-12px) translateY(-20px) !important;
height: 2em !important;
}
.boxesInfo2 .miniCardViewer .atkToUpdate{

transform : translateX(-9px) translateY(-45px) !important;
font-size: 2em !important;
}
.boxesInfo2 .miniCardViewer .imgIn3.hpIcon{

transform : translateX(24px) translateY(-25px) !important;
height: 2em !important;
}
.boxesInfo2 .miniCardViewer .hpToUpdate{
font-size: 2em !important;
transform : translateX(18px) translateY(-27px) !important;
}


.boxesInfo2 .miniCardViewer .imgIn3.defIcon{

transform : translateX(24px) translateY(-25px) !important;
height: 2em !important;
}
.boxesInfo2 .miniCardViewer .defToUpdate{
font-size: 2em !important;
transform : translateX(18px) translateY(-27px) !important;
}

.boxesInfo2 .miniCardViewer .imgIn3.manaIcon{

transform : translateX(24px) translateY(-25px) !important;
height: 2em !important;
}
.boxesInfo2 .miniCardViewer .manaToUpdate{
font-size: 2em !important;
transform : translateX(18px) translateY(-27px) !important;
}

.boxesInfo2 .miniCardViewer .imgIn3.merger{
    bottom: 1em !important;
}
*/

.iconNumKamiFontAwesomed{
    position: absolute;
    height: 1em;
    width: 1em;
    z-index: 1;
    top: 0px;
    color: red;
    color: transparent;
    border-radius: 50%;
    background: red;
    border: 1px solid #000000fc;
    text-shadow: 0px -2px 0px #000000;
    font-family: fantasy;
    left: 0px;
}
.kamiCostOnDeck{
    top: -1px;
    right: 2.65em;
    position: absolute;
    z-index: 34 !important;
}
.kamCostiWrap{
    position: absolute;
    top: 29%;
    z-index: 34 !important;
    right: 69%;
    cursor: pointer;
}
.kamiIcon{
    max-width: 1em !important;
    width: 1em;
    height: 1em;
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
    filter: drop-shadow(0px 0px 1px magenta);
}
.manaBarNew{
    background: linear-gradient(286deg, #a00a81, #05535d);
    height: 23%;
    width: 2em;
    position: absolute;
    bottom: 0;
    border-radius: 0 0 1px 1px;
    display: block;
    transition: all 0.5s ease;
}
.playersCardsWrapper .manaBarNew{
    border-radius: 0 0 1px 1px;
}
.enemyFrame .manaBarNew{
    border-radius:1px 1px 0 0 ;
}
.card-button img, .card-button2 img{
    max-width: 2.75em;
}
.manaBarPlayer{
    height: 94%;
    min-width: 2em;
    position: absolute;
    background: grey;
    display: inline-block;
    border: 1px solid #6c3e25;
    background: linear-gradient(286deg, #f500ff, #05535d);
    background: linear-gradient(286deg, #f500ff, #7a6a07);
    background: linear-gradient(286deg, #f500ff, #4b457d);
    left: 2px;
}

.playersCardsWrapper .manaBarPlayer{
    top: 2px;
    border-radius: 1px 3px 1px 1px;
    
}
.enemyFrame .manaBarPlayer{
    bottom: 2px;
    border-radius: 1px 1px 1px 3px;
}
.selected-card{
    top: -0.25em !important;
    scale: 1.2;
}

.selected-card-To-Boost{
    opacity: 1 !important;
    border: 2px dashed cyan !important;
    box-shadow: 0 0 5px 4px #ff000069 !important;
}

.card-button, .card-button2{
	display: inline-block;
    background: url(images/cards/waterCrystal.webp);
    background-size: 100% 100%;
    opacity: 1;
    padding: 0 !important;
    cursor: pointer;
    margin: 0 -1.5em 15px;
    min-width: 5em;
    scale: 1;
    position: relative;
    height: 6em;
    z-index: 11;
    transition: all 0.25s ease;
     /*Enemy */
        transform: rotateZ(180deg);
        border: 2px solid #e1583b; 
        box-shadow: 0px 0px 3px 2px #e1583b;
         top: -1em;
}
    /*Players get assigned class playersCardsWrapper in the js*/
.playersCardsWrapper .card-button, .playersCardsWrapper .card-button2{
    transform: rotateZ(0deg);
    border: 2px solid #970a09;
    z-index: 11;
    box-shadow: 0px 0px 1px 2px #1f1f1f;
    margin: 0.75em -1.5em 0;
    
    height: 6em;
}   
.playersCardsWrapper .card-button:hover, .playersCardsWrapper .card-button2:hover{
    z-index: 99 !important;
    border: 2px solid wheat;
    box-shadow: 0px 1px 0px 3px rgb(48 48 48);
}
.playersCardsWrapper .selected-card, .playersCardsWrapper .selected-card2{
    transform: rotateZ(0deg) scale(1.1) !important;
    top: -25px !important;
    z-index: 16 !important;
    border: 2px solid #099719 !important;
    box-shadow: 0px 1px 0px 3px rgb(48 48 48);
    transition: opacity 1.5s ease;
}
.flashMagicEffect{
    /*make a flash effect for card frames lasting 1s on this and target*/
    border: 3px solid purple !important;
    box-shadow: 0px 0px 0px 2px purple !important;
}
.flashMagicEffectOnBattlefield{
    border: 3px solid cyan !important;
    box-shadow: 0px 0px 0px 2px purple !important;
}
.deckWrap{
    transition: all 1s;
    position: absolute;
    opacity: 1;
    bottom: 0em;
    right: 0;
    top: -5.8em;
    right: -7px;
}
.card-button:hover, .card-button2:hover{
    z-index: 12;    
    border: 2px solid #97d7f0;
    box-shadow: 0px 4px 10px 3px rgba(151, 215, 240, 0.6); 
}

.playersCardsWrapper [id*="card1"]:not(.iconNum),
.playersCardsWrapper [id*="2card1"]:not(.iconNum){
    transform: rotateZ(-24deg) translateY(34px);
    z-index: 9;
    top: 5px;
}
.playersCardsWrapper [id*="card2"],
.playersCardsWrapper [id*="2card2"]{
    transform: rotateZ(-16.7deg) translateY(34px);
    z-index: 8;
    top: -5px;
}
.playersCardsWrapper [id*="card3"],
.playersCardsWrapper [id*="2card3"]{
    transform: rotateZ(-7.7deg) translateY(34px);
    z-index: 7;
    top: -10px;
}
.playersCardsWrapper [id*="card4"],
.playersCardsWrapper [id*="2card4"]{
    transform: rotateZ(-3deg) translateY(34px);
    z-index: 6;
    top: -15px;
}
.playersCardsWrapper [id*="card5"],
.playersCardsWrapper [id*="2card5"]{
    transform: rotateZ(0deg) translateY(34px);
    top: -17px;
    z-index: 5;
}
.playersCardsWrapper [id*="card6"],
.playersCardsWrapper [id*="2card6"]{
    transform: rotateZ(3deg) translateY(34px);
    z-index: 4;
    top: -15px;
}
.playersCardsWrapper [id*="card7"],
.playersCardsWrapper [id*="2card7"]{
    transform: rotateZ(7.7deg) translateY(34px);
    z-index: 3;
    top: -10px;
}
.playersCardsWrapper [id*="card8"],
.playersCardsWrapper [id*="2card8"]{
    transform: rotateZ(16.7deg) translateY(34px);
    z-index: 2;
    top: -5px;
}
.playersCardsWrapper [id*="card9"],
.playersCardsWrapper [id*="2card9"]{
    transform: rotateZ(24deg) translateY(34px);
    z-index: 1;
    top: 5px;
}
.cardsBattleField{
    display: grid;

    /*
    transform: rotateZ(-23deg);
    
    */
    display: block;
    position: absolute;
    top: 33%;
    /* bottom: 0; */
    height: min-content;
}
.enemyBattleArea, .playersBattleArea{
    display: flex;
    justify-content: center;
}
.wrapBattleField{
    position: relative;
    min-height: 79vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cards{
    height: 6em;
    transition: all 1s ease;
    width: 4em;
    max-width: 5em;
    border: 3px solid wheat;
    box-shadow: 0px 0px 0px 2px #444443;
    
    border-radius: 7px;
}
.playerHeroImageBadge{
    left: -46px;
    bottom: 0em;
    background: url(images/skins/web3AttackIcons/endTurn.webp);
    background-size: 100% 100%;
    width: 3em;
    height: 3em;
    position: absolute;
    z-index: 14;
    transform: rotate(0deg);
}
.minicards{
    height: 4.5em;
    width: 3.5em;
    transition: all 1s ease;
    display: block;
    max-width: 3.5em;
    border: 3px solid #251f1f;
    border: 3px solid wheat;
    box-shadow: 0px 0px 0px 2px #652c0d;
    border-radius: 1px;
}
#fullScreenIcon{cursor: pointer;}
.boosterCards{
    position: absolute;
    transition: all 1s ease;
    left: 0;
    bottom: 14em;
    transform: translateX(24px);
    z-index: 15;
}

.minicards:hover{
    border: 3px solid #78340e;
    cursor:pointer;
}
.boosterCards .confirmPlaceCardButton, .boosterCardsEnemy .confirmPlaceCardButton{
    display: block;
    bottom: -35px;
}
.boosterCards .tiltedImage, .boosterCardsEnemy .tiltedImage{
    display: none;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translate(-17px, -15px) rotate(0deg);
    right: auto;
}

.boosterCards span, .boosterCardsEnemy span{
    border: 5px solid #d18a3e;
    border-radius: 6px;
    height:77px;
    position: relative;
    width: 61px;
    display: block;
}
 .boosterCards span {
    transition: all 1s;
    transform: translateX(24px) rotate(66deg);
    margin: -0.6em 0;/*Stacks side by side*/
    margin: -3.5em 0;
}
 .boosterCardsEnemy span {
    transition: all 1s;
    transform: translateX(-24px) rotate(66deg);
    margin: -2.9em 0;/*Stacks on top*/
    margin: -0.6em 0;/*Stacks side by side*/
    margin: -3.5em 0;
}
.boosterCardsEnemy{
    position: absolute;
    right: 0;
    top: 12em;
    transform: translateX(-24px);
    margin: -1em 0;
    z-index: 2;
}
.hexIcons{    
    height: 50px;
    width: 50px;
    z-index: 3;
    position: relative;
    display: inline;
    filter: drop-shadow(0px 0px 1px blue);
}
.hexIconWrap{
    position: absolute;
    display: inline;
    height: 0;
    opacity: 0.5;
    
}
.gameIcon1{
    transform:translateX(105px) translateY(-75px);
}
.gameIcon2{
    transform: translateX(130px) translateY(-75px);
}
.gameIcon3{
    transform: translateX(-50px) translateY(0px);
}
.gameIcon4{
    transform: translateX(-60px) translateY(75px);
}
.gameIcon5{
    transform: translateX(-30px) translateY(75px);
}
.gameIcon6{
    transform: translateX(-35px) translateY(0px);
}
.gameIconCenter{
    height: 50px;
    width: auto;
    display: inline-block;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 1px blue); 
    transform: rotateZ(23deg);
    /* color: #356ecc; */   
}
.cardsOnEnemyHalf{
    position: relative;
    top: -10px;
    display: inline-block;
    transform: rotateZ(180deg);
    box-shadow: 0px 0px 0px 2px #571818;
    transition: opacity 1.5s ease;
    background-size: 100% 100%;
    
}
.cardsOnPlayerHalf{
    position: relative;
    top: 10px;
    display: inline-block;
    box-shadow: 0px 0px 0px 2px #182757;
    /* transform: rotateZ(-25deg); */
    transition: opacity 1.5s ease;
    background-size: 99% 100%;
    

}
.cardsOnPlayerHalf::before, .cardsOnEnemyHalf::before{
    content: '';
    position: absolute;
    top: -5px;
    left: -4px;
    background: #00000070;
    width: 4.9em;
    height: 7em;
    border-radius: 3px;
    box-shadow: 0 0 10px 5px rgb(0 0 0 / 34%), 0 0 20px 10px rgb(255 150 0 / 0%);
}
.onBoardCardViewer .imgIn3.merger{
    bottom: 1.25em !important;
}
.onBoardCardViewer .imgIn3.abilityToUpdate{
    bottom: 1.5em !important;
}
.onBoardCardViewer .abilityInfoSection{
    transform: translateY(-30px) translateX(1px) !important;
}
.onBoardCardViewer .abilityInfoSection2{
    transform: translateY(-50px) !important;
}
.cardWrapsOld{
    height: 6em;
    transition: all 1s ease;
    width: 4em;
    max-width: 5em;
    padding: 2px 1px;
    margin: 0 8px;
    background: url("images/frameMetalCard.webp");
    border: 3px solid #111111;
    box-shadow: 0px 0px 0px 2px #444443;
    background-size: 100% 100%;
}
.cardWraps{
    height: 6.3em;
    transition: all 1s ease;
    width: 4.35em;
    /* max-width: 5em; */
    /* padding: 2px 1px; */
    margin: 0 8px;
    /* background: url(images/frameMetalCard.webp); */
    /* border: 3px solid #111111; */
    box-shadow: none !important;
}
.deckWrap .displayCard {
    scale: 0.35 0.185;
    transform-origin: top left;
}

.deckWrap .deckWrap {
    right: -7.55em;
    top: -4px;
}
.powerUpButtonsIconWrap{
    transition: all 1s;
    height: 5.65em;
    width: 4em;
    max-width: 4em;
    position: absolute;
    border: 4px double #411e12;
    border: 0;
    border-radius: 2px 2px 0px 0px;
    right: 2px;
    cursor: pointer;
    
    transform: rotateZ(0deg);
}
.engageButtonsIconWrap{
    position: absolute;
    background: url(images/cards/powerUpCards/frame.webp) 0% 0% / 100% 100%;
    right: 0;
    bottom: 45%;
    border-radius: 2px 0 0 2px;
    border: 1px solid black;
}
.engageButtonsIcon{
    max-width: 4.2em;
}
.roundCounter{
    font-size: 5em;
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 25%;
    right: 25%;
    z-index: 1;
    color: #d83a3a;
    text-shadow: 1px 1px 1px #971212, -1px 1px 1px #690000, 1px -1px 1px #971212, -1px -1px 1px maroon;
    animation: enlarge 2s ease;
}
#turnsHolder{
    display:none;
}
@keyframes enlarge {
    /* Define your animation keyframes */
    0% {
      font-size: 3em;
    }
    65% {
        font-size: 7.5em;
    }
    100% {
        font-size: 3em;
      }
  }
#engage{
    
    cursor: pointer;
    transition: all 0.2s ease;
}
#engage:hover, #boost:hover{
	
}


.arcadeBossWrap{
    min-height: 15em;
    background: url("images/frameMetalAndPaper.webp");
    background-size: 100% 100%;
    margin: 0em auto 1em;
    padding: 1em 1.5em;
    border: 1px solid wheat;
    position: relative;
}
.bossIconsWrap{
    position: absolute;
    left: 12em;
}
.bossInfoWrap{
    position: absolute;
    top: 0.25em;
}
.arcadeBossImageWrap{
	margin-top: 0;
    position: relative;
    top: 0.75em;
    text-align: center;
    /* right: 1.1em; */
    width: 10em;
}

.imgWrapCard{
    margin: 0.25em 0.5em;
    background-size: 100% 100% !important;
    display: inline-block;
    background: url(images/cards/powerUpCards/frame.webp);
    height: 1.75em;
}
.imgWrapCard img{
    height: 1.75em;
    
}
.nameWrap{
    height: 10em;
    position: absolute;
    width: 10em;
    left: 0;
    display: inline-block;
}
.arcadeBossImageWrap div{
    position: relative;
}
.arcadeBossImageWrap img{
    max-height: 10em;
    border: 1px solid wheat;
    transition: all 1s ease;
    border-radius: 5px 5px 0 0;
    position: absolute;
    left: 0;
}
.fullView{
    position: absolute;
    top: -0.35em;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #00000000, #550010, #00000096);
    z-index: 0;
    bottom: 0;
    max-height: 36.5em;
    scroll-behavior: smooth;
    overflow: hidden; /* Hides the scrollbar */
    overflow-y: scroll; /* Keeps the vertical scroll functionality */
    scrollbar-width: none; /* For Firefox */
    transition: all 1s ease;

}
.fullView::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}
.arcadeBossName{
    position: relative;
    top: 8.55em;
    width: 10.1em;
    padding: 0.75em 0;
    background-image: url(images/nameHolderTop.webp);
    background-size: 100% 100%;
    display: inline-block;
}
.arcadeBossName div{
    text-align:center;
}



.arcadeBossesHeader{
	border-bottom: 1px solid wheat;
	cursor:pointer;
    padding: 1em 0 0em;
}
.raffleHeaderSpan{
	top: 1em;
    position: relative;
}


.creatureImages{
    max-width: -webkit-fill-available;
    position: absolute;
    /* left: 0; */
    /* right: 0; */
    scale: 2.2;
}

.creatureImagesEnemy{
    max-width: -webkit-fill-available;
    position: absolute;
    
    /* left: 0; */
    /* right: 0; */
    scale: 2.2;
}
/*normal/big below*/
.creatureImages, .creatureImagesEnemy{
    top: 1.75em;
    left: 18px;
}

/*

    .card-button{
        border: 2px solid #0bc602;
        box-shadow: 0 0 6px 1px #0bc602;
    }
    .card-button2{
        border: 2px solid red;
        box-shadow: 0 0 6px 1px #ff0000;
    }
*/
.outerCardIcons{
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin:0  1px;/*Instead of border, if add border, remove this*/
    top: 3px;
    position: relative;
    filter: drop-shadow(0px 1px 2px black); 
    display: none;
}
.minionWrapper{
    display: block;
    position: absolute;
    top: -23px;
    right: 0;
}
.minionPreview img{

    width: 16px;
    height: 16px;
}
.minionPreview{
    max-width: 16px;
    width: 16px;
    position: relative;
    height: 22px;
    transition: all 0.5s ease;
    border: 1px solid #232323;
    border-bottom: 0;
    display: inline-block;
    /* top: -0.5em; */
    margin: 0 2px;
    opacity: 0;
}
#minionOneView, #minionOneView2{
    left: -2px;    
    transition: all 0.3s ease;
}
#minionTwoView, #minionTwoView2{
    left: 14px;
    transition: all 0.6s ease;
}
#minionThreeView, #minionThreeView2{
    left: 30px;    
    transition: all 0.9s ease;
}
.Heart-all-same-class{
    border: 2px dotted magenta;
}
.Stone-all-same-class{
    border: 2px dotted yellow;
}
.Water-all-same-class{
    border: 2px dotted blue;
}
.Fire-all-same-class{
    border: 2px dotted red;
}
.Death-all-same-class{
    border: 2px dotted black;
}
.Earth-all-same-class{
    border: 2px dotted green;
}
.Magic-three-in-a-row{
    border-top: 2px solid purple;
    border-bottom: 2px solid purple;
    border-left: 2px dashed purple;
    border-right: 2px dashed purple;
    box-shadow: 0px 0px 10px 7px purple;
}
.Magic-three-in-a-rowfirstLast{
    border-top: 2px solid #eb19f6;
    border-bottom: 2px solid #eb19f6;
    border-left: 2px solid #eb19f6;
    border-right: 2px solid #eb19f6;
}
    .Melee-three-in-a-row{
        border-top: 2px solid gold;
        border-bottom: 2px solid gold;
        border-left: 2px dashed gold;
        border-right: 2px dashed gold;
        box-shadow: 0px 0px 10px 7px gold;
    }
    .Melee-three-in-a-rowfirstLast{
        border-top: 2px solid darkorange;
        border-bottom: 2px solid darkorange;
        border-left: 2px solid darkorange;
        border-right: 2px solid darkorange;
    }
.Ranged-three-in-a-row{
    border-top: 2px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    border-left: 2px dashed #ff0000;
    border-right: 2px dashed #ff0000;
    box-shadow: 0px 0px 10px 7px #ff0000;
}
.Ranged-three-in-a-rowfirstLast{
    border-top: 2px solid #f63939;
    border-bottom: 2px solid #f63939;
    border-left: 2px solid #f63939;
    border-right: 2px solid #f63939;
}
.selectionList{
	position: relative;
    top: 2%;
    margin: 0 auto;
    text-align: center;
}
.selectionList span{
	width: auto;
    min-width: 2.25em;
    height: 2.25em;
	display: table-cell;
}
#cardClassMain2{
    transform: rotateY(180deg);
}
.selectedCard, .selectedOpponentCard{
	margin:0 auto;
	width:7em;
	top: 1em;
    position: relative;
	
}
#cardsPlaying{
	position: relative;
    width: 100%;
}
.cardSPreview, #cardsPlaying{
	margin:0 auto;
	text-align:center !important;
}
.menuListInside, .menuListInsideTop{
    top:5px;
}
.infoSlot{
    padding: 0.75em 1em 0.75em;
    display: block;
    height: 1em;
    text-align: right;
    position: relative;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
}
.infoSlot img{
    position: absolute;
    left: 0.5em;
    top:0.8em;
    
    height: 18px;
    width: 18px;
}
.infoSlotRightNum{
    POSITION: ABSOLUTE;
    RIGHT: 1EM;
    TOP: 0.675em;
}
.hiddenForNow{
    display: none;
}
.inBlockItNow{
    display: inline-block;
}
.playerTrophies{
    border: 1px solid #f5deb3;
    box-shadow: 0 0 0px 1px black;
    background-color: #2e5327;
    max-width: fit-content;
    margin: 0 auto;
    min-height: 1em;
    border-radius: 4px;
    padding: 6px 10px 6px 8px;
    display: block;
    position: relative;
    background: #2f2753;
    border-radius: 10px;
    border: 3px solid #d4a373;
    transition: all 0.5s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    font-family: "Cinzel", serif;
    color: #ffeabd;
    text-shadow: 1px 1px 1px #000;
}
.holderForNum{
    position: relative;
}
.socialIconsNew {
    display: inline-flex;
    gap: 12px; /* Adjust spacing between icons */
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.follow-text {
    font-size: 18px;
    color: #ffcc00;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-shadow: 0px 0px 5px rgba(255, 223, 186, 0.8);
}
.magic-divider {
    height: 2px;
    background: linear-gradient(to right, #ffd700, #fff, #ffd700);
    margin: 10px auto;
    margin-top: 2.5em;
    opacity: 0.6;
}
.footerWrap{
    margin: 1em 0;
}

.footieWrap{
    display: block;width: 100%;
    color: #c9b37a;
    font-size: 16px;
    text-shadow: 0px 0px 3px rgba(255, 223, 186, 0.4);
    text-align: right;
}
.socialIconsNew a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 10px; /* Slightly rounded edges for a card effect */
    background: radial-gradient(circle, #40332e 30%, #1c1a18 90%);
    box-shadow: 0px 4px 10px rgba(255, 223, 186, 0.4), inset 0px 2px 5px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 223, 186, 0.8);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    font-size: 26px;
    color: #ffcc00; /* Gold color for icons */
    position: relative;
}

.socialIconsNew a:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0px 6px 15px rgba(255, 223, 186, 0.6), inset 0px 3px 7px rgba(255, 255, 255, 0.3);
    border-color: #ffcc66;
}

.socialIconsNew a i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.socialIconsNew a:hover i {
    transform: scale(1.2);
    color: #fff7cc; /* Slight glow effect */
}

/* Optional glow effect for magical touch */
@keyframes glow {
    0% { box-shadow: 0px 0px 5px rgba(255, 223, 186, 0.6); }
    50% { box-shadow: 0px 0px 15px rgba(255, 223, 186, 0.8); }
    100% { box-shadow: 0px 0px 5px rgba(255, 223, 186, 0.6); }
}

.socialIconsNew a:hover {
    animation: glow 1.5s infinite alternate;
}

.badgeNum{
    right: 0.5em;
    z-index: 2;
    color: #d8cca6;
    top: 20px;
}
.magicFoot{
    position: relative;
    margin: 0 auto;
    padding: 1em 0 0;
    background: linear-gradient(180deg, #00000042, #ff0030a1, #00000066);
    background: linear-gradient(180deg, #000000, #0087ff, #00000099);
    background: linear-gradient(180deg, #000000, #81021b, #00000099);
    background: linear-gradient(180deg, #000000, #2e2e2e, #00000099);
    

    background-size: 100% 100%;
}

.holderForListInProfile:hover span{
    color: #fff3e0 !important;
    cursor: text;
}
.attackingButton{
    position: absolute;
    top: -2.4em;
    left: -0.55em;
    z-index: 15;
    transform: rotate(-11deg);
}
.heroPlayerWrap{
    position: absolute;
    z-index: 14;
    transform: rotate(0deg);
    left: -2.75em;
    top: -0.65em;
}
.web3EngageWrap{
    position: absolute;
    z-index: 13;
    transform: rotate(0deg);
    position: absolute;
    top: 1.6em;
    left: -1.6em;
}
.web3IconImage{
    max-height: 3em;
    filter: drop-shadow(0px 0px 1px red);
    cursor: pointer;
    transition: all 0.1s ease;
}
.doorEntrance{
    border: 2px solid #411e12;
    border-radius: 50% 50% 0 0;
    background-image: url(images/testbg1.webp);
    background-size: 100% 100%;
    box-shadow: 0 0 11px 6px inset black;
}
.selected-card .confirmPlaceCardButton{
    display: grid;

}
.confirmPlaceCardButton{
    border-radius: 2px;
    text-transform: uppercase;
    font-family: anton;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.playerIconArea{
    border-radius: 50% 50%;
    display: inline-block;
    width: auto;
    z-index: 14;

}
.heroIconImage{
    filter: drop-shadow(0px 0px 1px red);
    max-width: 2.75em;
    cursor: pointer;
    transition: all 0.1s ease;
}
.heroIconImage:active, .attackingButton:active, .web3EngageWrap:active{
    scale: 0.9;
}
.playerIconImage{
    border-radius: 50%;
    max-width: 1.25em;
}
.playerHeroImage{
    position: absolute;
    top: 0.25em;
    left: 0em;
    max-height: 1em;
}
#engageInner{
    filter: drop-shadow(0px 0px 1px red);
    transition: all 0.1s ease;
}
.moving-towards-players-hand{
    transform: translateX(-120px);
    transition: all 2.5s ease;
    z-index: 17;
    opacity: 0.7;
}
.rollIconLogo{
    position: absolute;
    top: -1.75em;
    left: -1em;
    z-index: 1;
    max-height: 4em;
    transform: rotateZ(-25deg);
    filter: drop-shadow(0px 0px 1px red);
}
.listInProfile{
    position: relative;
    text-align: left;
    max-width: 14em;
    margin: 1em;
    min-width: 10em;
    display: inline-block;
    box-shadow: 0px 1px 2px 1px black;
}
.listInProfileWrap{
    
    overflow-y: auto;
}
.fanFont{
    bottom: 5px;
    position: relative;
    left: 4px;
}
.fantasyFont{
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: anton;
    color: #ffdc73;
    text-shadow: 1px 1px 1px black;
}
.listImg{
    position: absolute;
    right: 9px;
    bottom: 7px;
    color:#f5deb3;
}
.fa, .fab, .fad, .fal, .far, .fas{
    line-height: normal !important;
}
.holderForListInProfile{
    position: relative;
    display: block;
    border-bottom: 1px solid wheat;
    background: #17058c26;
    text-align: left;
    MAX-HEIGHT: 36.4PX;
}
.holderForListInProfile:hover{
    background: #05118c4f;
}
.iconNumberProfileWrap{
    position: relative;
}
.iconNumberProfile{
    position: absolute;
    z-index: 1;
}
.innerPackArea{
    background: url("images/cards/packs/MM.webp");
    background-size: 100% 100%;
    height: 19em;
    width: 12em;
    border: 0 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 19.25em;
    height: 26.5em;

}
/*
height: 368px;
min-width: 224px;

width: 19.25em;
height: 26.5em;
*/
.buttonsOpenAnotherPack{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -10%);
    width: 14em;
    text-align: center;
    z-index: 1000000;
    display: block;
    cursor: pointer;
}
.classEasy{
    color:green;
}
.classMedium{
    color:orange;
}
.classHard{
    color:red;
}
.buttonscardPacks{
    padding: 0;
    background: none;
    width: 60%;
    cursor: pointer;
}
.cardPackButtonsWrap{
    position: absolute;
    bottom: 9%;
}

#popUpWrapperUserPackOpening{
    background-color: #000;
    transition: all 1s ease;
    border: 0 !important;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(images/woodFrame2.webp);
    background-size: 100% 100% !important;
    background: linear-gradient(122deg, #000000c2, #2e2e2e, #000000de);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;
    padding: 0;
    font-family: "MedievalSharp", cursive;
    text-align: center;
    width: 100%;
    height: 100%;
}
.darkMedievalBrownButton{
    background: linear-gradient(90deg, #2e1a10, #4a2818);
    border: 1px solid #a67c52;
    padding: 12px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    color: #d4af7a;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}
/* fantasy framed button (matches the mock image) */
.newMedievalBrownButton, 
.popUpWrapper .darkMedievalBrownButton{
  /* size */
  padding: 10px 28px;
  border: 0;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 0 5px;
  /* core plate */
  background: linear-gradient(180deg,#4a1f00 0%, #2a0f00 60%, #210b00 100%) !important;

  /* inner bevel */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.55);

  /* text */
  color:#ffdf86;
  font-family:'Cinzel Decorative',serif;
  font-weight:700;
  letter-spacing:.03em; 
  text-transform:uppercase;
  text-shadow: 0 1px 0 #1a0a00, 0 0 6px rgba(255,210,120,.35);

  /* prevent layout shift on active */
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.loginPopUpNewis .newMedievalBrownButton{
    display: list-item;
}
/* outer gold frame */
.newMedievalBrownButton::before, 
.popUpWrapper .darkMedievalBrownButton::before{
  content:"";
  position:absolute; 
  inset: -4px;
border-radius: 8px;
  background:
    linear-gradient(180deg,#c99538 0%,#7d4f11 60%,#e8bb62 100%);
  /* carve */
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.25),
    inset 0 -2px 3px rgba(0,0,0,.35),
    0 0 0 1px #7c4f12;
  z-index:-1;
}

/* second (thin) inner rim like the mock */
.newMedievalBrownButton::after, 
.popUpWrapper .darkMedievalBrownButton::after{
  content:"";
  position:absolute; 
  inset:-2px;
  border-radius:8px;
  border:2px solid rgba(250,208,110,.85);
  box-shadow: inset 0 0 3px rgba(255,226,150,.4);
  pointer-events:none;
}

/* hover/press */
.newMedievalBrownButton:hover{
  filter: brightness(1.06);
}
.newMedievalBrownButton:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.65);
}

/* OPTIONAL: large “primary” like the big LOGOUT in the mock */
.newMedievalBrownButton.is-large{
  padding: 14px 36px;
  font-size: 1.1rem;
  border-radius: 16px;
}




    /* === DARK FANTASY TCG STYLE === */
.loginPopUpNewis {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #624a2e;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(150, 75, 0, 0.8);
    min-width: 250px;
    top: 1em;
    position: relative;
}

.loginPopUpNewis .holderForListInProfile {
    background: linear-gradient(90deg, #2e1a10, #4a2818);
    border: 1px solid #a67c52;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    color: #d4af7a;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}

.loginPopUpNewis .holderForListInProfile:hover {
    background: #5e3c20;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(200, 140, 50, 0.7);
}

.loginPopUpNewis .imgInNewTokens {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
}

/* === CARTOONISH WOW-INSPIRED TCG STYLE === */
.cartoonStyle .loginPopUpNewis {
    background: #3c3f54;
    border: 3px solid #ffc400;
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(255, 228, 82, 0.9);
    width: 260px;
    padding: 15px;
}

.cartoonStyle .holderForListInProfile {
    background: linear-gradient(90deg, #5468ff, #ff67c0);
    border: 2px solid white;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    transition: 0.2s;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    text-shadow: 1px 1px 2px black;
    cursor: pointer;
    color: white;
}

.cartoonStyle .holderForListInProfile:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 12px rgba(255, 250, 100, 0.8);
}

.cartoonStyle .imgInNewTokens {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.iconsInProfile{
    width: 30px;
    height: 30px;
    position: relative;
    top: 5px;
    filter: drop-shadow(0px 0px 2px #000);
    border-radius: 50%;
    text-decoration: none;
}
.topMiniIcon{
    width: 25px;height: 25px;cursor:pointer;position:absolute;top:1em;right:1em;
    filter: drop-shadow(0px 0px 2px #dddddd);
}
.shuffleBtn{
    background: url(images/skins/shuffle.webp) 0% 0% / 100% 100%;
}
.whiteFlag{
    background: url(images/gameIcons/concedeIcon.webp) 0% 0% / 100% 100%;
    cursor: pointer;
    z-index: 15;
}

.iconsInProfile2{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    position: relative;
    top: 8px;
}
.iconsInProfileHack{
    position: relative;
    top: 5px;
    filter: drop-shadow(0px 0px 2px #000);
    border-radius: 50%;
    text-decoration: none;
}
.miniImg{
    width: 20px;
    height: 20px;
    top: 0;
    filter: drop-shadow(0px 0px 2px wheat);
}
.playerTrophies img{
    width: 30px;
    height: 30px;
    background: wheat;
    border: 2px outset #d60808;
    filter: drop-shadow(0px 0px 2px);
    border-radius: 19%;
    margin: 1px 4px 6px;
    box-shadow: 0px 0px 0px 1px #000000;
    position: relative;
    top: 4px;
    cursor: pointer;
}
.playerTrophies span{
    position: relative;
}
.topNumIcons{
    position: absolute !important;
    top: -30px;
    right: -3px;
    color: wheat;
    text-shadow: 0px 0px 1px black;
    font-family: "Cinzel", serif;
    font-size: 1em;
    color: #ffeabd;
    text-shadow: 1px 1px 0px #000;
    z-index: 1;
}
.Toplefter{
    position: absolute !important;
    top: -1.1em;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: anton;
    left: -10px;
    color: wheat;
    text-shadow: -1px 0px 0px black, 1px 0px 0px black, 0px 1px 1px black, 0px 1px 5px black;
}
.infoMid{
    top: -2px;
    text-align: center;
    height: 1em;
    font-size: 0.9em;
    background: #5c574b78;
    width: fit-content;
    margin: 0 auto;
    padding: 0px 5px 2px;
    border: 1px solid #616161;
    position: relative;
    cursor: pointer;
    border-radius: 2px;
    border-bottom: 1px solid #4c4c4c;
    display: block;
    text-shadow: 1px 1px 0px black;
    border-top: 1px solid #4c4c4c;
}
.infoMid:hover,.infoMid:active{
    background: #47433b96;

}

.infoSlot span{
}
progress{
	accent-color: #1fb84e;
}
.customProBar{
    color: #fff ;
    background: linear-gradient(176deg, #04ff00, #055d18);
    height: 10px;
    width: 100%;
    border-radius: 0px 2px 2px 0px;
    display: block;
    position: relative;
    transition: all 0.5s ease;
}
.customProBarWrap{
    height: 10px;
    min-width: 60px;
    border-radius: 2px;
    background: linear-gradient(306deg, rgb(153 9 9), #7a0404);
    display: block;
    border: 1px solid #232323;
    transition: all 0.5s ease;
}
.customProBarWrap {
  position: relative;
  display: block;
  height: 20px !important;
  border-radius: 6px;
  background: linear-gradient(180deg, #2b1000 0%, #1a0900 100%) !important;
  border: 2px solid #6a3a00;
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.15),
    0 0 4px rgba(0, 0, 0, 0.8);
  padding: 2px;
  overflow: hidden;
}

.customProBar {
  position: relative;
  display: block;
  height: 100% !important;
  border-radius: 1px;
  width: var(--progress, 60%);
  background: linear-gradient(180deg, #6c1d9b 0%, #3a004a 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    0 0 4px rgba(170, 70, 255, 0.4);
  transition: width 0.4s ease;
}

/* highlight shimmer line across top */
.customProBar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  mix-blend-mode: overlay;
}

/* outer golden trim effect */
.customProBarWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 1px solid rgba(255, 200, 100, 0.7);
  box-shadow:
    0 0 6px rgba(255, 200, 80, 0.25),
    inset 0 0 4px rgba(255, 180, 80, 0.15);
  pointer-events: none;
}

.manaBadge{
    position: relative;
    top: -15px;
    width: 10px;
    height: 10px;
}
.customProBarWrapVertical{
    height: 50px;
    min-width: 7px;
    position: absolute;
    border-radius: 2px;
    background: grey;
    display: inline-block;
    border: 1px solid #232323;
    background: linear-gradient(286deg, #f500ff, #05535d);/*Purpleish bg*/
    background: linear-gradient(286deg, #f500ff, #7a6a07);/*Pinkish bg --- maybe find something in between*/
    background: linear-gradient(286deg, #f500ff, #4b457d);/*ChatGPT made the inbetween*/
    top: 10px;
}
.customProBarVertical{
    background: linear-gradient(286deg, #a00a81, #05535d);
    height: 5px;
    width: 10px;
    max-height: 58px;
    position: absolute;
    bottom: 0;
    border-radius: 0 0 1px 1px;
    display: block;
    transition: all 0.5s ease;
}
.squareNum{
    width: max-content;
    fill: wheat;
    color: black;
    padding: 0px 8px 0px;
    font-family: anton;
    font-size: 1.5em;
    background: #f5deb354;
    text-shadow: none;
    border: 2px groove #ffd700;
    border-left: 2px ridge #ffd700;
    border-top: 2px ridge #ffd700;
    right: 3px;
    border-radius: 0px;
}
.hpBars{
	width: -webkit-fill-available;
    height: 2.25em;
    top: 1px;
    position: relative;
    margin: -1px 0 0px;
}
#hp, #hp2{
	position: absolute;
    left: 8%;
	z-index:1;
}
.buttonInnerSpan{
	border: 2px ridge wheat;
    border-radius: 2px;
    padding: 3px;
    padding-right: 3px;
    width: 99%;
    padding-left: 0px;
    height: 99%;
	text-shadow:none;
    display: inline-block;
    background: #331d0359;
	
    cursor: pointer;
}
.buttonInnerSpan:hover{
	background: #331d03ad;
    color: #ac9311;
    text-shadow: 1px 1px 1px #eee8bb;
}
.buttonOuterSpan{
	    display: inline-table;
    background: #00000047;
    color: #cfcfcf;
    text-shadow: 1px 1px 1px #edd100;
    position: relative;
    border: 2px wheat;
    border-style: groove;
    padding: 0;
    padding-right: 5px;
	margin: 2px;
    font-family: 'Sedgwick Ave Display', cursive;
}

.boxes{
	padding: 0.2em 0.25em 0;
    margin: 0.5em;
	display: table;
    width: -webkit-fill-available;
	cursor:pointer;
	background-size:100% 100%;
}
.boxesImg{
	padding: 0.2em 0.25em 0;
    margin: 0.5em;
    display: inline-flex;
    width: max-content;
    cursor: pointer;
    background-size: 100% 100%;
    max-width: 96%;
    max-height: 17vh;
}
.sideBoxes{
	margin: 0.25em 2.75em 0 1em;
    font-family: system-ui;
    color: white;
    display: inline-flex;
    text-shadow: 1px 1px 1px black;
	border-radius:8px;
}
#fucker{
	padding-top: 0.15em;
}
.littleBlue i{
	font-style:normal;
}
.gameMenu nav div span span:hover{
	    background: #073a9be8;
    color: #e2deca;
    text-shadow: 1px 1px 1px #000000;
}
.gameMenu nav div{
	max-width: 69%;
    margin: 0 auto;
	background:#00000078;
	border:3px groove black;
}
#nftGallery{
	text-align:center;
}
.gameMenu nav{
	display:inline-flex;
	padding: 0 2em 0;
	position: relative;
	max-width: 69%;
    margin: 0 auto;
}
#nftSearchBar2::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

#nftSearchBar2:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

#nftSearchBar2::-ms-input-placeholder { /* Microsoft Edge */
  color: black;
}
.sacrificeHeader{
    font-size: 2em;
    text-shadow: 1px 1px 1px black;
    background: #3e3e3e1f;
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    color: wheat;
    border: 2px solid black;
    border-bottom: 2px solid black !important;
}
.textOnIcon{
    display: block;
    text-align: left;
    /* width: 100%; */
    position: relative;
    right: 75%;
    top: 1em;
    padding-left: 0em;
}
.sacrificeButton{
    font-size: 2em;
    text-shadow: 1px 1px 1px black;
    background: #3e3e3e1f;
    display: inline-block;
    margin: 1em auto 0;
    cursor: pointer;
    max-height: 2em;
    max-width: 221px;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    border: 1px solid black;
    border-bottom: 2px solid black !important;
    transition: all 0.2s ease;
}
.selectionView{
    margin: 0 auto;
    padding: 1em;
    transition: all 0.4s ease;;
    box-shadow: 0px 2px 6px 5px #00000069;
    border-radius: 3px;
    max-width: 60%;

}
.selectionView div img:hover, .selectionView div img:active{
    border-style: dotted;
}
    .selectionView div img{
    display: flex;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px #a60000;
    padding: 0px;
    border-style: dashed;
}
.selectionView div:hover, .selectionView div:active{
    background: #23232396;
    cursor: pointer;
    box-shadow: 0px 2px 2px 2px #00000069;
}
    .selectionView div{
    display: inline-block;
    padding: 1em;
    margin:8px 6px ;
    background: #23232369;
    border: 1px solid wheat;
    border-radius: 3px;
    box-shadow: 0px 2px 6px 1px #00000069;
}
.selectionView div span{
    background: #033653;
    padding: 0.25em;
    border-radius: 3px;
    border: 2px solid;
    border-color: #033047;
    display: inline-block;
    text-shadow: 1px 1px 1px black;
    border-top: 3px solid wheat;
    border-bottom: 3px solid wheat;
    box-shadow: 0px 1px 3px 0px #001824;
    color: wheat;
    cursor: pointer;
    top:4px;
    position: relative;
}
.sacrificeButton:hover, sacrificeButton:active{
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    background:#3e3e3e45;
    box-shadow: 0px 1px 2px 2px #000000;
}
.sacrificeContainer{
    border: 4px groove #134e67;
    width: fit-content;
    border-radius: 3px;
    margin: 1em auto 0;
    box-shadow: 1px 2px 3px black;
    background: #121212;
    padding: 0.25em 0.5em;
    max-height: 15em;
    overflow-y: auto;

}

.exitIconBrighter{
    cursor: pointer;
    position: absolute;
    z-index: 4;
    color: #c3c3c3;
    top: 0.25em;
    border: 2px solid wheat;
    right: 0.25em;
    /* background: radial-gradient(circle, #5a1a1a, #300000); */
    color: #f8d9b4;
    
    border-radius: 50%;
    width: 1em;
    /* padding: 3px; */
    font-size: 1.75em;
}
.iconDeck{
    cursor: pointer;
    position: absolute;
    z-index: 4;
    color: #c3c3c3;
    top: 1.5em;
    border: 2px solid wheat;
    right: 0.25em;
    /* background: radial-gradient(circle, #5a1a1a, #300000); */
    color: #f8d9b4;
    
    border-radius: 50%;
    width: 1em;
    /* padding: 3px; */
    font-size: 1.75em;
}

.iconsettingsDeck{
    cursor: pointer;
    position: absolute;
    z-index: 4;
    color: #c3c3c3;
    top: 0.25em;
    border: 2px solid wheat;
    right: 1.5em;
    /* background: radial-gradient(circle, #5a1a1a, #300000); */
    color: #f8d9b4;
    
    border-radius: 50%;
    width: 1em;
    /* padding: 3px; */
    font-size: 1.75em;
}
.iconDeckOwned{
    cursor: pointer;
    position: absolute;
    z-index: 4;
    color: #c3c3c3;
    top: 1.5em;
    border: 2px solid wheat;
    right: 1.5em;
    /* background: radial-gradient(circle, #5a1a1a, #300000); */
    color: #f8d9b4;
    
    border-radius: 50%;
    width: 1em;
    /* padding: 3px; */
    font-size: 1.75em;
}
.exitIconBrighter:hover, .exitIconBrighter:active {
    border: 2px solid #bca06c;
}
.ownedAmountOfCards{
    letter-spacing: 0.02em;
    font-family: anton;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    position: absolute;
    right: 5px;
    top : 0;
}
.labelForIcons{
    color: #d8cca6;
    text-decoration: none;
    position: relative;
    text-transform: uppercase;
    font-family: anton;
    letter-spacing: 0.03em;
    text-align: center;
    height: 0;
    /*bottom: 19px;
*/
    transform: translateY(-19px);
    transform: translateY(5px);
    display: block;

    text-shadow: 1px 2px black;
    margin: 0 0em 0 0.5em;
}
.labelForIcons:hover, .labelForIcons:active{
    color:wheat;
}
.bigImage{
    background-size: 100% 100%;
    max-width: 100%;
    filter: drop-shadow(0px 0px 3px #000);
}
.fireSaleIcon{
    top: 2em;
    left: 0;
    position: relative;
    width: 5em !important;
    height: 5em;
    border: none !important;
    box-shadow: none !important;
}
.semiBigImage{
   background-size: 100% 100%;
    max-width: 70%;
    max-height: 14em;
    display: block;
    filter: drop-shadow(0px 0px 3px red);
    border-radius: 5px;
    margin: 0 auto;
}

.infoFrame{
    background: url(images/emptyBarHolder.webp) 0% 0% / 100% 100%;
    padding: 3em 5em;
    margin: auto;
}
.infoFrameNoBg{
    
    margin: auto;
    line-height: 20px;
    color: #ffebc5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-shadow: 1px 1px 1px black;
}
.blackShadow{
    text-shadow:2px 2px 0px black, 0px 2px 0px black, -2px 2px 0px black, 0px -2px 0px black, 2px -2px 0px black, -2px -2px 0px black;
}
.redShadow{
    text-shadow:2px 2px 0px #e50000, 0px 2px 0px #e50000, -2px 2px 0px #e50000, 0px -2px 0px #e50000, 2px -2px 0px #e50000, -2px -2px 0px #e50000;
}
.redShadowGraded{
    text-shadow: 2px 2px 0px #900404, 0px 2px 0px #900404, -2px 2px 0px #900404, 0px -2px 0px #e50000, 2px -2px 0px #e50000, -2px -2px 0px #e50000;
}
.redShadowWithExtra{
    text-shadow: 2px 2px 0px #900404, 0px 2px 0px #900404, -2px 2px 0px #900404, 0px -2px 0px #e50000, 2px -2px 0px #e50000, -2px -2px 0px #e50000, 0 0 10px rgb(255 0 0 / 80%), 0 0 20px rgb(248 72 72 / 50%);
}
.blueShadow{
    text-shadow: 2px 2px 0px #000, 0px 2px 0px #000, -2px 2px 0px #ada464, 0px -2px 0px #c5bf7e, 2px -2px 0px #c5bf7e, -2px -2px 0px #c5bf7e, 0 0 10px rgb(0 224 255 / 80%), 0 0 20px rgb(214 214 214 / 50%);
    
}.redBlackShadow{
    text-shadow:1px 1px 0px red, 0px 1px 0px red, 1px 0px 0px red, 1px 2px 0px #000000;
}

  
.wheatFill{
    color: #f0eaa6;
    transition: all 1s;
}
.tcgFontHeader{
    color: #f0eaa6;
    transition: all 1s;
    font-family: 'Cinzel', serif;
    filter: drop-shadow(0px 0px 2px #000);
}
.blackFill{
    color: #000;
    transition: all 1s;
}
.blackFill:hover, .blackFill:active{
    color: wheat;
    text-shadow: 2px 2px 0px #000, 0px 2px 0px #000, -2px 2px 0px #000, 0px -2px 0px #900404, 2px -2px 0px #e50000, -2px -2px 0px #e50000;
}
.wheatFill:hover, .wheatFill:active{
    color:#0552de;
    text-shadow: 2px 2px 0px #900404, 0px 2px 0px #900404, -2px 2px 0px #900404, 0px -2px 0px #e50000, 2px -2px 0px #e50000, -2px -2px 0px #e50000;
}
.infoMiniBox{
    background: url(images/testBg.webp) 0% 0% / 100% 100%;
    padding: 3em;
    margin: 1em auto;
    max-width: 320px;
    text-shadow: 1px 1px 1px black;
    filter: drop-shadow(0px 3px 9px wheat);
}
.blueHeader{
    font-family: 'Anton';
    color: #6495ed;
    letter-spacing: 1px;
}
.orangeHeader{
    font-family: 'Anton';
    color: #fea600;
    letter-spacing: 1px;
}
.redHeader{
    font-family: 'Anton';
    color: #e53a3a;
    letter-spacing: 1px;
}
.miniFont{
    font-size:0.75em;
    line-height: 16px;
    bottom: 16px;
    position: relative;
}
.heroCards {
    color: wheat;
    padding: 12px 30px;
    text-shadow: 1px 1px 1px black;
    position: relative;
    border-radius: 1%;
    text-align: left;
    
    
    
    background-image: url(images/cards/limitedEditions/deathCard.webp);
    background-size: 100% 100%;
    
}

.innerMenuUlToHideAndShow, .innerMenuUlToHideAndShowTop, .innerMenuUiAlwaysShow{
    margin:0px 4px 0px 0px ;
    transition: all 0.4s;
    top: 0;
    padding-inline-start: 0;
    display: block;
    position: relative;
    text-align: left;
}
.MenuStyle{
    padding-inline-start: 0;margin:0.5em auto 0.75em;
}
.MenuStyle li span {
    margin: 0.25em;
}
.innerMenuUlToHideAndShow li, .innerMenuUlToHideAndShowTop li{
    display: inline-block;
}
.innerMenuUlToHideAndShow li{
    display: inline-block;
    position: relative;
    top: 19px;
}
.nftContainerBigger div, .popUpWrapperMutableMorphs div{
    display: inline-block;
}
.nftContainerBigger div div, .popUpWrapperMutableMorphs div div{
    display: block;
}
.nftContainerBigger .displayCard {
    zoom: 0.5;
}
/* Make button container a vertical column */
.mutation-button-container {
    
  flex-direction: column;
  gap: 10px;
  
}
.woodScroller {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 2px solid #8b5e3c;
  background: rgba(32, 22, 10, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 6px #000;
  font-family: 'Cinzel', serif; /* or any medieval-looking font you use */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shopItem {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

.shopItem:hover {
  background: rgba(255, 255, 255, 0.05);
}

.shopItem.notOwned strong {
  opacity: 0.5;
  filter: grayscale(40%);
}
.medievalTab {
	background: #3b2e1c;
	border: 2px solid #c2a76d;
	color: #f4e4c1;
	padding: 6px 12px;
	border-radius: 6px;
	font-family: 'Cinzel', serif;
	cursor: pointer;
	transition: background 0.2s;
}
.medievalTab:hover {
	background: #5a4329;
}

.itemRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itemName {
  font-weight: bold;
  color: #f0e6d2;
}

.equipActionBtn,
.traitActionBtn {
  background: #3a2b1e;
  border: 1px solid #a8835d;
  color: #ffe;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 14px;
}

.equipActionBtn:hover,
.traitActionBtn:hover {
  background: #5c4129;
  border-color: #d4a373;
}

.prev-next-button {
  background: linear-gradient(to bottom, #3b2b18, #261a10); /* aged bronze-like */
  color: #f0e6c8; /* parchment/gold text */
  font-family: 'Cinzel', serif;
  font-size: 16px;
  border: 2px solid #141313; /* bronze/gold */
  border-radius: 8px;
  padding: 6px 16px;
  box-shadow: 0 0 8px rgba(255, 210, 120, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 1px #000;
}

.prev-next-button:hover {
  background: linear-gradient(to bottom, #4e3a22, #352718);
  box-shadow: 0 0 10px rgb(147 145 141 / 40%);
  transform: translateY(-1px);
}

.prev-next-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 5px rgba(255, 220, 140, 0.2);
}
/* Square WoW/Diablo style buttons */
.SideButtonsWowStyled {
      width: 68px;
    height: 68px;
  background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
  border: 2px solid #5c3a1a;
  border-radius: 2px;
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    2px 2px 5px rgba(0, 0, 0, 0.8);
  color: #f0d788;
  font-weight: bold;
  font-family: 'Friz Quadrata', 'Arial Black', Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  align-items: flex-end;
    display: flex;
    justify-content: center;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}
.bottomStyleButton{
      width: 68px;
    height: 68px;
}
.popUpWrapperMutableMorphs .playerIconsWrap{
    top:-1em;
}
/* Hover effect */
.SideButtonsWowStyled:active {
    scale:0.9;
}
.SideButtonsWowStyled:hover {
  background: linear-gradient(145deg, #3a2a12, #271e0b);
  box-shadow:inset 0px 0px 3px rgb(236 6 6);
  color: #ffcc55;
}

.popUpWrapperMutableMorphs{
    display:flex;
        align-items: center;
    justify-content: center;
}			
.numRight:hover{
    background: #232323;
    border: 1px inset wheat;
}
.numRight{
    float: right;
    top: 1px;
    position: relative;
    left: 3px;
    padding: 0 5px;
    background: #001738;
    border-radius: 16%;
    border: 1px outset wheat;
}
.traitRight{
    float: right;
    top: 1px;
    position: relative;
    padding: 0 2px;
    margin: 0 0px 0 6px;
}
.BigCoolFont{
    font-variant-caps: all-petite-caps;
}
.SearchDiv{
    flex: 1 1 100%;
}
.nftBadge{
    position: absolute;
    right: -0.5em;
    top: -0.25em;
    height: 2.25em;
    width: 2.25em;
}
.tierUpBtn.medievalButton {
	padding: 6px 12px;
	background-color: #1d6612;
	color: white;
	border: 2px solid #a98b50;
    margin: 1em;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s ease;
}
.nft-card {
    
	border: 2px solid #444;
}
.spinngerIcons{
    width: 5em;
    backface-visibility: hidden;
    transition: all 1s ease;
    transform: rotateY(180deg);
}
.slotWrap{
    justify-content: center;
    align-items: center;
    min-height: 69vh;
    transition: 1s all ease;
    display: flex;
}
.slotWrap2btm{
    text-align: center;
    font-size: 20px;
    position: absolute;
   bottom: 12px;
    left: 0px;
    zoom: 1;
}
.slotWrapBottom{
    text-align: center;
    font-size: 20px;
    position: absolute;
   bottom: 35px;
    left: 0px;
    zoom: 1;
}
.woodenFrameBtn{
    background: url(images/skins/woodFrame.webp);
    background-size: 100% 100%;
}
.slotsGreenBgBtn{
    background: url(images/skins/slotFrame.webp);
    background-size: 100% 100%;
}
.slotsBgBtn{
    background: url(images/skins/emptyFrame.webp);
    background-size: 100% 100%;
}
.wooden-btn {
  font-family: 'Cinzel Decorative', serif; /* fantasy style font */
  font-size: 20px;
  font-weight: bold;
  color: #fff6d5; /* warm parchment-like text */
  text-shadow: 0 2px 2px rgba(0,0,0,0.6);

  padding: 12px 28px;
  border: none;
  border-radius: 0;
min-width: 2em;
    display: inline-block;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.spin-btn{
    zoom:2.5;
    background: url(images/gameIcons/spinButton.webp);
    background-size: 100% 100%;
}
.spin-btn span{
   opacity: 0;
}
.slotWrapTop{
    text-align:center;font-size: 20px;position: absolute;top: 0;left: 0;
    zoom:1;
}


#slotMachine {
    width: 420px;
    gap: 8px;
    justify-content: center;
    /* background: #222; */
    padding: 42px 70px;
    border-radius: 12px;
    /* border: 4px solid gold; */
    width: max-content;
    margin: 18px auto;
    position: absolute;
    background-image: url(images/skins/woodFrame.webp);
    background-size: 100% 100%;
}

.reelSimple {
    width: 120px;
    height: 120px;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    margin: 0 4px;

    background-image: url(images/skins/covers/slotDeck.webp);
    background-size: 100% 100%;
    filter: none;
}

.reelSimple .strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  display: flex;
  flex-direction: column;
}
/* icon sizing */
.reelSimple img {
  width: 120px;
  height: 120px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* highlight after stop */
.reelSimple img.highlight {
  transform: scale(1.06);
  box-shadow: 0 0 18px gold;
  transition: transform 180ms;
}

/* thin overlay line to show exact center (optional) */
.centerMark {
  position: absolute;
  top: calc(50% - 22px);
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
  mix-blend-mode: screen;
  background: rgba(255,255,255,0.06);
}

#slotMachineMulti {
  display: flex;
  position: relative;
  padding: 100px;
  border-radius: 16px;
  
  width: max-content;
  margin: 30px auto;
  transition: all 0.5s;
  user-select: none;
  zoom: 0.9;  
  background-image: url("images/skins/woodFrame.webp");
  background-size: 100% 100%;
}

#slotMachineMulti .row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-direction: column;
  background-image: url("images/skins/covers/slotDeck.webp");
  background-size: 100% 100%;
  padding: 24px 8px;
  filter: none;
}

.reelSymbols {
  display: flex;
  flex-direction: column;
  transition: transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1); /* smooth ease out */
}


/* Highlight winning slots with glow */

.line1 { box-shadow: 0 0 16px 4px gold !important; }
.line2 { box-shadow: 0 0 16px 4px dodgerblue !important; }
.line3 { box-shadow: 0 0 16px 4px limegreen !important; }
.line4 { box-shadow: 0 0 16px 4px orange !important; }
.line5 { box-shadow: 0 0 16px 4px violet !important; }
.line6 { box-shadow: 0 0 16px 4px crimson !important; }
.line7 { box-shadow: 0 0 16px 4px cyan !important; }
.line8 { box-shadow: 0 0 16px 4px pink !important; }
.line9 { box-shadow: 0 0 16px 4px deepskyblue !important; }
.jackpot-flash-red { box-shadow: 0 0 16px 4px red !important; }
.jackpot-flash-blue { box-shadow: 0 0 16px 4px blue !important; }
.jackpot-flash-gold { box-shadow: 0 0 16px 4px gold !important; }
.jackpot-flash-green { box-shadow: 0 0 16px 4px green !important; }

.mergeMorphFrontCard{
    background-image: url(images/cards/mergeAndMorphCard.webp);
    background-size: 100% 100%;
    position: relative;
    display: block;
    margin: 0 auto 6em;
    top: 3em;
    height: 320px;
    width: 230px;
    box-shadow: 0px 0px 27px 13px #f4e5a1;
    transition: all 1s ease;
}
.mergeButton{
    background-image: url(images/skins/mergeButtonStone.webp);
    background-size: 100% 100%;
    border:none;
    margin: 1em 2em;
    font-size: 1.5em;
}
.morphButton{
    background-image: url(images/skins/morphButtonStone.webp);
    background-size: 100% 100%;
    border:none;
    margin: 1em 2em;
    font-size: 1.5em;
}

.lineHighlight { box-shadow: 0 0 16px 4px red !important; }

.glow-left {
  box-shadow: inset 20px 0 6px -6px gold;
}
.glow-top {
  box-shadow: inset 0 20px 12px -10px gold;
}
.glow-right {
  box-shadow: inset -20px 0 6px -6px gold;
}
.glow-bottom {
  box-shadow: inset 0 -20px 12px -10px gold;
}

#slotMachineMulti .slot.highlight {
    
  transform: scale(1.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#slotMachineMulti .slot {
  width: 120px;
  height: 120px;
  background: #0d0d0d14;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 10px #ccb678;
  transition: transform 0.3s ease;
  cursor: default;
}

#slotMachineMulti .slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
/* Add this CSS, no changes to your current styles */
.slot .reel {
  display: flex;
  flex-direction: column;
  height: 120px; /* same as slot height */
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  position: relative;
}
.slot {
  width: 120px;
  height: 120px;
  overflow: hidden;   /* hide everything outside */
  position: relative;
}

.reel {
  display: flex;
  flex-direction: column;
  transition: none;   /* we handle animation with JS */
  will-change: transform;
}

.reel img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.slot .reel > img {
  height: 120px;
  width: 120px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.nft-card.selected {
	border-color: gold;
	box-shadow: 0 0 8px gold;
}
/* minimal overlay used during spin — doesn't change your layout */
.reelStrip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

.reelContent {
  display: block;
  will-change: transform;
}

/* make sure images inside reelContent match slot visuals */
.reelContent img {
  display: block;
  width: 100%;
  height: 120px;        /* must match your .slot height */
  object-fit: contain;
  margin: 0;            /* spacing will be injected via JS using step */
  pointer-events: none;
  user-select: none;
}

.claimed-overlay {
	position: absolute;
	top: 0; left: 0;
	background: rgba(0,0,0,0.7);
	color: red;
	width: 100%;
	text-align: center;
	font-size: 0.7em;
	padding: 2px;
}
/* Make inputs look nicer */
#seedQuantity {
	padding: 4px;
	border-radius: 4px;
	border: 1px solid #888;
}

/* Modal styles assumed from your previous ones */

.holdingAreaTokenIconsBig img{
    width: 3em;
    border-radius: 50%;
    border: 3px outset rgb(214, 157, 8);
    background: gold;
    margin: 5px;
    cursor: pointer;
    height: 3em;
    margin: 0 auto;
    top: 1em;
    position: relative;
    box-shadow: 0px 0px 30px wheat;
}
.confirmButton {
    margin-right: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
}
.cancelButton{
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #f44336;
    color: #fff;
    cursor: pointer;
}
.guildCard {
	background: #2a1e14;
	border: 2px solid #c6a664;
	border-radius: 12px;
	padding: 12px;
	margin: 10px 0;
	color: #f3e6c4;
	position: relative;
	box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.guildHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.guildTitle {
    
	align-items: center;
	gap: 2px;
	font-size: 1.2em;
	font-weight: bold;
    text-align: left;
}

.guildIcon {
	height: 22px;
}

.settingsCog img, .airdropIconGuilds img {
	height: 18px;
	cursor: pointer;
	filter: brightness(1.2);
}


.guildStats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.95em;
	margin-top: 6px;
}

.boostSection,
.rewardToken,
.memberCount {
	display: flex;
	align-items: center;
	gap: 6px;
}

.boostIcons img,
.rewardDisplay img {
	height: 20px;
	border-radius: 50%;
    top: 5px;
}
.iconsGuild {
	height: 20px;
	border-radius: 50%;
    top: 5px;
    position: relative;
}
.memberCount .label{
    position: relative;
    top: 3px;
    cursor: default;
}
.guildStats .label{
    cursor: default;
}
.guildTextInfo{
    font-style: italic;
    /* text-align: left; */
    /* align-items: revert; */
    font-size: 14px;
    font-weight: normal;
    position: relative;
    left: 2px;
}
.airdropOptionImage {
	width: 80px;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: 0.2s;
}
.airdropOptionImage.selected {
	border-color: gold;
}
.airdropsText{
    font-style: italic;
    /* text-align: left; */
    /* align-items: revert; */
    font-size: 14px;
    font-weight: normal;
    position: relative;
    left: 2px;
    color: #f3e6c4;
    text-transform: uppercase;
}
.guildDashboardPanel, .guildAirdropPanel{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 8px 16px;
    background: rgb(32, 32, 32);
    border: 1px solid rgb(68, 68, 68);
    color: white;
    width: fit-content;
    min-width: 300px;
    border-radius: 8px;
}
.guildDashboardPanel select,
 #promoPopUp select, #promoPopUp input,
 #boosterPopUp select, #boosterPopUp input
 {
    width: 100%;
    padding: 4px;
    background: rgb(42, 42, 42);
    color: white;
    font-family: 'Cinzel', 'Garamond', serif;
    font-size: 16px;
    color: #3b2e1a;
    background: wheat;
    border: 3px solid #7a5230;
    border-radius: 8px;
    padding: 5px 15px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
    
}
.guildDashboardPanel label {
    color: #e6cb9f; /* parchment/aged paper tone */
    font-style: italic;
}
.iconsGuildToken{
    height: 20px;
    border-radius: 50%;
    top: -3px;
    border: 1px solid gold;
    position: absolute;
    left: -23px;
}

.joinButton {
	margin-top: 10px;
	padding: 6px 12px;
	background: #4caf50;
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s ease;
}

.joinButton:hover {
	background: #45a045;
}
.toggleButtonsGallery{
    
    bottom: 0;
    left: 0;
    right: 0;
}
.styleForGlowText{
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: bold;
    color: #c9b37a;
}
.newArrows{
    z-index: 999;
    cursor: pointer;
    opacity: 0.5;
    font-size: 20px;
    pointer-events: auto;
    color: wheat;
    display: inline-block;
    font-size: 31px;
    text-shadow: 1px 1px 1px black;
}
.nftContainerBigger .playerIconsWrap{
    background: #00000000;
}
.pageCountViewBtm{
    position: absolute;
    bottom: 0px;
    right: 6px;
    color: wheat;
    font-size: 20px;
}
.nftContainerBigger{
    gap: 30px 20px;
    border-radius: 0px;
    margin: 0 auto 0;
    box-shadow: 1px 2px 3px black;
    
    padding: 0.25em 2.5em;
    overflow-y: hidden;
    /*HACKY WACKY STYLES to solve white area in wrapper, after some fixes to make cards smaller... might be hacky removeable later. depend on all browsers*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 66vh;
}

.btmRigthIcons{
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
}
.newNftContainer{
    display: flex;
    background: #047fbab8;
    padding: 0.5em;
    position: relative;
    width: 178px;
    /* height: 120px; */
    background-size: 100% 100% !important;
    margin: 0.25em auto;
    border-radius: 2%;
    /* background-image: linear-gradient(187deg,#00c954, #87ff23 46%,#00ff23); */
    border: #671313 2px ridge;
    transition: 300ms;
    font-family: system-ui;
    cursor: pointer;
}
.buttonWrap{
    margin:1em auto;
}

.buttonsOnTeamUi{
    display:none;
    padding: 0.5em 0.5em 1em 0.5em;
    cursor: pointer;
    color: black;
    background: antiquewhite;
    border-radius: 8px;
    border: 1px solid;
    box-shadow: 0px 1px 1px 1px #000000;
    margin: 0;
    transition: all .1s ease-in-out;
}
.buttonsOnTeamUi:hover, .buttonsOnTeamUi:active{
    background: wheat !important;
    box-shadow: 0px 0px 0px 0px #000000;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}
.autocomplete-item {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ccc;
}

.autocomplete-item:hover {
  background-color: #f2f2f2;
}
#gameMenu{display:none;}
.gameMenu{
	position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
    /* height: 10%; */
    /* width: 25%; */
    display: inline-block;
    display: flex;
    transition: opacity 4.2s ease-in;
}
#paraStory{
	position: relative;
    background-image: none;
    background: #15131391;
    border-radius: 15px;
    display: inline-block;
   overflow-y: auto;
    margin: 0 auto;
    padding: 2em;
    height: 69vh;
	width:80%;
	box-shadow: 1px 7px 12px 4px black;
}
#p2, #p3, #p4{
	display:none;
}
#prevStory{
	    position: absolute;
    left: 1em;
    background: green;
    top: 78%;
    padding: 0.25em;
    border-radius: 15px;
    border: 1px solid;
	cursor:pointer;
	box-shadow: 0px 2px 3px 1px black;
}
#box1New span{
	padding: 3px 3px 0;
	margin: 1px 0;
}
#nextStory{
	position: absolute;
    right: 1em;
    background: green;
    top: 78%;
    padding: 0.25em;
    border-radius: 15px;
    border: 1px solid;
	cursor:pointer;
	box-shadow: 0px 2px 3px 1px black;
}
.para{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
height:100%;
transition: opacity linear 0.5s;
	background: #151313;
	background-image: url(images/bg3.webp);
    background-size: 100% 100%;
}
.para2{
	position:relative;
	padding:3em 12em 3em;
	background: #151313;
}
.para h2, .para2 h2{
	margin:1em;

}
.para p, .para2 p{
	text-align:left;
    padding: 1em;
    border-radius: 5px;
	}
	
.para div, .para2 div{
	text-align:left;
    padding: 1em;
    border-radius: 2px;
	
    position: relative;
	}
.para h3, .para2 h3{
	text-align:left;
	text-indent: 1.5em;
}
#mintHolder{font-size:0.75em;}
#drops{
	background:url("");
	background-size:100% 100%;
}
#maxTheMintAmount, #maxTheMintAmount0, #maxTheMintAmount1, #maxTheMintAmount2, #maxTheMintAmount3, #maxTheMintAmount4, #maxTheMintAmount5, #maxTheMintAmount6, #maxTheMintAmount7{
	position: absolute;
    right: 34%;
    top: 0.5em;
    color: antiquewhite;
    font-size: 1.2em;
    cursor: pointer;
}
#moreInfo7, #moreInfo6, #moreInfo5, #moreInfo4, #moreInfo3, #moreInfo2, #moreInfo1, #moreInfo0, #moreInfo{cursor:pointer;}
#maxTheLp, #maxTheLp2{
	    position: absolute;
    right: 23%;
    top: 1em;
    color:wheat;
    font-size: 0.8em;
	cursor:pointer;
}
#harvestEarn, #stakeYourLP{
	
    color:wheat;background:#472900;
}
.farm-panel {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 1.3s ease, height 1.3s ease;
}

/* Apply the visible style when the element is open */
.farm-panel.open {
	opacity: 1;
    height: max-content;
}

input[type=number]::-webkit-inner-spin-button {
  font-size:1em;
  padding:1.5em;
  cursor:pointer;
  background-color:red;
  position:relative;
  left:12%;
  transition:opacity 1.5s;
  display:none;
}
.buttons{
	border: 6px ridge #bf8942;
    font-size: 0.75em;
    background: darkgreen;
    color: antiquewhite;
    font-weight: bold;
}
.buttons:hover{
	background:#64005a;
}
.newButtons{
    border: 6px ridge #bf4242;
    font-size: 0.75em;
    background: #e8910b;
    color: wheat;
    transition: all 1s ease;
    text-transform: uppercase;
    font-family: 'Anton';
    padding: 0.5em 1em;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 1px black;
    text-shadow: 1px 1px 1px black;
    display: block;
    margin: 1em auto;
}
.addedStyleListWrap{
    position: relative;
    transition: all 1s ease;
    text-align: left;
    border-radius: 5px;
    max-width: 14em;
    margin: 1em;
    background: wheat;
    min-width: 12em;
    display: inline-block;
    box-shadow: 0px 1px 2px 1px black;
}
.addedStyleList{
    padding: 0.5em 0.25em;
    text-shadow: 1px 1px 1px black;
    background: #193d74 !important;
    border-bottom: 1px dotted wheat;
}
.newButtons:hover{
    cursor: pointer;
	background:#af2727;
}
.smallButons:hover, .smallButons:active{
	
    border-color:goldenrod;
}
.smallButons{
	margin: 0.75em auto;
    padding: 0.75em;
    border-radius: 15px;
    box-shadow: 0px 3px 4px 2px #145100;
    cursor: pointer;
    border: 8px #7f0202;
    border: 4px gold;
    border-style: double;
}
.inputFields{
	margin: 0em auto 0.5em;
    display: block;
    cursor: text;
    background: #472900;
    font-size: 1.2em;
}
#formInList{
	display:inline;
	
	
}
#nftSearchBar{
	    outline: 0;  
		color:gold;
    background:black;
	
}
#nftSearchBar:focus{
	outline:0;
}

.numTopCorn{
    position: absolute !important;
    top: 0;
    padding: 2px 4px 9px 4px !important;
    margin: 0 !important;
    /* width: auto; */
    border-radius: 0px !important;
    min-width: 6px !important;
    height: 6px !important;
    right: 0 !important;
    border: 2px solid wheat!important;
    text-align: center !important;
    font-size: 0.75em !important;
    display: inline-block !important;
    color: wheat!important;
    background: black !important;
    z-index: 1;
}
#menuHamburger2Game{
	position: absolute;
	display:none;
    top: 5em;
    left: 1em;
    z-index: 1;
    padding-right: 6px;
    padding-left: 0px;
}
#menuBarGame{
	    padding-left: 1px;
}
.tokenName{
	color:#ffd7009c;
	font-weight:bold;
	font-size: 0.7em;
	display:block;
}
#mintList4 div, #mintList3 div, #mintList2 div, #mintList1 div, #mintList0 div{
	cursor:pointer;
} 
#gameHolder, #gameButtonHolder, #selectedPreCards{
	opacity:0;
    transition: opacity 1s;
}
#upgradeListOpener .icon{
	color:green;
}
#fertilizeListOpener .icon{
	color:brown;
}
#morphsMintListOpener .icon{
	color:gold;
}
#morphsMintListOpener2 .icon{
	color:green;
}
.tokenNameTartarus{
	color: #f5deb3;
    text-shadow: 1px 1px 1px #000000;
    font-weight: bold;
    position: absolute;
    font-size: 0.7em;
    display: block;
    right: 0;
}

.tokenNameDead{
	color:#000000;
	font-weight:bold;
}
.tokenName:hover, .tokenNameTartarus:hover{
	color:#ffd700;
}
.imageOptions{
display: inline-block;
    width: 100%;
    position: relative;
	pointer-events:none;
	
}
.imageOptionsCard{
	display:block;
	top: 1em;
    position: relative;
	
}
.imageUl{
	margin:0.5em 0em -1em 0em;
	padding:0;
}
.imageLi{
	list-style: none;
    /* cursor: pointer; */
    display: inline;
    position: absolute;
    /* color: #bc8c4e; */
    /* margin-top: 0.2em; */
   right: -9px;
    background-image: none;
    top: 16px;
}
.imageLi button:hover, .imageLi button:active, imageLi button:focus{
	background-image: linear-gradient(144deg,#170d02, #492a05 69%,#533304);
	background-image: linear-gradient(144deg,#170d02, #134905 69%,#050f01);
	cursor:pointer;
	    background-image: linear-gradient(187deg,#212121, #000000 72%,#212121);
	
}
.imageOptionsBtn{
	background-image: linear-gradient(187deg,#212121, #276b14 31%,#212121);
    height: 3em;
    color: gold;
    border: 1px solid gold;
    border-radius: 3px;
}
.imageOptionsBtnAlone{
	background-image: linear-gradient(187deg,#212121, gold 31%,#212121);
}
.imageOptionsBtnTartarus{
	    background-image: linear-gradient(187deg,#212121, #ca2600 31%,#212121);
		height: 3em;
    color: gold;
    border: 1px solid gold;
    border-radius: 3px;
}


.rootTables{
	display: inline-block !important;
    overflow-y: scroll;
    height: 10vh;
    background: #000000ba;
    padding: 3em 1.5em;
    margin: 0 2em 2em;
    border: 4px groove #134e67;
    width: fit-content;
    border-radius: 9px;
    min-width: 60%;
}

.rootTables2ShowNfts{
	display: inline-block !important;
    overflow-y: scroll;
    height: 49vh;
    background: #000000ba;
    padding: 1em 1.5em;
    margin: 2em 0em 0em;
    border: 4px groove #134e67;
    width: fit-content;
    border-radius: 9px;
    min-width: 60%;
}

.imageOptionsBtnMetaMorphis, .imageOptionsBtnMetaMorphisPotion, .imageOptionsBtnMetaMorphisHestiaLand{
	display:none;
	    color: antiquewhite;
    border: 1px outset #ab9000;
    background: green;
    padding: 1px 1px 1px 1px;
    margin: 1px;
    width: 1em;
    height: 1em;
    font-size: 0.7em;
    padding: 0px 1px 4px 1px;
}
.imageOptionsBtnStaking{    
	background: #00000000;
    background-image: linear-gradient(187deg,#21212100, #00000000 72%,#21212100);
		height: 3em;
    color: gold;
    border: 1px solid gold;
    border-radius: 3px;
}
.imageOptionsBtnStaking:hover{
	    background-image: linear-gradient(187deg,#212121, gold 31%,#212121);
}
.posPlaceHolder{
	height:50%;
	width:30%;
	background:ghostwhite;
	opacity:85%;
	position:absolute;
	left:35%;
	top:40%;
	border-radius:2%;
	border-style:inset;
}
.contentInPos{
	color:black;
	font-size:2em;
}
hr{
	border:0;
	
}
.Display{
	width:50%;
	position:relative;
	top:15%;
	display:inline-block;
	height:60%;
	font-size:0.5em;
	background:ghostwhite;
	opacity:100%;
	border-radius:2%;
	border-style:inset;
	background-size: cover;
}
.hoverMe:hover{ border-color: #ffd7009c !important; cursor:pointer;}
.hoverMe{
	width:25px;height:25px;
}.hoverMe2{
	width: 100px;
    height: 100px;
    top: 1.1em;
    position: relative;
}
#Morph:hover{}
.imageSquareBadges{
	background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
	border-radius: 18%;
}
.imageSquareBadges:hover{
	
	
}
.imageSquareBadges:active{
	background-image:none;
}
.imageNumber{
	z-index: 1;
	font-family: 'Press Start 2P', cursive;
    background: none;
    border: none;
    color: white;
	font-size:1em;
	top:0;
	left:0;
	
}
.allTheBadges{
	    position: fixed;
    min-height: 5em;
    width: 100%;
    display: block;
    margin: 0;
    z-index: 1;
    bottom: 8.4%;
}
.hiddenBadges{display:none;}
.badgeHolders{
	display:inline-block;
}
#first5{
	margin: 0em 1em 0 0;
	/*box-shadow: 0px -2px #07c1b3;*/
}
#boosters{
	/*box-shadow: 0px -2px gold;*/
	
	display:grid;
}

.badgesUL{
	/* background: gold; */
    margin: 2em;
    /* padding: 1em; */
    /* min-height: 15em; */
    position: absolute;
}

.cardTextMain{
	
	font-weight:bold;
}
.cardTextTraits{
	visibility:hidden;
	font-size:100px;
	font-weight: bold;
    
    font-style: italic;
    font-size: 5.5em;
    letter-spacing: 4px;

	
}
#iconLogoBottom{
	position: relative;
    display: block;
    margin: 2em 0;
}
.cardTextTraitsVisible{
	
    visibility: visible;
    font-size: 100px;
    font-weight: bold;
    font-style: italic;
    font-size: 5.5em;
    letter-spacing: 4px;
	
}
#cardCenterText{
	fill:gold;
}
#Skill1{font-size:150px;fill:gold;}
#Skill2{font-size:150px;fill:gold;}
#Skill3{font-size:150px;fill:gold;}


.Skills{font-size:200px;}
/*.Skills2{font-size:200px; fill:gold;}  - use if not using Press Start 2p*/

.Skills2{font-size: 115px; fill:gold;}
.shieldText{font-size: 6px;fill: #50c920;font-family: 'Press Start 2P', cursive;} 
.shieldText1{font-size: 40px;fill: #769cff;font-family: 'Press Start 2P', cursive;} 
.shieldText2{font-size: 34px;fill: #ff7676;font-family: 'Press Start 2P', cursive;}
.shieldText3{font-size: 22px;fill: ghostwhite;font-family: 'Press Start 2P', cursive;}
.shieldText4{font-size: 18px;fill: beige;font-family: 'Press Start 2P', cursive;}
.shieldText5{font-size: 15px;fill: silver;font-family: 'Press Start 2P', cursive;}
.shieldText6{font-size: 15px;fill: gold;font-family: 'Press Start 2P', cursive;}
.shieldText7{font-size: 13px;fill: aqua;font-family: 'Press Start 2P', cursive;}


#X:hover, #flipIT:hover, #Heart:hover,#Earth:hover, #Fire:hover, #Water:hover, #Lightning:hover, #Dragon:hover, #next:hover, #next:active,
#X:active, #flipIT:active, #Heart:active,#Earth:active, #Fire:active, #Water:active, #Lightning:active, #Dragon:active, #prev:hover, #prev:active
{cursor:pointer;}
/*#headerCard{font-size:200px;fill:gold;}*/
#headerCard{font-size: 115px;fill:gold;}
.traitsRight{max-width:49%;border:0.1em solid #7a500f;list-style:none;display:inline-block;margin:0;padding:0;text-align:left;}
.traitsLeft{max-width:49%;border:0.1em solid #7a500f;list-style:none;display:inline-block;margin:0;padding:0;text-align:left;}
.traitsLeft li{line-height:1em;inline-size:max-content;}
.traitsRight li{line-height:1em;inline-size:max-content;}


.statskills{}
.xButtonSearchFieldHidden{display:none;}
.xButtonSearchField{
	    position: relative;
    right: 7%;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 0px;
    float: right;
	color:gold;
}
.xButtonSearchField:hover{
	color:white;
}
#card{
    display: inline-block;
    position: fixed;
    font-size: 0.5em;
    top: 0;
    left: 0;
	right: 0;
	margin:  auto;
	height:100%;
	z-index:1;
	background: #000000d6;
}
.viewNftCard{
	height:100%;
	background-size: cover;
	border-radius: 2%;
    border-style: inset;
	border-color: gold;
	width: auto;
}
.closer{
	display:inline-block;
	color: #ffffff;
    font-weight: bold;
    position: relative;
    top: 1.5em;
    right: 0.5em;
}
#header1{
	    color: #ffd400;
		font-weight:bold;
    position: relative;
    top: 1.5em;
	left:0.5em;
}

.hiddenAllCard{display:none !important;}
.showAllCard{display:inline-block;}
.hiddenCard{display:none !important;}
.popUpCard{display:inline-block;
font-family:'Press Start 2p';	
    width: 90%;
	display: inline-block;
   
    position: relative;line-height:1em;
    
}
#growCard1{
	padding-top: 2em;
	padding-bottom: 2em;
}

.topAndBottom{
	border: 4px solid #85ff00;
    border-radius: 4px;
    border-style: inset;
    background-size: cover;
    width: 100%;
    position: relative;
    background: #000000;
    display: inline-block;
    height: 100%;
	
}	
.topAndBottom:hover, .topAndBottom:active{
	
	background:#000000;
}
#centerInCard2{  
	top: 10%;
    height: auto;
    width: 90%;
}

.xInMiniGrowCard{position:absolute; right:1em;top:1em;color:gold;cursor:pointer;}
.xInMiniGrowCard:hover{color:white;}
.displayDegen {
    display: inline-block;
    background: black;
    margin: 0.25em;
    border-radius: 5%;
    border: 5px solid #232020;
    transition: 300ms;
    box-shadow: 0 0 1px 1px black;
}
.degenImage {
    width: 180px;
    height: 180px;
    border-radius: 2%;
    border: 1px solid #4e4e4e;
    margin: 0;
}
.infNftToggle {
    cursor: pointer;
    position: absolute;
    right: 0px;
    bottom: 2px;
    padding: 5px 0px;
    display: inline;
}
.rank {
    display: block;
    background: #212121;
    margin: 0;
    padding: 1px 0;
    top: 0px;
    position: relative;
    border: 1px solid #4e4e4e;
    border-radius: 2px;
}
.imageOpt {
    display: block;
    background-color: #580015;
    background-color: #2c0058;
    background-color: #2c2c5d;
    background-color: #1b1b1b;
    /* border-color: #ff0000; */
    margin: 1em 1em 0em;
    border: 1px solid red;
    border-radius: 7px;
    font-size: 0.8em;
    box-shadow: 0px 0px 1px 2px #2d2d2d;
}.yourDCA {
    color: #ffffff;
    font-weight: bold;
    font-size: 1em;
    display: block;
    padding: 1em;
    text-align: center;
}
.imgNft {
    width: 33px;
    display: none;
    position: absolute;
    right: 0px;
    padding: 0px;
    margin: 2px;
    background: #2a2a2a;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 1px #4e4e4e;
}
.projectInfo{
    display: block;
    margin: 0.5em auto;
    width: fit-content;
    padding: 1em;
    background: #151313b0;
    border-radius: 4px;
    border: 1px solid;
}
.centerInCardMini{
	display: block;
   
	width: 65%;
	color:black;
	text-align:left;
    height: 80%;
    position: relative;
    top: 10%;
	margin:0 auto;
	border:0px solid;
    border-radius: 1%;
    border-style: inset;
    border-color: #85ff00;
}
#growCard1{
	background:url('../../Gallery/images/previewBannerLands.webp');
	background-size:100% 100%;
}
.hiddenListItem{
	padding:6px 0;
	
    font-size: 10px;

}
.hiddenUl{left:-420%;top:4.9em;}

.hiddenA{min-width:4em;}
.hiddenA:active{
	border-style:none;
}
.hiddenUlTada{
	display: inline;
    max-width: 100%;
   /* height: 83vh;*/
    top: 4.9em;
	left:0;
  
}
.hiddenUlTadaUp{
	display: inline;
   max-width: 69em;
    /*height: 83vh;*/
    top: -3em;
	
  
}

#menuBelowHamburger{
	  position: fixed;
   
    border-style: hidden;
    padding: 0.2em 0 0 0;
   background:black;
    padding-left: 0;
    border-color: #ac5e00;
    border-right: 2px solid gold;
    border-bottom: 2px solid gold;
	    transition: top 0.4s ease-in-out,left 0.75s ease-in-out;
}
#menuBelowHamburger:hover, #menuBelowHamburger:active{
	border:#ac5e00;
	border:#ac5e00;
	opacity:1 !important;
}
.insideCenterTxt{
	padding: 0 2em;
    display: inline-block;
    position: relative;
    top: 2.5em;
}
.insideCenterHeader{
	margin-bottom:0.25em;
}
.insideCenter{
	border: none;
    width: 100%;
    left: 0;
    top: 2%;
    right: 0;
    height: 70%;
    bottom: 0;
    position: relative;
	
}
.imgIconInCenter, .imgIconInCenterDeads{
	border-radius: 50%;width:2em;position: relative;height:2em;display: inline; cursor:pointer;padding-left: 0.5em;
}
.imgIconInCenter:hover{
	border-color:gold !important;
}
.imgIconInCenterDeads:hover{
	border-color:#690505 !important;
}
#showDeadsButton{
    position: relative;
    top: 0.2em;
    border-radius: 50%;
    height: 1em;
    margin: 0 0.25em;
    width: 1em;
    cursor: pointer;
}
#holderForInfo{
	    margin-bottom: 0px;
    position: absolute;
    right: 1.5em;
    bottom: 1.5em;
	font-size:0.8em;    letter-spacing: 0.1em;
}
#growCard2{
	display:none;height:auto;height: auto;
    padding-bottom: 1em;color:gold;
}

#stakableResult{
	padding-top:1em;
}
#TextInFirstFieldSacOrGrow{font-size:0.8em;right: 0; margin-bottom:2em;   letter-spacing: 0.1em;display:inherit;}

.showAll{
	display:block;
	height:45%;
	width:30%;
	background:ghostwhite;
	opacity:85%;
	position:absolute;
	left:35%;
	top:45%;
	border-radius:2%;
	border-style:inset;
}

.hiddenAll{display:none !important;}

.con2{
	position:absolute;
	  top:0;
	  right:1em;
}
.con1{
	position:absolute;
	  top:0;
	  left:1em;
}
.con3{
	    position: absolute;
    top: 1em;
    width: 3em;
    left: 48%;
    right: 48%;
    border: 1px solid gold;
    border-radius: 50%;
    height: 3em;
	
    box-shadow: 0px 2px 9px 5px #b8860b;
}
.inl{
	display:inline-block;
}
.imageOptionsBtnAlone2{
	font-size:0.5em;
	padding:6px;
}
.BtN{
	 color: #7a500f;
	 color:gold;
	   margin: 0 1px;
	min-width: 140px;
	padding:1px;
  font-size: 20px;
  justify-content: center;
  line-height: 2em;
  
    background-image: linear-gradient(144deg,#452806, #fff 50%,#ef950e);
	background-image: linear-gradient(144deg,#452806, #000 69%,#ef950e);
	background-image: linear-gradient(144deg,#0e3503, #000 69%,#195807);
	color:black;
	
  border: black 1px solid;
  border-radius: 8px;
	  cursor: pointer;
	  
}

#connect:hover, #connect:focus, #connect:active{color:#ffd700;}


.BtN2{
	line-height:1.5em;
	font-weight:700;
	color:black;
    background-image: linear-gradient(144deg,#d08225, #46cc69  50%,#724c14);
    background-image: linear-gradient(144deg,#d08225, #46cc69  69%,#724c14);
	margin:1em;
}


.BtN3{
	
	color:black;
        background-image: linear-gradient(144deg,#78000d, #cc4646 69%,#4c0505);
        background-image: linear-gradient(144deg,#78000d, #cc4646 69%,#4c0505);
	
}
.saveIcon{
    display: block;
    position: absolute;
    top: 52.5%;
    left: 52.5%;
}
#savingOverlayBig{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999;
}
#savingOverlay{
    
    display: block;
    position: fixed;
    top: 2em;
    right: 0;
    width: 5em;
    height: 5em;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 9999;
}
#loadingOverlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999;
}
.savingSpinner{
    top: 25%;
    left: 25%;
}
.loadingSpinner{
    top: 50%;
    left: 50%;
}
.loadingSpinner, .savingSpinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    transform: translate(-50%, -50%);
}

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


 #paytable-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9998;
  }

  /* Popup box */
  #paytable-popup {
    background: url('images/skins/backgrounds/payoutFrame.webp') ;
    background-size: 100% 100%;
    border: none;
    border-radius: 20px;
    padding: 20px;
   max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
        box-shadow: none;
    position: relative;
    z-index: 9999;
  }

  /* Close button */
  #paytable-close {
    position: absolute;
    top: 1.25em;
    right: 1em;
    cursor: pointer;
    font-size: 28px;
    color: wheat;
    text-shadow: 2px 2px #000;
  }

  /* Table style */
  #paytable-popup table {
    width: 100%;
    font-size: 20px;
    border: 4px double wheat;
    border-radius: 5px;
    color: #fff4d6;
  }

  #paytable-popup th {
    background: #363636;
    padding: 10px;
    border: 2px solid #5b3a1d;
    color: wheat;
    text-shadow: 1px 1px 1px black;
  }

  #paytable-popup td {
    padding: 8px;
    text-align: center;
    border: 2px solid #5b3a1d;
  }

  #paytable-popup img {
    height: 40px;
  }


.scrollIconHidden{
	display:none;
}
.scrollIconVis{
	display:inline-block;
}
#scrollerUpperI{
	font-size: 1.2em;
    top: 0.1em;
    position: relative;
}

#scrollerUpper{
	box-shadow: 0px 1px 6px 3px #b8860b;
	width:1.5em;
	height:1.5em;
	background:black;
	color:#9c8400;
	border:1px solid gold;
	border-style:inset;
	position:fixed;
	bottom:7%;
	right:1%;
	cursor:pointer;
	
    border-radius: 50%;
	font-size:2em;
}
#scrollerUpper:hover{
	color:gold;
}
#scrollerUpper:active{
	border:2px solid gold;
}

.inputSearch{
	cursor:text;
}

.rankIcon{
	position:absolute;
	left:0.25em;
	top:0.25em;
	display:inline-block;
	border-radius:50%;
	border:2px solid gold;
	background:black;
	color:gold;
	padding: 4px 3px 3px;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute !important;color:#ffd700;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 36%;
  left: 0;
  background:#1e1e1f;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ffc600;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #000000;
  color:#ffef7f;
  
  border-bottom: 1px solid #ff9900;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #000000 !important;
  color: white;
}


.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free', "Font Awesome 5 Brands";
			width: 30px;
            height: 30px;
			font-size:1.25em;
            margin: 0px 8px 0px;
            padding: 3PX 0;
			
		}

        .fa-discord:before{
            width: 60px;
        }
        
		.icon > .label {
			font-family:"system-ui";
			display: inline;
			text-shadow: 1px 1px 1px #502c0f;
			color:#ffdc73;
			text-decoration:none;
		}
.plusIfLess:hover, .plusIfLess:active, .plusIfLess:focus{visibility:visible;}
.plusIfLess{
	visibility:hidden;
	font-size: 120px;
    fill: white;
    font-family: 'Press Start 2P', cursive;
}
.plusIfOver100{
position: relative;
    top: -4px;
    left: 13px;
    display: inline;
    right: 0;
    bottom: 0;
    font-family: 'Press Start 2P', cursive;
    background: none;
    border: none;
    color: white;
	z-index:1;
}


  .fa-flask:before,.fa-poo:before, .fa-share:before, .fa-arrow-right:before, .fa-bars:before, .fa-water:before, .fa-fire:before , .fa-bolt:before , .fa-seedling:before, .fa-gem:before, .fa-heart:before, .fa-mosquito:before {
    
    margin: 0;
    padding: 0;
}





.menuIconImages{
	height: 4em;
    width: 4em;
    display: inline-block;
    position: absolute;
    left: 1.5em;
    top: 1.5em;
    z-index: 1;
	
}

.brownClass{background-image: linear-gradient(144deg,#170d02, #492a05 69%,#533304);}
	
#myTopnav ul li{
	
	
	list-style: none;
    align-items: center;
    /* background-image: linear-gradient(144deg,#452806, #f00 50%,#900303); */
    background-image: linear-gradient(144deg,#452806, #00ff58 50%,#053401);
   background-image:  linear-gradient(144deg,#452806, #000 50%,#ef950e);
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 20px;
    justify-content: center;
    line-height: 1em;
    padding: 1px;
    margin: 0 5px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
	    border-radius: 2px;
    font-size: 20px;
    min-width: 98%;
    height: 7em;
}
#myTopnav ul li a{
	    text-decoration: none;
    height: 100px;
    float: right;
    font-weight: bold;
    margin: 0 1px;
    min-width: 98.5%;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    background-color: #000000;
    padding: 0px 7px;
    border-radius: 6px;
    height: 100%;
    transition: 300ms;
}

/*
.InfoSectionInButtons:hover{
	background: #503d0c;
    color: #fff100;
}
	*/

.InfoSectionInButtons{
	line-height: 1.25em;
    top: 30%;
    bottom: 20%;
    left: 22%;
    text-align: left;
    right: 3%;
    padding-left: 5%;
    padding-top: 1%;
    z-index: 1;
    background: #9f7e2b;
    color: black;
}







.popUpInfoCardStakedHeart{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #ff0092;
}

.popUpInfoCardStakedEarth{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #00cd16;
}

.popUpInfoCardStakedDragon{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #cd00b9;
}


.popUpInfoCardStakedWater{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #0f66cd;
}


.popUpInfoCardStakedFire{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #cd0f0f;
}

.popUpInfoCardStakedLightning{
	display: none;
    position: fixed;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: auto;
    left: 0.5%;
    right: 0.5%;
    background: black;
    font-size: 1em;
	z-index:1;
    border: 9px solid #ead01f;
}


.popUpInfoCard{
	display: none;
    transition: all 0.4s ease;
    text-shadow: 1px 1px 1px black;
    position: fixed;
    top: 66px;
    height: 74vh;
    width: auto;
    left: 0;
    right: 0;
    z-index: 3;
    display: none;
    color: wheat;
    transition: all 0.5s;
    background: linear-gradient(286deg, #083255, #1b5484);
    box-shadow: rgb(0 29 43 / 72%) 0px 1px 6px 5px inset;
    padding: 1.5em 0em 1.5em;
    border: 3px #ffdc73;
    border-radius: 2px;
    border-style: solid;
}
.popUpInfoCardSmall {
    display: none;
    position: fixed;
    left: 0%;
    top: 2.725em;
    z-index: 1000000;
    min-width: 190px;
    background: linear-gradient(180deg, #121212 0%, #1f1b17 100%);
    border: 1px solid rgba(255, 208, 95, 0.9);
    border-left: 4px solid #28e370;
    color: #ffe59a;
    font-family: "Cinzel", serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        inset 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 8px rgba(0, 0, 0, 0.6);
    padding: 10px 14px;
    
}
/* ---- New 2026 Codex UI ---- */
.modernProgressModal {
    height: 69vh;
    background: rgb(15, 17, 18);
    border: 2px solid wheat;
    border-radius: 10px;
    display: flex;
    min-width: 96.5%;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.3s ease;
    text-align: center;
    max-height: 100%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(122, 82, 48, 0.6);
    font-family: "Cinzel", serif;
    color: #ffd966;
    padding: 2rem;
    z-index: 1;
    position: absolute;
    


    flex-direction: column;
    overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  height: 85vh;
  background: radial-gradient(circle at center, #0f0f0f 0%, #080808 100%);
  border: 2px solid #d7b55a;
  border-radius: 14px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  color: #f9e8b5;
  overflow-y: auto;
  font-family: anton, sans-serif;
  padding: 20px;
  backdrop-filter: blur(10px);
  z-index: 99999;
}

/* Header */
.progressHeader {
   margin-bottom: 20px;
}


.progressHeader button {
  background: linear-gradient(180deg, #302000, #000);
  color: #ffdc73;
  border: 1px solid #ffdc73;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: absolute;
  top: 16px;
    right: 16px;
}
/* Progress bar block */
.progressBarWrap {
  margin: 10px 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  color: #ffdc73;
  font-family: anton, sans-serif;
}

.progressText {
  font-size: 14px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px rgba(255,220,115,0.3);
}

.progressBarOuter {
  width: 100%;
  height: 14px;
  background: #222;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}

.progressBarInner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffdc73 0%, #c6973f 100%);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(255,220,115,0.5);
  transition: width 1s ease-out;
}
/* ---- Hub Modal ---- */
.hubModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  background: radial-gradient(circle at center, #101010 0%, #070707 100%);
  border: 2px solid #d7b55a;
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(255,220,115,0.05);
  color: #ffdc73;
  font-family: anton, sans-serif;
  width: clamp(320px, 50vw, 580px);
  padding: 20px 26px;
  z-index: 16000;
  text-align: left;
  
  transition: all 0.25s ease-out;
}
.hubModal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Header */
.hubHeader {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #ffdc73;
  margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(255,220,115,0.3);
}

/* Info text */
.hubInfo {
  font-size: 15px;
  color: #eee;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.hubLabel {
  color: #ffdc73;
}

/* Progress bar reused from codex */
.progressBarWrap {
  margin: 12px 0 18px 0;
}
.progressBarOuter {
  width: 100%;
  height: 12px;
  background: #1b1b1b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}
.progressBarInner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffdc73 0%, #c6973f 100%);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,220,115,0.4);
}

/* Action buttons */
.hubActionRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.hubButton {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ffdc73;
  background: linear-gradient(180deg, #332200 0%, #0a0800 100%);
  color: #ffdc73;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: anton, sans-serif;
}
.hubButton:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffdc73, #a07a2a);
  color: #111;
  box-shadow: 0 0 12px rgba(255,220,115,0.4);
  transform: translateY(-1px);
}
.hubButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

.progressHeader button:hover {
  background: #ffdc73;
  color: #111;
}

/* Container for lands */
.progressContainer {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Each land section */
.progressSection {
  background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 14px;
  box-shadow: inset 0 0 12px rgba(255, 220, 115, 0.05);
}

.progressSectionTitle {
  font-size: 18px;
  color: #ffdc73;
  margin-bottom: 10px;
  text-shadow: 0 0 4px rgba(255, 220, 115, 0.3);
}

/* Responsive creature list */
.creatureWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
}

/* Creature cards */
.creatureCard {
  background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  width: 120px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.25s ease;
}

.creatureCard:hover {
  transform: translateY(-4px);
  border-color: #ffdc73;
  box-shadow: 0 0 14px rgba(255, 220, 115, 0.25);
}

.creatureCard img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  background: #050505;
}

.creatureLabel {
  margin-top: 6px;
  font-size: 13px;
  font-weight: bold;
  color: #ffdc73;
  text-transform: uppercase;
}

/* Discovered creatures stand out */
.creatureCard.discovered {
  border-color: #ffdc73aa;
  background: linear-gradient(180deg, #1a1608 0%, #0c0902 100%);
}

/* Scrollbar styling */
.modernProgressModal::-webkit-scrollbar {
  width: 10px;
}
.modernProgressModal::-webkit-scrollbar-thumb {
  background: #ffdc73aa;
  border-radius: 5px;
}

.centerInCardSmall {
    color: #ffe99e;
    font-size: 0.9rem;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    padding-bottom: 4px;
}

.centerInCardSmall .round-time-bar{
    margin: 1em auto -7px;
}
#mintedMuscles{
	font-size: 120px;
    fill: gold;
}
.fatbuttons{
    background: linear-gradient(0deg, #063b7a, #006dc7, #04b88b);
    border: 2px solid #e8c30d;
    margin: 10px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    color: #ffcc00;
    font-weight: bold;
    font-family: "Cinzel", serif;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
}
#adventureModal {
    
    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/images/parchment-texture.webp) repeat rgb(26, 19, 15);
    border: 4px solid rgb(195, 139, 45);
    border-radius: 16px;
    padding: 24px;
    color: rgb(255, 245, 192);
    font-family: serif;
    width: max-content;
    z-index: 9999;
    box-shadow: rgb(0, 0, 0) 0px 0px 20px;
}

.modal-content {
	background: #1e1e1e8f;
	padding: 20px;
	border-radius: 12px;
	text-align: center;
	color: #fff;
	width: 90%;
	max-width: 500px;
    color: rgb(255, 245, 192);
    font-family: serif;
}
#nftGallery{
    overflow-y: auto;
    max-height: 19em;
}
.headerPop{
    text-align: center;
    margin-bottom: 12px;
    font-size: 20px;
    color: rgb(255, 215, 0);
}
.land-list-scroll {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid #444;
	padding: 8px;
	border-radius: 8px;
	background: rgba(20, 17, 15, 0.5);
}
.land-grid{
    max-height: 9em;
   overflow-y: auto;
    background: #1c1918;
    padding: 4px 9px;
    box-shadow: 0px 0px 0px 2px inset #333333;
    border: 2px solid #666;
    border-radius: 2px;
}
.land-list-item {
	padding: 10px;
	margin-bottom: 8px;
	border: 2px solid #666;
	border-radius: 8px;
	cursor: pointer;
	background-color: #1d1712;
	transition: border-color 0.2s, background-color 0.2s;
    min-height: 2.5em;
}

.land-list-item:hover {
	border-color: gold;
}

.land-list-item.selected {
	border-color: gold;
	background-color: #2a2015;
}


.land-options {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
    gap: 20px;
}

.land-options div {
	cursor: pointer;
	text-align: center;
	transition: transform 0.2s ease;
}

.land-options div:hover {
	transform: scale(1.05);
}
.miniminiCardsZoomDown{
    zoom:0.25;
}
.tokenImageSelected{
    border-radius: 5px;
    position: relative;
    border: 1px solid #572d08;
    left: 0px;
}
.topRIghtIconPlus{
    width: 16px;
    z-index: 15;
    height: 16px;
    /* background: #766363; */
    /* border: none; */
    border-radius: 0;
    position: absolute;
    top: 1px;
    right: 4px;
}
.land-options img {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	border: 2px solid #666;
	background: #222;
}

#earningsDaily{
	    font-size: 69px;
    fill: black;
	font-family:cursive;
}


#buttonToViewDistribution{cursor:pointer;}

#connectingHolder{
	
    min-height: 50%;
    height: 100%;
    position: absolute;
    top: 5em;
    z-index: 1;
    width: 100%;
	font-family:monospace;
	
}
.connectHeader{
	font-size:2em;
}
.loginBtnHolder{
	min-width: 46%;
    background: #2e2b2b;
    min-height: 50%;
    margin-top: 15%;
    display: inline-block;
    float: left;
    padding: 1%;
    border-radius: 9%;
    margin: 0.8%;
    border: 1px solid black;
	cursor:pointer;
}
.loginBtnHolder:hover, .loginBtnHolder:active{
	background: #101a20;
}
.iconBtn{
	position:relative;
	max-height:2em;
	max-width:4em;
}
.choices2connect{
		color:white;
	margin-top: 4.2em;
  font-size: 20px;
  justify-content: center;
  
  background:#b30006;
    background-image: linear-gradient(144deg,#C30F16, #b30006 50%,#C30F16);
	background-image: linear-gradient(144deg,#C30F16, #b30006 69%,#C30F16);
  border: white 1px solid;
  border-radius: 10px;
	  cursor: pointer;
}


.buttonsInPopUp2{
	display:inline-block;
	background:#042e05;
}
.buttonsInPopUp{
	display:none;
	
}








.smallButtonsApprove{
	min-width: 4em;
    padding: 0.75em 0.1em;
    margin: 0;
	cursor:pointer;
}



.smallButtonsUnstake{
	min-width: 6em;
    padding: 0.75em 0.1em;
    margin: 0;
	cursor:pointer;
}



	
.smallButtonsLiApprove{
	min-width: 4em;
    margin: 0 6px;
	font-size:29px;
}
	
.smallButtonsLiUnstake{
	min-width: 6em;
    margin: 0 6px;
	font-size:29px;
}
.ApproveButtons{
	background-image: linear-gradient(144deg,#004609, #00ff22 69%,#006b0e);
}	
.UnstakeButtons {
    background-image: linear-gradient(144deg,#004609, #ff2b00e8 69%,#006b0e);
}
.smallButtonsLi{
	min-width: 2em;
    margin: 0 1px;
	font-size:29px;
}
.smallButtonsLi2{
min-width: 1em;
    margin: 0 1px;
    font-size: 12px;
    top: 0px;
    position: relative;
}
.biggerBadges{
min-width: 1em;
    margin: 0 1px;
    font-size: 16px;
    top: 0px;
    position: relative;
}
.smallButtonsLiActivated{font-size:26px;min-width: 1em;margin: 0;}
.smallButtonsA{
	min-width: 2em;
    padding: 0.75em 0.1em;
    margin: 0;
	cursor:pointer;
}
.smallButtonsB{
	min-width:  2.25em;
    padding: 0.75em 0.1em;
    margin: 0;
	cursor:pointer;
}
.smallButtonsC{
	min-width: 2.25em;
    padding: 0.75em 0.1em;
    margin: 0;
	cursor:pointer;
	max-height:1em;
}
.mintedHolder{
	    top: 46%;
    position: absolute;
    left: 66%;
    font-size: 1.5em;
}
.imgMintedIcon{
	    position: relative;
    top: 17%;
	width: 3em;
    height: 3em;
}
.nextMint{
	background: #114104;
    position: absolute;
    border-radius: 50%;
    right: 6px;
    top: 39%;
    color: #fad110;
    font-size: 3em;
    border-style: inset;
    border-color: gold;
	z-index:1;
	
	
}
#tartarusNav ul li{float:left;background-image: linear-gradient(144deg,#452806, #f00 50%,#900303);}
#landFertilizings:before, #mintOptions:before, #MintMuscle:before, #MintHellMorphs:before, #MinterBrew:before, #landUpgrades:before, #landUpgrades2:before, #landUpgrades3:before, #landFertilizer1:before, #landFertilizer2:before, #landFertilizer3:before, #stakingHestia:before, #stakingDemeter:before, #stakingHera:before, #stakingPoseidon:before, #stakingHades:before, #stakingZeus:before, #PlayMorphsCards:before, #PlayMorphsFlip:before, #kitsuInfo:before, #earnedInStaking:before, #earnedInHolding:before, #earnedInStakingHeart:before, #earnedInStakingEarth:before, #earnedInStakingDragon:before, #earnedInStakingWater:before, #earnedInStakingFire:before, #earnedInStakingLightning:before, #earnedInStakingCroSquitos:before{background:none;}
#tartarusNav ul li a span{background-image: linear-gradient(144deg,#170d02, #e00000  69%,#050f01);}

.prevMint{
	background: #114104;
    position: absolute;
    border-radius: 50%;
    left: 6px;
    top: 39%;
    color: #fad110;
    font-size: 3em;
    border-style: inset;
    border-color: gold;
	z-index:1;
}
.hiddenFertilizerOptions{display:none;height:0;}
.visibleFertilizerOptions{display:block;height:auto;transition:height 0.8s;}
#mintedCard{
	display: none;
    position: absolute;
    top: 23%;
	transition: top 0.5s;
    height: 30%;
	font-family:'Press Start 2p';
    width: 40%;
    left: 30%;
	    font-size: 1em;
}
#mintedCard2{
	display: inline-block;
    position: relative;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: 95%;
    font-size: 1em;

}
#mintedCard3{
	display: inline-block;
    position: relative;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: 95%;
    font-size: 1em;

}
#mintedCard4{
	display: inline-block;
    position: relative;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: 95%;
    font-size: 1em;

}
#mintedCard5{
	display: inline-block;
    position: relative;
    top: 15%;
    transition: top 0.5s;
    height: 15em;
    width: 95%;
    font-size: 1em;

}
#centerInMinCard{
	top: 6.5%;
    height:85%;
    width: 90%;
	display:inline-block;
}
#centerInMinCard2{
	top: 1.5%;
    height: 96%;
    width: 99%;
    display: inline-block;
}
.navMint ul li a span{
	background-image: linear-gradient(144deg,#004609, #00ff22 69%,#006b0e);
}
.navMint ul div span{
	background-image: linear-gradient(144deg,#004609, #00ff22 69%,#006b0e);
}
.navMint ul li{
	padding:0;
	margin: -7px 5px;
}
#inuptFieldsForMintShits{background-image:none !important;}
#inuptFieldsForMintLand{background-image:none !important;}
#inuptFieldsForMint{background-image:none !important;}
#inuptFieldsForMintBzz{background-image:none !important;}
#centerInMinCard3{
	top: 1.5%;
    height: 96%;
    width: 99%;
    display: inline-block;
}
#centerInMinCard4{
		top: 1.5%;
    height: 96%;
    width: 99%;
    display: inline-block;
}
#centerInMinCard5{
		top: 1.5%;
    height: 96%;
    width: 99%;
    display: inline-block;
}
#mintedSoFar, #mintedSoFar4{
	top: 35%;
    position: relative;
}
#mintedSoFar2, #mintedCard3{
	top: 35%;
    position: relative;
}
.navMint{
	position: absolute;
    left: 14%;
    right: 14%;
    top: 4%;
}
.mintRefresher{
	position: relative;
    cursor: pointer;
    left: 3%;
    top: -0.2em;
}
.BtnStyler{
	    background-image: linear-gradient(144deg,#170d02, #492a05 69%,#533304);
		min-width:4em;
    
}


#recieversInput{
	left: 10%;
    width: 80%;
    /* display: none; */
    position: absolute;
    bottom: 26%;
	
}
#recieversInput::placeholder{color:black;}

#checkbox, #checkbox2, #checkbox3, #checkbox4, #checkbox5, #checkbox6, #checkbox7{
	width: auto;
    position: relative;
    top: 2px;
	
	}
	
	.transferPopUp{
		display:none;
    position: relative;
    top: 0%;
    transition: top 0.5s, width 0.5s, left 0.5s;
    height: 12em;
    font-family: 'Press Start 2p';
    width: 40%;
    z-index: 1;
    left: 0%;
    font-size: 1em;
	
	}
	#MintOptionOnPotions{}
	.optionToMintOnPotions, .optionToMintMonoOnMinis, .optionToUpgradeLand1, .optionToUpgradeLand2, .optionToMakeFertilizer, .optionToMakeFertilizer2, .optionToMakeFertilizer3{display:none;}
	.transferPopUp2Bulk{
	    position: relative;
    top: 0%;
    transition: top 0.5s, width 0.5s, left 0.5s;
    height: 12em;
    font-family: 'Press Start 2p';
    width: 40%;
    z-index: 1;
    left: 0%;
    font-size: 1em;
	}
	
	
	.itemsToTRansferInBulk{font-size: 0.75em;top: 4em;position: relative;}
	.explanationOptions{font-size: 0.75em;top: 3em;position: relative;}
#transferSingle{	font-size: 18px;
    top: 2px;
    position: relative;}
#transferBulks, #mintSelector, #approvalButton, #mintSelector2, #heraSelector, #hadesSelector, #demeterSelector, #poseidonSelector, #zeusSelector{
	display:none;
	font-size: 18px;
    top: 2px;
    position: relative;
}
.buttonHolders{
	      position: absolute;
    bottom: 5%;
    left: 10%;
    width: 80%;
    display: inline;
}
.imageInInfoCard, .imageInInfoCard2{
	position: relative;
    height: 200px;
    width: 200px;
    transition: top 0.5s;
    border: 1px solid gold;
    top: 3em;
    
border-radius:2%;
	border-style:inset;
	background-size: cover;
}
.imageInInfoCard2{display:none;}
.smallButtonsSpan{
	padding:0.05em;
}
.smallButtonsSpan:hover{
	color:gold;
}
#menuList{
    position: relative;
    transition: bottom 0.5s ease;
}
.nav2-up{bottom:3em;}
.nav2-down{bottom:4.75em;}
.visSnd{display:inline !important;}
.hidSnd{display:none !important;}
.badgesYouHold{
	    position: relative;
    top: 0.2em;
    /* border-radius: 50%; */
    height: 4em;
    margin: 0 -0.35em;
    /* width: 1em; */
    cursor: pointer;
    font-size: 1em;
}

.connectLiLeft2Show{
	display: inline;
    position: absolute;
    top: 4.05em;
    right: -1em;
}
.connectLiLeft2Hide{
	position: absolute;
    right: -690%;
    top: 4.05em;
}
#connectLiLeft2{
	transition:right 0.75s ease-in-out;
}

.hypemoonHead{
	    width: 100%;
    background-size: 100% 100%;
    height:4.2em;
	background: linear-gradient(180deg, #00000042, #ff8f00a1, #00000066);
    box-shadow: inset 0 0px 23px 45px #00000073;
    box-shadow: inset 0 1px 15px 23px #026874b8;
    box-shadow: inset 0 1px 15px 23px #112c39b8;
    border-top: none;
    /*border: 2px solid #17798a;
    border-bottom-style: dashed;*/
    border-left: none;
	position: fixed;
	z-index:23;
    border-right: none;
}

.secretBg{display:block;}
.secretBgHide{display:none;}
.regularBg{display:block;}
.regularBgHide{display:none;}
.gameButtons{
	font-size: 0.5em;
    padding: 0.25em;
	background-image: linear-gradient(144deg,#004609, #113e9d 69%,#006b0e);

}
#insideAboveRootImg, #insideAboveRootImg2{
	    width: 1.5em;
    height: 1.5em;
    position: relative;
    border-radius: 50%;
    
	border: 1px solid gold;
    margin-left:1em;
    border-style: inset;	
	  background:none;
}
#insideAboveRoot{position: relative;color:black;}
#insideAboveRootImg:hover, #insideAboveRootImg2:hover{background:#134905;}
#insideAboveRootImg:active, #insideAboveRootImg2:active{border:2px solid gold;}
#descriptionForProject{
	  display: inline;
    color: gold;font-style:italic;font-size:0.75em;
}

.iconsHolder{
	display:block;margin:1em;
}
#bannerImage{
	
    background-size: 100% 100%;
    width: 100%;
    min-height: 10em;
	max-height:25em;
	border-bottom: 1px solid gold;
}
.hiddenImg{
	display:none;
}
.visibleImg{
	display: inline;
}

.damage-numberInArena{
	display:none;
    width: 1.25em;
    animation: damageAnimationMini 1.5s ease;
    z-index: 100;
    position: absolute;
    opacity: 1 !important;
    font-family: fantasy;
    text-shadow: 1px 1px 1px black;
    border-radius: 50%;
    border: 1px solid black;

    top: -8px;
    left: 30px;
    font-size: 1em;
    color: white;
    background: red;
}
.damage-number {
	display:none;
    width: 1.25em;
    font-size: 1.5em;
    color: red;
    animation: damageAnimation 1s ease;
    z-index: 100;
    position: absolute;
    left: 9px;
    opacity: 1 !important;
    top: -24px;
    font-family: fantasy;
    text-shadow: 1px 1px 1px black;
    background: wheat;
    border-radius: 50%;
    border: 1px solid black;
}


@keyframes teleport {
    /* Define your animation keyframes */
    from {
      opacity: 0;
      transform: translateY(-100px) rotateY(90deg);
    }
    to {
      opacity: 1;
      transform: translateY(0) rotateY(180deg);
    }
  }

  @keyframes teleportEnemy {
      /* Define your animation keyframes */
      from {
        opacity: 0;
        transform: translateY(-100px) rotateY(90deg);
      }
      to {
        opacity: 1;
        transform: translateY(0) rotateY(0deg);
      }
    }
  @keyframes damageAnimation {
      /* Define your animation keyframes */
      from {
        opacity: 1;
        transform: translateY(0);
      }
      to {
        opacity: 0;
        transform: translateY(-50px);
      }
    }
  @keyframes damageAnimationMini {
    /* Define your animation keyframes */
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }

  .gamefiButtons{

  }
  .gamefiButtons div, .woodButtonsOuter{
    display: inline-block;
    border: 2px solid #ccb383;
    margin: 4px auto;
    padding: 4px;
    border-radius: 10px;
    border-right: 0;
    border-left: 0;
    box-shadow: 0px 0px 1px 0px #ccb383;
    transition: all .4s ease-in-out;
    text-shadow: 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000;
  }
.gamefiButtons span, .woodButtonsInner{
    font-family: fantasy;
    padding: 10px;
    color: #fffafa;
    display: inline-block;
    border: 1px solid wheat;
    background: url(images/wood.webp);
    background-size: 100% 100%;
    cursor: pointer;
    border-radius: 5px;
    border-right: 0;
    border-left: 0;
}
.gamefiButtons div:hover, .gameMenuButtons:hover{
    
    -webkit-transform:  scale(1);
    transform:  scale(1);
    color:black;
    text-shadow: 1px 1px 0px red, 0px 1px 0px red, -1px 1px 0px red;
    filter: drop-shadow(0px 0px 6px #000);
}
.gamefiButtons div:active, .gameMenuButtons:active, .playerTrophies img:active{
    
    -webkit-transform:scale(0.9);
    transform:  scale(0.9);
}
.deckView{
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 1em;
    right: 0;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #ffdc73;
    transition: all 1s ease;
    left: 1px;
    bottom: 2px;
    z-index: 16;
    background: url(images/frameMetalAndPaper.webp) 0% 0% / 100% 100%;
    background: url("images/skins/gameBoards/mainGameboardPreview.webp") 0% 0% / 100% 100%;
}
.gameMenuButtons{
    background: url(images/nameHolderTop.webp);
    background-size: 100% 100%;
    font-size: 2em;
    cursor: pointer;
    display: inline-block;
    color: #94d9ff;
    transition: color .5s ease-in-out, transform .2s ease-in-out, filter .5s ease-in-out;
    text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
    padding: 20px;
    filter: drop-shadow(0px 0px 6px #ccb383);
    font-family: fantasy;
}


#beam2{
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 6.5em;
    top: -109px;
    left: 23px;
    border: 1px solid #00b1ff7a;
    background: url(images/gameAnimations/beam.gif) no-repeat center center;
}
.tinyEx{
    position: absolute;
    top: 1px;
    right: 2px;
    border: 1px solid;
    cursor:pointer;
    background: #8080804d;
    border-radius: 50%;
    padding: 0px 3px 3px 3px;
}
.cameraIcon{
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 1px solid;
    position: absolute;
    bottom: 3px;
    left: 0;
    z-index: 1;
    transition: all 2.4s ease;
}
.explanationField{
    background: wheat;
    color: black;
    border: 1px solid;
    padding: 0.5em 1.5em 0.5em 0.5em;
    left: 10px;
    top: -15px;    
    width: max-content;
    position: absolute;
}
#beam{
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 6.5em;
    border: 1px solid #00b1ff7a;
    top: -109px;
    left: 23px;
    background: url(images/gameAnimations/beamRed.gif) no-repeat center center;
}
.beamInCreature2{
    animation: teleport 2s ease;
}
.beamInCreature{
    animation: teleportEnemy 2s ease;
}
.noBeam{
    opacity: 0;
}
.beam-effect {
    opacity: 0.7;
    background-size: cover;
    animation: damageAnim 3s ease forwards; /* 1s damage animation */
}
.damage-effect {
    position: absolute;
    bottom: 1em;
    left: 0.5em;
    width: 3em;
    height: 3em;
    display: none;
    background: url(images/gameAnimations/damageMagicFire.gif) no-repeat center center;
    background-size: cover;
    border-radius: 25%;
}

.animate-damage-magic {
    display: block; /* Show the effect */
    animation: damageAnim 1.5s ease forwards; /* 1s damage animation */
}
@keyframes damageAnim {
    0% { opacity: 1; }
    100% { opacity: 0; } /* Fades out to simulate the effect disappearing */
}


.imageBigger{
	width: 50%;
    border: gold 1px solid;
    height: 35%;
    background-size: 100% 100%;
    border-radius: 1%;margin: 1em 0 3em 0;
}
#aboveRoot{
	width:90%;
	border-style:inset;
	border:none;
	    position: relative;
    left: 5%;border-radius: 1%;
	margin:1em 0;
	background:black;
	
}

#farmOptionstList, #mintList0, #mintList1, #mintList2, #mintList3, #mintList4, #mintList5, #mintList6, #fertilizeList, #upgradeList, #morphsMintList1, #morphsMintList2{
	margin: 0;
    padding: 0;
}
.mintHeader:hover{
    text-shadow: 2px 2px 1px #be0202;
}
.mintHeader{
	text-shadow: 3px 3px 1px #000000;
	display:inline-block;
	margin: 0px auto;
	text-align: center;
	font-size: 2em;
	letter-spacing:2px;
	color:antiquewhite;
}
.mintButtons{
	display: block;
    height: 4.2em;
    position: relative;
    margin: 1em auto;
    max-width: 100%;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid wheat;
    background: #181818;
}
.mintSectors{
	text-align: center;
    width: max-content;
    margin: 0.5em auto 0.5em;
    background: #073f6d;
    padding: 8px 14px 0px;
    border-radius: 4px;
    border: 1px solid;
}
.mintGradients{
	width: 69%;
    height: 1.5em;
    background: linear-gradient(110deg, green 50.9039%, transparent 56.9039%);
    margin: 0 auto;
    border-radius: 4px;
    border: 1px solid;
}
.mintGuidanceInfo{
	margin: 1.25em auto 1.75em;
    font-size: 0.75em;
    border-radius: 17px;
    background: wheat;
    color: black;
    padding: 0;
    font-family: cursive;
    border: 1px solid black;
    max-width: 60%;
    padding: 1em;
    display: inline-block;
}
.mintGuidanceInfoInner{
	margin: 0.25em auto 1.75em;
    font-size: 0.75em;
    border-radius: 17px;
    color: black;
    padding: 0;
    font-family: cursive;
    max-width: 100%;
}
.mintButns{
	max-width: 8em;
	cursor:pointer;
    height: 4em;
    display: inline-block;
    /* border: 4px ridge #272727; */
    text-align: center;
    margin: 0 auto;
    border-radius: 57px;
	transition: max-width 0.5s ease, max-height 0.5s ease;
}
.navMenu::-webkit-scrollbar-track,.nftView::-webkit-scrollbar-track,.blueScroll::-webkit-scrollbar-track,.gameInfoScreenHolderBoxes::-webkit-scrollbar-track,.infoStartGame::-webkit-scrollbar-track,#box1NewInfo::-webkit-scrollbar-track,.infoSectionsFaq::-webkit-scrollbar-track,.profileMenu::-webkit-scrollbar-track,#paraInfoWrapTheWrapper::-webkit-scrollbar-track,#faq4::-webkit-scrollbar-track,#faq1::-webkit-scrollbar-track,#faq2::-webkit-scrollbar-track,#faq3::-webkit-scrollbar-track,#paraInfo::-webkit-scrollbar-track,#paraStory::-webkit-scrollbar-track,#rootNEW::-webkit-scrollbar-track,#rootList2::-webkit-scrollbar-track, #rootList1::-webkit-scrollbar-track, #rootHolder::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#11454e), to(#1b5484), color-stop(.6,#1a93a6));
    border-radius:0px;
}

.navMenu::-webkit-scrollbar,.nftView::-webkit-scrollbar,.blueScroll::-webkit-scrollbar,.gameInfoScreenHolderBoxes::-webkit-scrollbar,.infoStartGame::-webkit-scrollbar,#box1NewInfo::-webkit-scrollbar,.infoSectionsFaq::-webkit-scrollbar,.profileMenu::-webkit-scrollbar,#paraInfoWrapTheWrapper::-webkit-scrollbar,#faq4::-webkit-scrollbar,#faq1::-webkit-scrollbar,#faq2::-webkit-scrollbar,#faq3::-webkit-scrollbar,#paraInfo::-webkit-scrollbar,#paraStory::-webkit-scrollbar,#rootNEW::-webkit-scrollbar,#rootList2::-webkit-scrollbar, #rootList1::-webkit-scrollbar, #rootHolder::-webkit-scrollbar
{
  width: 15px;background-color: #2d8698;
}

.navMenu::-webkit-scrollbar-thumb,.nftView::-webkit-scrollbar-thumb,.blueScroll::-webkit-scrollbar-thumb,.gameInfoScreenHolderBoxes::-webkit-scrollbar-thumb,.infoStartGame::-webkit-scrollbar-thumb,#box1NewInfo::-webkit-scrollbar-thumb,.infoSectionsFaq::-webkit-scrollbar-thumb,.profileMenu::-webkit-scrollbar-thumb,#paraInfoWrapTheWrapper::-webkit-scrollbar-thumb,#faq4::-webkit-scrollbar-thumb,#faq1::-webkit-scrollbar-thumb,#faq2::-webkit-scrollbar-thumb,#faq3::-webkit-scrollbar-thumb,#paraInfo::-webkit-scrollbar-thumb,#paraStory::-webkit-scrollbar-thumb,#rootNEW::-webkit-scrollbar-thumb,#rootList2::-webkit-scrollbar-thumb,#rootList1::-webkit-scrollbar-thumb,#rootHolder::-webkit-scrollbar-thumb
{
	border-radius: 2px;
    background-color: #392626;
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#3ca5b7), to(#3ca5b7), color-stop(.6,#134a67));
    border: 2px groove black;
}
.redScroll::-webkit-scrollbar {
    width: 8px;
    background-color: #982d2d;
}
.redScroll::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #392626;
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#b73c3c), to(#b73c3c), color-stop(.6,#c5a913));
    border: 2px outset gold;
}
.redScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4e1111), to(#84261b), color-stop(.6,#a6231a));
    border-radius: 0px;
}



    /* Apply styles to the scrollbar for specific containers */
    #cardPopUp {
        overflow-y: scroll; /* Enable vertical scrolling */
        height: 100%;
    }

/* Scrollbar Track */
body::-webkit-scrollbar-track, .woodScroller::-webkit-scrollbar-track, #popUpWrapperUsersTrophies::-webkit-scrollbar-track,#cardPopUp::-webkit-scrollbar-track, #listOfWhitelistedTokens::-webkit-scrollbar-track, .popUpWrapperChallenges::-webkit-scrollbar-track , .popUpWrapperMissions::-webkit-scrollbar-track {
    background: url('images/frameMetalAndPaper.webp') no-repeat center;
    background-size: cover; /* Ensure the image covers the track area */
}

/* Scrollbar Thumb */
body::-webkit-scrollbar-thumb,.woodScroller::-webkit-scrollbar-thumb, #popUpWrapperUsersTrophies::-webkit-scrollbar-thumb,  #cardPopUp::-webkit-scrollbar-thumb, #listOfWhitelistedTokens::-webkit-scrollbar-thumb , .popUpWrapperChallenges::-webkit-scrollbar-thumb, .popUpWrapperMissions::-webkit-scrollbar-thumb {
    background: 
    url('images/testBg2.webp') no-repeat center,  /* Small icon centered */
    url('images/frameMetalOnly.webp') no-repeat center; /* Main background */
background-size: 20px, cover; /* Icon size (20px) and full thumb background */
    border: 2px solid rgba(0, 0, 0, 0.5); /* Add contrast for visibility */
    border-radius: 2px; /* Optional: round edges */
    height: 20px; /* Ensure visible drag area *//
}

/* Scrollbar Corner (optional, for areas where the scrollbars meet) */
.woodScroller::-webkit-scrollbar-corner, #popUpWrapperUsersTrophies::-webkit-scrollbar-corner, #cardPopUp::-webkit-scrollbar-corner, #listOfWhitelistedTokens::-webkit-scrollbar-corner, .popUpWrapperChallenges::-webkit-scrollbar-corner, .popUpWrapperMissions::-webkit-scrollbar-corner {
    background: url('images/gameIcons/magicIcon.webp') no-repeat center;
    background-size: cover;
    z-index: 54;

}
/*
    .listGuilds
*/
/* Scrollbar Width */
body::-webkit-scrollbar, .woodScroller::-webkit-scrollbar, #cardPopUp::-webkit-scrollbar, #popUpWrapperUsersTrophies::-webkit-scrollbar, #listOfWhitelistedTokens::-webkit-scrollbar , .popUpWrapperChallenges::-webkit-scrollbar , .popUpWrapperMissions::-webkit-scrollbar {
    width: 12px; /* Adjust width as needed */
}
.woodScroller {
    -ms-overflow-style: none; /* IE */

}
/* Optionally hide the default scrollbar for non-Webkit browsers */
#cardPopUp , #popUpWrapperUsersTrophies{
    
    -ms-overflow-style: none; /* IE */
}




@keyframes flashyDots {
  0% {
    border-color: transparent;
  }
  5% {
    border-color: #2d73cb8f;
  }
  10% {
    border-color: #0d49958f;
  }
  15% {
    border-color: #190d958f;
  }
  20% {
    border-color: #610d958f;
  }
  25% {
    border-color: #950d918f;
  }
  30% {
    border-color: #950d538f;
  }
  35% {
    border-color: #950d388f;
  }
  40% {
    border-color: #950d0d8f;
  }
  45% {
    border-color: #95530d8f;
  }
  50% {
    border-color: #cb872d8f;
  }
  55% {
    border-color: #95530d8f;
  }
  60% {
    border-color: #950d0d8f;
  }
  65% {
    border-color: #950d388f;
  }
  70% {
    border-color: #950d538f;
  }
  75% {
    border-color: transparent;
  }
  80% {
    border-color: #610d958f;
  }
  85% {
    border-color: transparent;
  }
  90% {
    border-color: #190d958f;
  }
  95% {
    border-color: #0d49958f;
  }
  100% {
    border-color: transparent;
  }
}

.flashy-dotted-border {
  border: 5px dotted transparent;
  animation: flashyDots 15s infinite;
}
#minteKnappHolder{
	position: relative;
    margin: 0;
    padding: 0;
    bottom: 2em;
}
.minteKnapp{
    background-size: 100% 100%;
    width: 11em;
    height: 3em;
    cursor: pointer;
	
}
.poweredByCronos{
    width: 6em;
    height: 2em;
    position: absolute;
    bottom: 2em;
    left: 1em;
    display: inline-block;
}
#xInRoot, #xInRootNew{
    right: 1em;
    top: 1em;
    font-size: 1.5em;
	    z-index: 99;
    color: antiquewhite;
    background: #673813;
    cursor: pointer !important;
    position: absolute;
    width: 1em;
    border: 2px solid wheat;
    text-shadow: 1px 1px 1px wheat;
    text-align: center;
    border-radius: 50%;
}
#backInRootNew, #backInRoot{
	display:none;
       right: 2.3em;
    padding: 1px 3px 3px;
    top: 1em;
    HEIGHT: 1EM;
    font-size: 1.5em;
    z-index: 99;
    color: antiquewhite;
    background: #673813;
    cursor: pointer !important;
    position: absolute;
    width: 1em;
    border: 2px solid wheat;
    text-shadow: 1px 1px 1px wheat;
    text-align: center;
    border-radius: 50%;
}
#root{
	margin: 1em 2em 0em;
    
}
#minterOfCardsWrap{
	top:33%;
	position: absolute;bottom: 33%;left: 25%;right: 25%;
}
.DescriptionHolder{
	padding-bottom:1em;
}
.hedr{cursor:pointer;
	    top: 7%;
    position: relative;
	display:none;
}
.holeThing{  display:inline-block;font-size:1.5em;  margin: 0 0em 5px 0;color:white;}
#oneDown, #oneDown2, #oneDown3, #oneDown4, #oneDown5{
	    margin: 0px 0.75em 0 0em;   
    cursor: pointer;
    border-radius: 50%;
    color: gold;    font-size: 1em;width: 1em;
    display: inline-block;border-style: inset;
    border-color: gold;
	}
#oneUp, #oneUp2, #oneUp3, #oneUp4, #oneUp5{
	margin: 0 0 0 0.75em;    
    cursor: pointer;
    border-radius: 50%;
    color: gold;    font-size: 1em;width: 1em;
    display: inline-block;border-style: inset;
    border-color: gold;
	}
#CRObal, #resStakedLands, #resDeadMinis, #resDeadOgs{
	position: relative;
        color: gold;
    font-size: 15px;
}

.croLogoInHeader{
	position: relative;
   top: 0.2em;
    border-radius: 50%;
    height: 1em;
    margin:0 0.25em;
	width:1em;cursor:pointer;
	box-shadow: 0px 1px 6px 3px #b8860b;
}
.croLogoInfo{
	position: relative;
   
    box-shadow: 0px 2px 9px 5px #b8860b;
    border-radius: 50%;
    height: 2em;
    margin:0 0.25em;
	width:2em;
}
#BalHolder{
	font-size:1.25em;
	padding-bottom: 1em;
}
.homeLogo{cursor:pointer; }
.MetaMorphisParagraphs{font-size: 1em;line-height: 1.25em;margin: 1em 0;}

/* --------------------
  Modern TCG-style cards
  for .popUpWrapperMiniMarket
  -------------------- */

/* colors / tuning */
.popUpWrapperMiniMarket {
  --gold: #d4af37;
  --bg-dark: #0f0f10;
  --card-top: rgba(255,255,255,0.02);
  --card-bottom: rgba(0,0,0,0.55);
  --muted: #cfcfcf;
  --accent-glow: rgba(212,175,55,0.45);
  font-family: "Cinzel", "Montserrat", system-ui, sans-serif;
}

/* remove classic table chrome */
.popUpWrapperMiniMarket table,
.popUpWrapperMiniMarket thead,
.popUpWrapperMiniMarket tfoot,
.popUpWrapperMiniMarket th,
.popUpWrapperMiniMarket td {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* spacing between rows = card gap */
.popUpWrapperMiniMarket table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1.1rem;          /* big gap to separate cards */
  background: transparent;
}

/* hide header labels (we show info on cards) */
.popUpWrapperMiniMarket thead { display: none; }

/* turn each row into a card (use grid to reflow cells like card regions) */
.popUpWrapperMiniMarket tr {
  display: grid;
  grid-template-columns: 200px 96px 100px 70px 95px 95px 125px 125px; /* item | stock | price | trend | actions */
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  position: relative;
  overflow: visible;

  /* card surface */
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.7),
    inset 0 -3px 8px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* gold left accent stripe on each card */
.popUpWrapperMiniMarket tr::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #d72b09, #c73e00); /* Gold */
  box-shadow: 0 0 18px var(--accent-glow);
  z-index: 2;
}

/* hover lift + glow */
.popUpWrapperMiniMarket tr:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.85),
    0 0 18px rgba(212,175,55,0.35);
}

/* each cell becomes a "panel" inside the card */
.popUpWrapperMiniMarket td {
  padding: 0;
  color: var(--muted);
  vertical-align: middle;
  background: transparent;
  position: relative;
  z-index: 3; /* above the left stripe */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1) Item column: icon + title */
.popUpWrapperMiniMarket td:first-child {
  justify-content: flex-start;
  gap: .8rem;
  padding-left: 2.2rem; /* make room for left accent */
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* item icon */
.popUpWrapperMiniMarket td:first-child img,
.popUpWrapperMiniMarket td:first-child .icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
  box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(255,255,255,0.02);
  display: inline-block;
}

/* text next to icon: allow two-line name */
.popUpWrapperMiniMarket td:first-child .name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.popUpWrapperMiniMarket td:first-child .name .title {
  color: #ffd54a;
  font-weight: 800;
  letter-spacing: .2px;
}
.popUpWrapperMiniMarket td:first-child .name .subtitle {
  color: #cfcfcf;
  font-size: .85rem;
  opacity: .9;
}

/* 2) Stock column: small muted number */
.popUpWrapperMiniMarket td:nth-child(2) {
  font-weight: 700;
  font-size: .95rem;
  color: #e6e6e6;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.popUpWrapperMiniMarket td:nth-child(2)::before {
  content: "Stock";
  display:block;
  font-size: .7rem;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* 3) Price column: stylized pill */
.popUpWrapperMiniMarket td:nth-child(3) {
  display:flex;
  flex-direction: column;
  gap: .15rem;
  align-items: center;
}
.popUpWrapperMiniMarket td:nth-child(3)::before {
  content: "Price";
  display:block;
  font-size: .7rem;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.popUpWrapperMiniMarket td:nth-child(3) .price-pill {
  display:inline-block;
  padding: .35rem .7rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  font-weight: 800;
  color: #ffd;
}

/* 4) Trend column: compact badge */
.popUpWrapperMiniMarket td:nth-child(4) {
  justify-self: center;
}
.popUpWrapperMiniMarket td:nth-child(4) .trend {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.3));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);
}

/* up / down variants (you can toggle classes on server side as needed) */
.popUpWrapperMiniMarket td:nth-child(4) .trend.up {
  color: #0ad37a;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.popUpWrapperMiniMarket td:nth-child(4) .trend.down {
  color: #ff6b6b;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* 5) Actions column (Buy / Sell) */
.popUpWrapperMiniMarket td:nth-child(5) {
  display:flex;
  gap: .6rem;
  justify-content: center;
  padding-right: 1.2rem;
}

/* neutralize legacy button look and give TCG-style buttons */
.popUpWrapperMiniMarket td button,
.popUpWrapperMiniMarket td .btn {
  border: none;
  cursor: pointer;
  padding: .45rem .9rem;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* BUY (green) */
.popUpWrapperMiniMarket td button.buy-btn,
.popUpWrapperMiniMarket td .buy-btn {
  background: linear-gradient(180deg,#9ef4a5,#28a745);
  color: #03240b;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 8px 20px rgba(34,154,88,0.16), 0 0 10px rgba(46,204,113,0.06);
}
.popUpWrapperMiniMarket td button.buy-btn:hover,
.popUpWrapperMiniMarket td .buy-btn:hover { transform: translateY(-3px) scale(1.02); }

/* SELL (red) */
.popUpWrapperMiniMarket td button.sell-btn,
.popUpWrapperMiniMarket td .sell-btn {
  background: linear-gradient(180deg,#ff9a9a,#c62828);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 8px 20px rgba(198,40,40,0.14), 0 0 10px rgba(255,85,85,0.05);
}
.popUpWrapperMiniMarket td button.sell-btn:hover,
.popUpWrapperMiniMarket td .sell-btn:hover { transform: translateY(-3px) scale(1.02); }

/* small screens: stack card info (keeps same HTML) */
@media (max-width: 820px) {
  .popUpWrapperMiniMarket tr {
    grid-template-columns: 1fr 1fr; /* two columns */
    grid-auto-rows: auto;
    gap: .6rem;
    padding: .8rem;
  }
  .popUpWrapperMiniMarket td:nth-child(2),
  .popUpWrapperMiniMarket td:nth-child(3),
  .popUpWrapperMiniMarket td:nth-child(4),
  .popUpWrapperMiniMarket td:nth-child(5) {
    justify-content: flex-start;
    padding-left: 1.4rem;
  }
  .popUpWrapperMiniMarket td:nth-child(5) { justify-content: flex-end; padding-right:1rem; }
}

/* force removal of old 3px borders if present elsewhere */
.popUpWrapperMiniMarket table, 
.popUpWrapperMiniMarket th, 
.popUpWrapperMiniMarket td { border: none !important; }






.fa-volume-up:before , .fa-volume-mute:before, .fa-pause:before, .fa-play:before{
    
    color: #ffdc73;
}







/* ---- Header ---- */
.miniMarketHeader {
  text-align: center;
  margin-bottom: 2rem;
  color: #f4f4f4;
  font-family: "Cinzel", "Montserrat", system-ui, sans-serif;
}

.miniMarketHeader .lightHeader, .pm-modal .lightHeader {
  font-size: 2rem;
  font-weight: 800;
  color: #ffd54a;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin-bottom: .5rem;
}

.miniMarketHeader .imgMarketLogo {
  height: 7em;
  margin: .6rem auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

.miniMarketHeader .subtext {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 1rem;
}

/* ---- Shards badge ---- */
.currency-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.currency-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 -2px 3px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
}

.currency-badge img {
  width: 28px;
  height: 28px;
  top: 0;
}

.currency-badge .label {
  font-weight: 700;
  color: #ffd86b;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.currency-badge .value {
  font-weight: 800;
  font-size: 1.05rem;
}

/* ---- Resource chips ---- */
.resources-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9rem;
}

.resource {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 5px 12px rgba(0,0,0,0.55);
  font-size: .95rem;
}

.resource img {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}

.resource .label {
  font-weight: 700;
  color: #ffd54a;
}

.resource .value {
  font-weight: 800;
  margin-left: .25rem;
}
.popUpWrapperMiniMarket tr:nth-child(1)::before {
  background: linear-gradient(180deg, #31b10700, #1e730400); /* Food */
}
.popUpWrapperMiniMarket tr:nth-child(2)::before {
  background: linear-gradient(180deg, #31b107, #1e7304); /* Food */
  box-shadow: 0 0 18px rgb(26 178 70 / 45%);
}
.popUpWrapperMiniMarket tr:nth-child(3)::before {
  background: linear-gradient(180deg, #4fc3f7, #2a82a6); /* Water */
  box-shadow:0 0 18px rgb(55 173 212 / 45%);
}
.popUpWrapperMiniMarket tr:nth-child(4)::before {
  background: linear-gradient(180deg, #ffeb3b, #c7a600); /* Gold */
  box-shadow: 0 0 18px var(--accent-glow);
}
.popUpWrapperMiniMarket tr:nth-child(5)::before {
  background: linear-gradient(180deg, #ba68c8, #6a2a7d); /* Gems */  
  box-shadow: 0 0 18px rgb(181 55 212 / 44%);
}
.popUpWrapperMiniMarket tr:nth-child(6)::before {
  background: linear-gradient(180deg, #68c877, #2a7d53); /* GeenCards */  
    box-shadow: 0 0 18px rgb(55 212 144 / 44%);
}
.popUpWrapperMiniMarket tr:nth-child(7)::before { /* TradingLicences */  
    background: linear-gradient(180deg, #a55c09, #7d562a);
    box-shadow: 0 0 18px rgb(212 145 55 / 44%);
}
/* Color-coded left bars */
.resource.food   { border-left: 4px solid #31b107; }
.resource.water  { border-left: 4px solid #4fc3f7; }
.resource.gold   { border-left: 4px solid #ffeb3b; }
.resource.gems   { border-left: 4px solid #ba68c8; }

.marketCloseBtn {
  position: absolute;
  top: 8px;
  right: 8px;

  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  color: wheat;
    border: 2px solid wheat;
    background: radial-gradient(circle at 30% 30%, #9b621c, #d07e2352);
  box-shadow: 0 0 8px rgba(229,57,53,0.6), 0 0 16px rgba(229,57,53,0.3);
  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.pm-overlay {
    width: 96%;
    
height: 73.5vh;
    overflow-y:auto;
    z-index: 9999;
    max-height:80vh;
    padding:0px 20px 0px 20px;
    top: 5em;
    border-radius: 2px;
    transform: translateX(-50%);
}

/* ===== Container & layout ===== */
.tournamentRoundsWrapper {
  display: flex;
  gap: 28px;
  padding: 26px;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,204,51,0.16) transparent;
}
@media (max-width: 768px) {
  .milestoneTrack {
    flex-direction: column;
  }
  .milestoneCard.previous,
  .milestoneCard.next {
    display: none;
  }
}

/* Reward text more visual */
.milestoneReward {
  margin-top: 0.8rem;
  font-weight: bold;
  font-size: 1rem;
  color: #ffb347;
  text-shadow: 0 0 6px rgba(255,159,28,0.4);
}
.milestoneTrack {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  padding: 0rem 2rem 1rem 2rem;
  position: relative;
}

/* Timeline line flowing forward → */
.milestoneTrack::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(
    90deg,
    rgba(255, 204, 102, 0.2) 0%,
    rgba(255, 204, 102, 0.6) 50%,
    rgba(255, 180, 50, 0.9) 100%
  );
  box-shadow: 0px 0px 30px 10px rgba(255, 200, 100, 0.4);
  z-index: 0;

  /* clip to make left flat with notch and right arrow */
  clip-path: polygon(
    0 0,              /* top-left */
    15px 50%,         /* notch inward */
    0 100%,           /* bottom-left */
    calc(100% - 25px) 100%, /* bottom before arrow */
    100% 50%,         /* arrow tip */
    calc(100% - 25px) 0      /* top before arrow */
  );
}

.buttonwRwapBTm{
    
      position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}
/* Close button */
.milestoneCloseBtn {
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    z-index: 20;
    margin:0 12px;
    /* margin-top: 0.8rem; */
    /* font-size: 0.85rem; */
   background: rgb(55 54 46 / 99%);
    border: 1px solid #afa64c;
    color: #af964c;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    /* padding: 0.3rem 0.8rem; */
    border-radius: 6px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}
.milestoneWrap, .presaleSection, .pfpBuilderSection{
    height: 69vh;
}
.alchemyWrap{
    height: 69vh;
}


.milestoneCard {
  flex: 1;
  min-height: 340px;
  max-width: 320px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding: 1.5rem 1rem;
  margin: 0 auto;

  background: radial-gradient(circle at top, #2b2b2b 0%, #1a1a1a 100%);
  border: 2px solid #7a5230;
  border-radius: 14px;

  box-shadow: 
    0 0 25px rgba(0, 0, 0, 0.6),
    inset 0 0 18px rgba(0, 0, 0, 0.7);

  color: #ffd966;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Hover FX (PC only) */
.milestoneCard:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 0 35px rgba(255, 217, 102, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Card header */
.milestoneCard .lightHeader, .presaleSection .lightHeader, .pfpBuilderSection .lightHeader {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd966;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 8px rgba(255,217,102,0.5);
}

/* Description */
.milestoneDesc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e0c97f;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  margin-bottom: 0.8rem;
}

/* Community task */
.milestoneCommunity {
  font-size: 0.9rem;
  color: #ffda85;
  font-style: italic;
  margin-bottom: 0.8rem;
}

/* Reward highlight */
.milestoneReward {
  font-size: 1rem;
  font-weight: bold;
  color: #ffb347;
  margin-top: auto;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 10px rgba(255,159,28,0.5);
  border-top: 1px dashed rgba(255,179,71,0.4);
  padding-top: 0.6rem;
}

/* Progress bar wrapper */
.milestoneCard .progressWrap, .presaleSection .progressWrap{
  width: 100%;
  height: 12px;
  background: #333;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.5rem;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
}
.milestoneValues {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0.2rem auto 0rem auto;
  color: #ffd56b;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(255, 200, 100, 0.3);
}

.milestoneValues span {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
}

.milestoneValues span:first-child {
  text-align: left;
}

.milestoneValues span:last-child {
  text-align: right;
}

/* Progress bar itself */
.milestoneCard .progressBar, .presaleSection .progressBar {
  height: 100%;
  background: linear-gradient(90deg, #ffd966, #ff9f1c);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(255,217,102,0.8);
}

/* Status badge */
.milestoneStatus {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
}

/* Completed */
.milestoneCard.completed {
    scale: 0.75;
  border-color: #4caf50;
  background: radial-gradient(circle at top, #1d261d 0%, #121912 100%);
}
.milestoneCard.completed .milestoneStatus {
  background: rgba(76,175,80,0.2);
  border: 1px solid #4caf50;
  color: #4caf50;
}

/* Active */
.milestoneCard.current {
  border-color: #ffd966;

  background: radial-gradient(circle at top, #2d2a1e 0%, #1b1a16 100%);
  box-shadow: 0 0 25px rgba(255,217,102,0.6), inset 0 0 15px rgba(0,0,0,0.8);
}
.milestoneCard.current .milestoneStatus {
  background: rgba(255,217,102,0.15);
  border: 1px solid #ffd966;
  color: #ffd966;
}

/* Locked (mystery/fog) */
.milestoneCard.locked {
  border-color: #555;
  background: #111;
  filter: blur(2px) brightness(0.6);
  opacity: 0.5;
    scale: 0.75;
}
.milestoneCard.locked .milestoneStatus {
  background: rgba(85,85,85,0.2);
  border: 1px solid #555;
  color: #999;
}
/* Wrapper holds all minimized tabs */
#minimizedTabsWrapper {
  position: absolute;       /* anchored inside #nftView */
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 9999;            /* above most UI */
}

/* Generic tab */
.minimized-tab {
  padding: 6px 14px;
  background: linear-gradient(180deg, #2c2c2c, #1a1a1a);
  color: #eee;
  border: 1px solid #444;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: all 0.15s ease;
  white-space: nowrap;      /* keep text on one line */
}

/* Hover effect */
.minimized-tab:hover {
  background: linear-gradient(180deg, #3a3a3a, #222);
  color: #fff;
  transform: translateY(-2px);
}

/* Optional active/restore animation */
.minimized-tab:active {
  transform: translateY(0);
  background: #111;
}
.milestoneCard p {
    margin: 1em 0;
}
.alchemyWrap,
.pfpBuilderSection,
.milestoneWrap,
.presaleSection {
 position: absolute;
    top: 46%;
    /* left: 0; */
    /* right: 0; */
    /* transform: none; */
    z-index: 1;
    /* width: 98%; */
    /* max-width: 1000px; */
    padding: 2rem;

  background: radial-gradient(circle at center, #2a2418 0%, #15120e 100%);
  border: 3px solid #7a5230;
  border-radius: 16px;
max-height: 100%;
  box-shadow: 
    0 0 40px rgba(0, 0, 0, 0.9),
    inset 0 0 25px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(122, 82, 48, 0.6);

  font-family: "Cinzel", serif;
  color: #ffd966;
  overflow-y: auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  transition: all 0.3s ease;
}

.blueer{
    background: rgb(46 51 55 / 99%);
    border: 1px solid #4c8daf;
    color: #4c8eaf;
}
.redder, .Cancel{
    background: rgb(55 46 46 / 99%);
    border: 1px solid #af4c4c;
    color: #af4c4c;
}
.greeener, .Confirm{
    background: rgb(46 55 46 / 99%);
    border: 1px solid #4caf50;
    color: #4caf50;
}
/* Inner glow edge for fantasy vibe */
.alchemyWrap::before,
.milestoneWrap::before,
.presaleSection::before,
.pfpBuilderSection::before

{
  content: "";
  position: absolute;
  
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(145deg, rgba(255,217,102,0.25), rgba(122,82,48,0.25));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Header */
.alchemyWrap h2 {
    font-size: 2em;
    margin-bottom: 1.2em;
    text-shadow: 0 0 10px #ffd966, 0 0 20px #66ffea;
}

/* Grid for Slots */
.alchemyWrap .alchemyGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5em;
}

/* Each Slot */
.alchemyWrap .alchemySlot {
    width: 6em;
    height: 6em;
    background: linear-gradient(135deg, #3b2f2f, #5c4333);
    border: 2px solid #654321;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 0 10px rgba(255, 215, 102, 0.2);
}

.alchemyWrap .alchemySlot:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(255, 215, 102, 0.8), inset 0 0 15px rgba(255, 102, 255, 0.5);
}

/* Slot Text */
.alchemyWrap .alchemySlot span {
    color: #ffd966;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
}

/* Dropdown selectors */
.alchemyWrap select {
    background: rgba(32, 22, 10, 0.95);
    color: #ffd966;
    border: 2px solid #7a5230;
    border-radius: 10px;
    padding: 0.5em;
    margin: 0.5em 0;
    font-size: 1em;
    width: 80%;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(255,215,102,0.3);
    transition: all 0.2s ease-in-out;
}
.craftingTable{
    background: url(images/skins/backgrounds/woodGame.webp) 0% 0% / 100% 100%;
    padding: 3em;
}
.craftingTableSlot{
    background: url(images/icons/runeSlot752.webp) 0% 0% / 100% 100%;
    border : none !important;
}
.wridrHit{
    opacity: 0;
}
.craftBtn{
        padding: 2em;
    background: url(images/icons/craftButtonIcon.webp) 0% 0% / 100% 100%;
}
.alchemyWrap select:hover {
    box-shadow: 0 0 15px rgba(255, 215, 102, 0.6), inset 0 0 15px rgba(255, 102, 255, 0.4);
}

/* Buttons */
.alchemyWrap button {
    background: linear-gradient(145deg, #ffd966, #66ffea);
    border: 2px solid #ffd966;
    border-radius: 10px;
    padding: 0.6em 1.2em;
    margin: 0.3em;
    cursor: pointer;
    font-weight: bold;
    color: #1a0f0f;
    box-shadow: 0 0 10px #ffd966;
    transition: all 0.2s ease-in-out;
}

.alchemyWrap button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px #ffd966, 0 0 25px #66ffea inset;
}

/* Scrollbar */
.alchemyWrap::-webkit-scrollbar {
    width: 12px;
}

.alchemyWrap::-webkit-scrollbar-thumb {
    background: url(images/testBg2.webp) no-repeat center, url(images/frameMetalOnly.webp) no-repeat center;
    background-size: 20px, cover;
    border: 2px solid rgba(0,0,0,0.5);
    border-radius: 2px;
}

.alchemyWrap::-webkit-scrollbar-track {
    background: url(images/frameMetalAndPaper.webp) no-repeat center;
    background-size: cover;
}

/* Fade-in animation */
@keyframes popupAppear {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* round column */
.tournamentRound {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width: 240px;
  max-width: 320px;
  max-height: 66vh;
overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--transition), box-shadow var(--transition);
  transform-origin: left center;
}
.tournamentRound:hover{  box-shadow: 0 18px 38px rgba(0,0,0,0.7); }

/* heading */
.roundTitle {
  text-align:center;
  font-weight:800;
  color: var(--accent-gold);
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 6px rgba(255,204,51,0.06);
  padding: 6px 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  box-shadow: inset 0 -3px 10px rgba(0,0,0,0.35);
}

/* single match card */
.tournamentMatch {
  display:flex;
  flex-direction:column;
  gap:8px;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255,215,100,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14));
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(6px);
}
.tournamentMatch:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(0,0,0,0.7); }

/* player row */
.tournamentPlayer {
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight:700;
  color: #fff;
  font-size: 0.95rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  transform-origin: left center;
}

/* alive / eliminated states */
.tournamentPlayer.playerAlive {
  background: linear-gradient(90deg, rgba(40,90,40,0.95), rgba(76,175,80,0.95));
  color: #fff;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 8px 20px rgba(18,80,20,0.25), inset 0 -6px 18px rgba(0,0,0,0.12);
}
.tournamentPlayer.playerEliminated {
  background: linear-gradient(90deg, rgba(80,20,20,0.90), rgba(163,51,51,0.95));
  text-decoration: line-through;
  opacity: 0.65;
  filter: grayscale(0.25);
  box-shadow: none;
}

/* highlight current user */
.tournamentPlayer.currentUserPlayer {
  position: relative;
  transform: scale(1.02);
  box-shadow: 0 6px 26px rgba(255,204,51,0.15), 0 0 18px rgba(255,204,51,0.06) inset;
  border: 1px solid rgba(255,204,51,0.18);
}
.tournamentPlayer.currentUserPlayer::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,204,51,0.06), transparent);
  mix-blend-mode: screen;
  filter: blur(6px);
}

/* header / top bar */
.tournamentHeaderContent {
    margin: 0 auto;
    line-height: 1.75em;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #3b2414, #6b4a2b 60%);
  border-radius: 12px;
  border: 1px solid rgba(255,215,100,0.16);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  color: var(--accent-gold-2);
  font-weight:800;
  font-size: 0.95rem;
}
.tournamentHeaderContent > div { display:flex; align-items:center; gap:10px; }

/* entry cost icon sizing */
.entryCost img { width:20px; height:20px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }

/* pre-tournament container */
.preTournamentWrapper{
  padding: 20px;
  background: linear-gradient(180deg, rgba(31,21,11,0.85), rgba(50,36,22,0.72));
  border: 1px solid rgba(255,204,51,0.12);
  border-radius: 1px;
  min-height: 79vh;
  transition: all var(--transition);
  box-shadow: 0 20px 48px rgba(3,2,2,0.7);
  backdrop-filter: blur(6px);
  color: var(--muted);
}

/* header row inside pre-tourney */
.tournamentHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

/* cost badge */
.entryCost { display:flex; align-items:center; gap:8px; background: rgba(0,0,0,0.12); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); }

/* player list */
.preTournamentPlayerList {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(153,102,51,0.06);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(255,255,255,0.01));
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.preTournamentPlayerList::-webkit-scrollbar{ height:10px; width:8px; }
.preTournamentPlayerList::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(255,204,51,0.12), rgba(255,204,51,0.06)); border-radius:8px; }

/* player slot */
.playerSlot {
  padding:8px 12px;
  border-radius:8px;
  font-weight:800;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.01));
  border: 1px solid rgba(0,0,0,0.4);
  color: #efe7dc;
  transition: transform var(--transition), box-shadow var(--transition);
}
.playerSlot:hover {  box-shadow: 0 12px 30px rgba(0,0,0,0.55); }

/* alive / eliminated for pre-list */
.playerAlive { background: linear-gradient(90deg, rgba(32,90,32,0.95), rgba(76,175,80,0.92)); color:#fff; border:1px solid rgba(0,0,0,0.35); }
.playerEliminated { background: linear-gradient(90deg, rgba(90,32,32,0.9), rgba(163,51,51,0.93)); text-decoration:line-through; opacity:0.65; }

/* highlight current player in pre-list */
.currentUserPlayer { box-shadow: 0 8px 30px rgba(255,204,51,0.15); color:goldenrod; border:1px solid rgba(255,204,51,0.16); }

/* empty slot styling */
.emptySlot { background: #5b4f44; color: #cfc1b2; font-style: italic; opacity:0.9; }

/* action button */
.tournamentActionBtn {
  margin-top: 12px;
  padding: 10px 16px;
  font-weight:900;
  font-family: var(--font-sans);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.45);
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-2));
  color: #31210a;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  letter-spacing: 0.6px;
}
.tournamentActionBtn:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.6), 0 0 26px rgba(255,204,51,0.06); filter: brightness(1.02); }
.tournamentActionBtn:active:not(:disabled) { transform: translateY(-1px) scale(.995); }
.tournamentActionBtn:disabled { background: linear-gradient(180deg,#777,#666); cursor:not-allowed; box-shadow:none; color:#222; border:1px solid rgba(0,0,0,0.4); }

/* subtle title shimmer (for the whole UI area you can reuse) */
@keyframes shimmer {
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.roundTitle.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.02) 80%);
  background-size: 400% 100%;
  animation: shimmer 4s linear in
}

.pm-modal {
    
    border-radius: 12px;
    padding: 20px;
    
    overflow-y: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.pm-header h2 {
    margin:0;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    border-bottom: 1px solid #222;
    padding-bottom: 5px;
}

.pm-markets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.pm-market-card {
    background: #1f1f1f;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-market-title {
    font-weight: bold;
    font-size: 18px;
    color: #00ff99;
}

.pm-market-desc {
    font-size: 14px;
    color: #ccc;
}

.pm-market-meta span {
    display: block;
    font-size: 12px;
    color: #888;
}

.pm-market-totals div {
    font-size: 14px;
    display: flex; justify-content: space-between;
}

.pm-bet-buttons button {
    padding: 6px 10px;
    border:none; border-radius:6px; cursor:pointer;
    margin-right:5px;
    font-weight:bold;
}

.pm-long-btn { background:#28a745; color:white; }
.pm-short-btn { background:#a72831; color:white; }

.pm-top-bets {
    display:flex;
    justify-content: space-between;
    font-size: 12px;
    color: #ccc;
}

.pm-close {
    position:absolute; top:10px; right:15px;
    background:transparent; border:none; font-size:24px; color:white;
    cursor:pointer;
}


/*
@media only screen and (max-width: 640px) and (orientation:portrait){	
#mintedCard2{    top: 5%;
height: 35%; font-size:0.5em;}
	.mintedHolder{top:28%;}



}


*/

/* ===============================
   FANTASY USER DASHBOARD OVERHAUL
   =============================== */

/* Whole right dropdown: deep metallic plate w/ inner rim */
.tokenDropdown2 {
  border-left: 3px solid #c89b3c;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.9),
    0 0 20px rgba(255,180,80,0.2);
  overflow-y: auto;
}



/* ===== HEADER: player + account ===== */
#userTopBar {
  background: linear-gradient(180deg, #4b1f00 0%, #210b00 100%);
  border-bottom: 1px solid rgba(255,200,120,0.15);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffdb88;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-shadow: 1px 1px 2px #000;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
}

#userTopBar img {
  height: 2.2em;
  width: 2.2em;
  border-radius: 50%;
  border: 1px solid #a7761c;
  background: radial-gradient(circle at 40% 40%, #3a1a00, #000);
  box-shadow: 0 0 6px rgba(255,180,60,0.3);
}

/* ===== TOKEN ROW ===== */
#userTopBar + div {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 12px;
  background: radial-gradient(circle at 50% 0%, #2b0c005c, #10000017 90%);
    /* border-top: 1px solid rgba(255, 200, 100, 0.08); */
    /* border-bottom: 1px solid rgba(255, 200, 100, 0.08); */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    position: relative;
    top: -4px;
}

/* each token bar as golden inset capsule */
.tokenBar {
  flex: 1 1 0;
  height: 28px;
  border-radius: 6px;
  position: relative;
  background: linear-gradient(180deg, #2c1200, #140700);
  border: 1px solid #8c6b28;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.8),
    inset 0 -1px 2px rgba(255,200,120,0.25),
    0 0 5px rgba(255,180,70,0.15);
  color: #ffdf73;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding-left: 34px;
  text-shadow: 1px 1px 1px #000;
}

.tokenIconNewer {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  filter: drop-shadow(0 0 2px #000);
}

.tokenAmount {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffeab3;
}

/* ===== DIVIDER ICON ===== */
.newMdimIcon {
  display: block;
  margin: 10px auto;
  width: 1.5em;
  filter: drop-shadow(0 0 5px rgba(255,200,100,0.25));
}
#playersGuild{
    top: 8px;
    position: relative;
    margin-bottom: 4px;
}
/* ===== LOGIN BUTTONS ===== */
#loginButtonsWrapper {
  background: radial-gradient(circle at 50% 20%, #2b0c00, #150000 90%);
  border-top: 1px solid rgba(255,200,100,0.1);
  border-bottom: 1px solid rgba(255,200,100,0.1);
  padding: 12px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ===== ICON BUTTONS ROW ===== */
#playersGuild + div {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 12px;
}

#playersGuild + div img {
  width: 2.3em;
  height: 2.3em !important;
  box-shadow: 0 0 4px rgba(255,210,120,0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3a1a00, #150000);
  transition: transform 0.15s ease, box-shadow 0.2s;
}

#playersGuild + div img:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 8px rgba(255,220,150,0.5);
}

/* ===== XP & STATS SECTION ===== */
.progWRap {
  background: linear-gradient(180deg, #250900 0%, #120400 100%);
    border-top: 1px solid rgb(255 210 120 / 68%);
    /* border-bottom: 1px solid rgba(255, 210, 120, 0.1); */
    margin: 2px 0 0px;
    padding: 6px 14px 1px;
    border-radius: 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
}

/* XP bar */
.customProBarWrap {
  height: 18px !important;
  border: 1px solid #6a3a00;
  border-radius: 6px;
  background: linear-gradient(180deg, #2b1000, #1a0900);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.15),
    0 0 5px rgba(0,0,0,0.8);
  overflow: hidden;
  position: relative;
}

.customProBar {
  height: 100%;
  background: linear-gradient(180deg, #7e30ff 0%, #3a0075 100%) !important;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.2),
    0 0 6px rgba(140,70,255,0.4);
}

/* XP labels */
.topLeftOnBar {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #ffd25a;
  text-shadow: 1px 1px 1px #3a1a00;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
}

.amountInsideXpBar {
  color: #ffedb0;
  text-shadow: 1px 1px 1px #3a1a00;
}

/* Stats rows */
.areaToPlayWith .playerProgBars {
  margin-top: 12px;
  border-bottom: 3px dotted rgb(255 200 100 / 34%) !important;
}

.areaToPlayWith .topLeftOnBar {
  color: #ffdf86;
  text-shadow: 1px 1px 1px #3a1a00;
  font-weight: 600;
}

.playersNumbers {
  color: #ffeec0;
  text-shadow: 1px 1px 1px #3a1a00;
}

/* ===== LOGOUT AREA ===== */
#logoutbuttonOptions {
  background: radial-gradient(circle at 50% 50%, #2a0000, #110000 90%);
  border-top: 1px solid rgba(255,200,100,0.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
  padding: 14px 0;
}





@media only screen and (max-width: 418px){
    .buttonWrapper{bottom: 0em;
        right: 0.5em;
        scale: 1;}
        .someLeftText{
            scale: 0.7;margin-left: 38px;
        }
#nftCard{font-size:0.7em;}
#holdBalance{font-size:2em;}
#newEarnDetailsStaked2 div{
	font-size:0.9em;
}.infoSections2{min-width:94%;}
#abitTargetDetails{width:98%;}
#badgeinInfo, #badgeinInfo2, #badgeinInfo3, #badgeinInfo4, #badgeinInfo5, #badgeinInfo6 {
	height:1.5em;
	width:1.5em;
}
	.mintedHolder {
		font-size:1em;
	}
	.upgraderWrapper{
		left:5%;
	}
	#connectOptions div{min-width:75%;}
.mintButns{
	max-width: 2.5em;
	height: 3em;
}
	
.profileMenu div{
	width:96%;
}
	
.imagesIcons{
	max-width:2em;
	max-height:2em;
	height: 1.25em;
	background-size:100% 100%;
}
#box1New span {
    padding: 3px 3px 0;
}
}


@media only screen and (max-width: 845px) and (orientation:portrait) and (hover:none){
    .labelNew{
        display:inline-block;
    }
    .labelNew2{
        display:none;
    }
    .sacrificeButton{
        max-height: 1.5em;
    }
    .selectionView{max-width: 90%;}
		.icon > .label, .label , .labelVault, .labelVaultInline {display: none;}#holdBalance{font-size:2.25em;}


/*        .card-button, .card-button2{
	min-width:3em;max-height:4.75em;
}
*/
#connectOptions div{min-width:36%;}
.holeThing{font-size:1em;}
#viewMoreBzzInfo{padding-left:5.5em !important;}
.gameMenu nav div, .gameMenu nav{
	max-width: 100%;
}
#menuList li a{
    margin: 0;
}
#abitTargetDetails{width:98%;}
.imagesIcons{
	max-width:2em;
	max-height:2em;
	height: 1.75em;
	background-size:100% 100%;
}
#minterOfCardsWrap{
	top:20%;
}
.profileMenu div{
	width:96%;
}


}


@media only screen and (max-width: 960px) and (orientation:portrait){
    .popUpInfoCardMedium {
        left: 20%;
        right: 20%;
        min-width: 40%;
    }
    h3{font-size:1.5em;}
    .selectionView{max-width: 90%;}
    .sacrificeButton{
        max-height: 1.5em;
    }
}


@media only screen and (max-width: 845px) and (min-width: 481px) and (orientation:portrait){
	.infoSections2{min-width:94%;}
    .labelNew{
        display:inline-block;
    }
    .labelNew2{
        display:none;
    }
    .selectionView{max-width: 90%;}
    .popUpInfoCardMedium {
        left: 0%;
        right: 0%;
        min-width: 40%;
    }
.imagesIcons{
	max-width:2em;
	max-height:2em;
	height: 1.5em;
	background-size:100% 100%;
}
#connectOptions div{min-width:55%;}
.mintButns{
	max-width: 4em;
	height: 4em;
}
#minterOfCardsWrap{
	top:20%;
}
#holdBalance{font-size:2.25em;}
#menuList li a{
	margin:0;
}
#paraStory{
	width:80%;
}
.icon > .label, .label, .labelVault, .labelVaultInline {display: none;}
/*
.card-button, .card-button2{
	min-width: 3.3em;
    margin: 0.8em 0.25em;
    max-height: 4.4em;
}
    
.card-button img, .card-button2 img{
    max-width: 2em;
}
*/
/*699 below*/
.creatureImages, .creatureImagesEnemy{
    top: 1.25em;
    left: 24px;
}
.packageHoldFrame{font-size:1em;}
#myTopnav ul li{
	font-size:10px;
}

.gameMenu nav div, .gameMenu nav{
	max-width: 100%;
}
.InfoSectionInButtons{
    left: 15%;
}

.profileMenu div{
	width:96%;
}


.holeThing{font-size:1em;}
.mintedHolder{
		font-size:1em;}
	}


@media only screen and (max-width: 960px) and (orientation:landscape){	
    .labelNew{
        display:inline-block;
    }
h1{font-size:1em;}	h2{font-size:2em;}	h3{font-size:1.5em;}	p{font-size:0.8em;}	
nav ul li {  border-radius: 2px;font-size: 12px;}	nav ul {padding-left: 0px;}	nav{margin:0;}
.showAll{	height:100%;	width:95%;	left:2.5%;	top:17%;;}	.Display{	width:50%;	top:12%;	height:50%;	font-size:0.15em;}
.BtN{min-width: 250px;  font-size: 18px;  line-height: 1.75em;}.BtN2{line-height:1em;}
	.icon:before{font-size:1em;}.contentInPos{display: inline-block;}
	.mintedHolder{
		
		font-size:1.5em;}
		
		.icon > .label, .label , .labelVault, .labelVaultInline {display: none;}
		

#connectOptions div{min-width:50%;}
.gameButtonHolder{max-width:69%;}#holdBalance{font-size:2.25em;}
.gameHolder{max-width:80%;}
/*
.card-button, .card-button2{
	    min-width: 4.5em;
        max-height: 6em;
}
        */

        
#minterOfCardsWrap{
	top:20%;
}
.imagesIcons{
	max-width:2em;
	max-height:2em;
	height: 1.75em;
	background-size:100% 100%;
}
.mintButns{
	max-width:4em;
}
.navigations ul a div {
	width: 32%;
    height: 3em;
	
}
#paraStory{
	width:80%;
	
}
#viewMoreLightningInfo, #viewMoreBzzInfo, #viewMoreHeartInfo, #viewMoreEarthInfo, #viewMoreDragonInfo, #viewMoreWaterInfo, #viewMoreFireInfo{
	font-size:1em;
} 
#menuList li a{
	font-size: 2em;
    padding: 0.25em 0;
    margin: 0 0.2em;
}
#connectLi,  #connectLiLeft2{max-width:250px;}
	.xButtonSearchField{right: 10%;}
	.smallButtonsLi{font-size:23px;}.holeThing{font-size:1.75em;}
	.smallButtonsLiActivated{font-size:20px;}
	.smallButtonsSpan{padding:0;}
	
	
	.hiddenUlTada{top: 2.5em;}
	.hiddenUlTadaUp{top: -8em;}
	.hiddenUl{top:2.5em;}
	.con3{top:0.5em;height: 1.5em;width: 1.5em;left:49%;}
	.hiddenListItem{padding: 7px 0;}
	#TextInFirstFieldSacOrGrow{font-size:0.5em;}
	.smallButtonsB{min-width: 3.25em;}
	#holderForInfo{font-size:0.5em;}
	#mintedCard{    top: 12%;
    height: 25%;}
	header{height:2.5em;}
	.mintBtn{font-size:12px;padding:7px;}
	.connectLiLeft2Show{top:3.4em;right: -1.75em;}
	#mintedSoFar{top:25%;}
#mintedSoFar2{top:25%;}
#mintedSoFar3{top:25%;}
#mintedSoFar4{top:25%;}

#myTopnav ul li{
	font-size:16px;
}




.connectLiLeft2Hide{
	top: 3.4em;
}
	.imageBigger{width: 66%;height: 35%;}
	.MetaMorphisParagraphs{line-height:1.25em;margin:1em 0em;}
	.imageOptionsBtnAlone2 {
    font-size: 0.5em;
    padding: 8px;
}
	
}
@media only screen and (max-width: 960px) and (min-width: 900px) and (orientation:landscape){
	
    .flexWrapperSbc{
        zoom: 0.9;
        margin: 0 auto;
    }
#abitTargetDetails{width:90%;}
}


@media only screen and (max-width: 899px){
        
.popUpWrapperMiniMarket tr {
  grid-template-columns: 70px 97px 100px 70px 95px 95px 125px 125px; /* item | stock | price | trend | buy | sell */
}
    .flexOrOther{
        display: inline-grid;
    }
    .popUpWrapperChallenges, .popUpWrapperMissions{
        display: block;
    }
    .flexWrapperSbc, #challengeImages{

        padding-top: 3em;
    }
    .sbcFinal{
        position: relative;
        left: auto;
        right: auto;
        margin-top: 30px;
    }
    .topSectionToHack{
        padding-top: 3em;
    }
}
@media only screen and (min-width: 899px){	
    .labelNew{
        display:none;
    }
        
    .popUpWrapperMiniMarket {
        min-width: 96.5%;
    }
    



    .labelNew2{
        display:none;
    }
     .gameMenuWrap  {
        justify-content: center;
        align-items: center;
        display: flex;
     }
     .morphWrap{
        display: flex; /* Use flexbox */
        justify-content: space-between; /* Push elements to the sides */
        align-items: center; /* Align vertically */
     }
    .flexWrapperSbc{
        left: 3.25em;
        flex-direction: row;
        display: flex;
        width: auto;
        margin: 0 auto;
    }
     
        
    .wrapSbc{
        height: 14em;
        width: 15em;
        margin:0 0 0 -3.25em;
    }
    .iconImagesHeader{
        max-width: 2.25em;
        cursor: pointer;
        max-height: 3em;
        height: 2.25em;
        background-size: 100% 100%;
        top: 0.5em;
        position: relative;
    }
}
@media only screen and (min-width: 699px){	
   .slotWrapTop, .slotWrapBottom{
            zoom:1.25;
        }
    #endTurnAndEngageButton{
        position: absolute;
        cursor:pointer;
        z-index: 13;
    }
    .attackingIconButton{
        max-height: 3em;
        filter: drop-shadow(0px 0px 1px red);
        cursor: pointer;
        transition: all 0.1s ease;
        position: absolute;
        right: 0;
    }
        
    #turn-timerOld{
        right: 31%;
        top: -7px;
        background: #000000;
        padding: 0 2px;
        border-radius: 5px;
        border: 1px solid white;
        display: inline-block;
        position: absolute;
    }
    #engageToAttack-old{
        position: absolute;
        top: -3.25em;
        right: 0;
    }
.deckWrap{
    right: -5.9em;
    top: -9px;

}
.deckWrap .deckWrap {
    right: -6.8em;
    top: -4px;
}
.deckWrap .displayCard {
    scale: 0.4 0.21;
    transform-origin: top left;
    /*
            scale: 0.4 0.162; if normal card..
    */
}
.playersCardsWrapper .wrapImage{
}
.powerUpButtonsIconWrap{
    max-width: 5.75em;
    width: 5.75em;
    height: 7.5em;
}
.kamiCostOnDeck{
    top: -1px;
    right: 3.55em;
    position: absolute;
    z-index: 34 !important;
}
.boosterCards{
    bottom: 4em;
}   
.boosterCards span, .boosterCardsEnemy span{
    margin: -0.6em 0;/*Stacks side by side*/
}   
.boosterCardsEnemy{
    top: 4em;
}
.powerUpButtonsIconWrap{
    border-radius: 6px 6px 0px 0px;
}
    

           .logoTopMarket .imgMarketLogo  {
                height: 7em;
            }
}

@media only screen and (max-width: 898px){	
   
        
.menuListInside, .menuListInsideTop{
    top:3px;
}
    #slotMachineMulti{
        zoom : 0.75;
    }
    
        
.fullView{top: -0em;}

.tournamentWrap{
    max-width: 80%;
}
.innerMenuUlToHideAndShow, .innerMenuUlToHideAndShowTop {
    display: none;
    margin: 0px 4px 0px 0px;
    z-index: 3;
    position: absolute;
    background: linear-gradient(317deg, #01414c, #039490, #003d53);
    border: 1px solid #ffdc73;
    padding: 5px 14px 5px 0;
    top: 4.4em;
}
.redMenuStyle{
    top:2.55em !important;
    background: linear-gradient(291deg, #000000, #2f2a2a, #000000);
}
.orangeMenuStyle{
    top:2.55em !important;
    background: linear-gradient(317deg, #ba5803, #bc5608, #530900);
}

#lastMenu{
    right: 2px;
}
.innerMenuUlToHideAndShow li, .innerMenuUlToHideAndShowTop li{
    display: block;
    width: max-content;
}
.innerMenuUlToHideAndShow li{
    display: inline-block;
    position: relative;
    top: 0;
}
.labelNew2{
    display:inline-block;
}
.labelForIcons{
    display:none;
}

}
@media only screen and (max-width: 650px){	
        
        .leaderBoardSectionGuildwars{
               min-width: 80%;
        }
            .btnWrapFlex{
                flex-direction: column;
            }
            .logoTopMarket .imgMarketLogo {
                height: 5em;
            }
            .logoTopMarket #targetTrader {
                height: 4em;
            }

.farmAndVaultLogoWrapAddedTab{
    padding: 10px 0px 10px 0;
    display: block;
}
.vaultFarmStats{
    position: relative;
    left: 0;
    top: -5px;
}
    #adventureModal {
        width: 90vw;
    }
    
    #slotMachineMulti{
        zoom : 0.5;
    }    
       
    
        .slotWrapTop, .slotWrapBottom{
            zoom:1.5;
        }
    #challengeImages{
        /*margin-top: 20em;*//*very hacky solution...*/
    }

    #challengeImage1 .miniCardViewer, #challengeImage2 .miniCardViewer{
        display: flex;
    }
        
}

@media only screen and (max-width: 480px){
        .poweredByCronos{
            width: 6em;
            height: 2em;
            position: absolute;
            bottom: 3em;
            left: 1em;
            display: inline-block;
        }
      .milestoneWrap.popUpWrapperMiniMarket.woodScroller.battle-modal{
         min-width: 95.25%;
      }
.popUpWrapperMiniMarket {
    min-width: fit-content;
}
        
        .magicFoot{
            padding: 4em 0 0;
        }
        .footOptions{
                width: -webkit-fill-available;
        }
            .btnWrapFlex{
                flex-direction: column;
            }
        #slotMachineMulti{
            zoom : 0.35;
        }    
        .slotWrapTop, .slotWrapBottom{
            zoom:2;
        }
        .reel {
        width: 100px;
        height: 100px;
        
        }

        .rewardSection{
           min-width: 80%;
            width: max-content;
        }
        .leaderBoardSectionGuildwars{
               min-width: 92%;
            width: max-content;
        }
        .boosterCards{
            bottom: 16em;
        }
        .boosterCardsEnemy, .boosterCards{
            zoom:0.5;
        }

        .playersCardsWrapper{
            zoom: 0.75;
        }   
                
        .alignBelowScaleddownCard{
            top: 6em;
            z-index: 1;
            left: 5em;
            position: absolute;
        }
    #challengeImages{
        margin-top: 20em;/*very hacky solution...*/
    }

    #challengeImage1 .miniCardViewer, #challengeImage2 .miniCardViewer{
        display: flex;
    }
    .displayCard{margin:0.5em 0;}
    .sacrificeButton{
        max-height: 1.25em;
    }
    
    .popUpWrapper, #popUpWrapperUserPackOpening {
        position: fixed;
        z-index: 1000;
        left: 0%;
        bottom: 5%;
        right: 0;
        transform: translate(0, 0);
        background-size: 100% 100% !important;
        padding: 0;
        font-family: "MedievalSharp", cursive;
        text-align: center;
    }
    .popUpWrapper {
        top: 6.5%;
    }
    #popUpWrapperUserPackOpening {
        top: 0;
    }
    .innerPackArea{
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0%;
        bottom: 0;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
        border: 0 !important;        
        height: 100%;
        width: auto;
        scale: 0.75;
        
    }
    .miniCardViewer{
        max-width: max-content;
        transform: scale3d(1, 1, 1);
        transform-origin: top left;
        scale: 1;
    }
    .wrapSbc .miniCardViewer{
        max-width: max-content;
        transform-origin: top left;
        transform: scale3d(1, 1, 1);
        zoom: 0.75;
    }
    .deckView{padding: 0;}
    #cardPopUp{overflow-y: auto;}
    
    .nftContainerBigger{padding:0;}
#nftCard{
    
    font-size: 0.7em;
}
.selectionView{max-width: 90%;}
.infoSections2{margin: 0.2em auto;}
h1{font-size:1em;}	h2{font-size:2em;}	h3{font-size:1.5em;}	p{font-size:0.8em;}	
nav ul li {font-size: 16px;}	nav ul {padding-left: 0px;} nav{margin:0;}	
.showAll{	height:40%;	width:95%;	left:2.5%;	top:7%;;}	.Display{	width:75%;	top:12%;	height:50%;	font-size:0.15em;}
.BtN{min-width: 350px;  font-size: 16px;  line-height: 1.5em;}.BtN2{line-height:1em;}
.icon:before{font-size:1em;}
.viewNftCard{
	height: auto;
    width: 98%;
}
.paddingRemovedOnSideSmall{
    padding:2em 0;
}
.labelNew{
    display:inline-block;
}
.labelNew2{
    display:inline-block;
}

.popUpInfoCardMedium {
    left: 0;
    right: 0;
    min-width: 40%;
    top: 4.2em;
    height: 75vh;
    
}
#connectOptions div{min-width:75%;}
.navigations ul a div {
	width: 48%;
    height: 3em;
	
}.infoSections2{min-width:94%;}
.profileMenu div{
	width:96%;
}
	.upgraderWrapper{
		left:5%;
	}
	.selectionList span {
    width: auto;
    min-width: 1.25em;
    height: 1.25em;
}
#paraStory{
	width:80%;
}
.mintButns{
	max-width: 3em;
	height: 3em;
}
.gameButtonHolder{max-width:31%;}
.gameHolder{max-width:76.5%;}
.mintGuidanceInfo{
	margin:1.25em 3.5em 1.75em;
    max-width: 100%;
}
.loadingSpinner{
	top:45%;
	left:45%;
}

#menuList li a{
	margin:0;
}
.gameMenu{
	left: 0;
    right: 0;
}
#fucker{
	padding-top: 0.125em;
}

.imagesIcons{
	max-width:2em;
	max-height:2em;
	height: 1.5em;
	background-size:100% 100%;
}#box1New span {
    padding: 3px 3px 0;
}
#deadMinisImgLayover{
	width: 19px !important;
    bottom: 16px !important;
    right: -2px !important;
}
.buttonOuterSpan{
	    margin: 0px;
}
#farm1InRootShotIt, #farm2InRootShotIt{
	display:inline-block;
}
.farmAndVaultLogoWrapAddedTab{
    padding: 10px 0px 10px 0;
    display: block;
}
.vaultFarmStats{
    position: relative;
    left: 0;
    top: -5px;
}
#viewMoreBzzInfo{padding-left:5.5em !important;}
.packageHoldFrame{font-size:1em;}

.icon > .label, .label , .labelVault, .labelVaultInline {display: none;}
.popUpInfoCard2, .rootish{height:79vh;width:97%;height: 79vh;width: 98%;border-radius:2px;}
#viewMoreLightningInfo, #viewMoreBzzInfo, #viewMoreHeartInfo, #viewMoreEarthInfo, #viewMoreDragonInfo, #viewMoreWaterInfo, #viewMoreFireInfo{
	font-size:0.8em;
} 
/*
.card-button, .card-button2{
	min-width:2em;max-height:1.5em;margin: 0.8em 0.25em;

}
.card-button img, .card-button2 img{
    max-width: 1em;
}

.creatureImages, .creatureImagesEnemy{
    top: -1.25em;
    left: 0px;
}
.enemyFrame{
    scale: 0.75;
}
*/
.card-button, .card-button2{
    margin: 0 -1.75em 15px;
}
.tournamentWrap{
    max-width: 100%;
}
/*480 below*/
.fullView{top: -0em;}
.engageButtonsIconWrap{
    right:0;
}


.iconsStaked{
	height:4em !important;
}
.boxesTartarus{
	height: 4em !important;
}
.boxesTartarusBig{
	height: 7em !important;
}
#mintedCard5, #mintedCard4, #mintedCard3, #mintedCard2{
	height:9em;
}
#BalHolder{
	font-size:1em;
}
.transferPopUp2Bulk{
    width: 98%;
	}
	#recieversInput{
		bottom:33%;
	}
.transferPopUp{width: 98%;
}
.explanationOptions{top:2em;}


.iconInNftCard{margin-top:1em;}
.nftCardDisplayer, .nftCardDisplayerTartarus, .nftCardDisplayerMetaMorphis{padding: 8px;display:inline-flex;}
.imageUl{    margin: 0.5em 0em 0em 0.4em;}

   .hiddenA{min-width:7em;}
#connectLi,  #connectLiLeft2{max-width:	350px;}
.xButtonSearchField{right: 12%;}
.smallButtonsLi{font-size:17.25px;}
.smallButtonsLi2{
min-width: 1em;
    margin: 0;
    font-size: 12px;
    top: 0px;
    position: relative;
}
#abitTargetDetails{width:98%;}
#minterOfCardsWrap{
	top:20%;
}
#aboveRoot{left:0;width:99%;}
.allTheBadges{
	    position: fixed;
    min-height: 5em;
    width: 100%;
    display: block;
    margin: 0;
    z-index: 1;
    bottom: 9.4%;
}
#oneDown, #oneDown2, #oneDown3, #oneDown4, #oneUp, #oneUp2, #oneUp3, #oneUp4, #oneDown5, #oneUp5{font-size:1.5em;}
.smallButtonsLiActivated{font-size:16.25px;}
.smallButtonsSpan{padding:0em;}

.smallButtonsB{min-width: 3.75em;}
.hiddenUlTada{top: 2em;}
.hiddenUlTadaUp{top: -8em;}
.hiddenUl{top:2em;left:-800%}
#TextInFirstFieldSacOrGrow{font-size:1.35em;}
#holderForInfo{font-size:0.3em;bottom: 3.5em;}
.popUpCard{
	/*    display: inline-block;
    height: auto;
    width: 90%;
    position: absolute;
    top: 20%;
    bottom: 10%;
    right: 5%;
    left: 5%;
	
	Above if card is to be in center at top.
	
	Below method to add some content below main image in the page..
	*/
	display: inline-block;
   
    width: 99%;line-height: 2em;
	font-size:0.25em;
}
.centerInCard{width:90%;}
.imageNumber{
	top: -3px;
    font-size: 0.9em;
}
.mintBtn{padding:7px;font-size:11px;}
	.navMint{left:5%;right:5%;}
	.mintedHolder{left:60%;}
		
	.imgMintedIcon {top:10%;
	width: 3em;
    height: 3em;
	}
	.nextMint{right:-20px;top:37%;}
	.prevMint {left:-20px;top:37%;}
	.holeThing{font-size:1em;}
	
.BtnStyler{
	min-width:3em;
}	
.insideCenter{top:2%;}
.itemsToTRansferInBulk{font-size:0.5em;top:7em;}
.explanationOptions{font-size:0.5em;top:2em;}

.imageBigger{width: 90%;height: 35%;margin: 1em 0 7em 0;}
#mintedSoFar{top:23%;}
#mintedSoFar2{top:23%;}
#mintedSoFar3{top:23%;}
#mintedSoFar4{top:23%;}
.con3{
	    top: 0.1em;
    width: 1.5em;
	height:1.5em;
	left: 46.5%;
}
header{height:2em;}
.connectLiLeft2Show{
	top:2.05em;right: -1.25em;
}
.connectLiLeft2Hide{
	top: 2.05em;
}
.MetaMorphisParagraphs{line-height:1.25em; font-size:2em;margin: 0.5em 0;}
.imageOptionsBtnAlone2 {
    font-size: 0.5em;
    padding: 5px;
}
	
#myTopnav ul li{
	font-size:10px;
}
#holdBalance{font-size:2.25em;}
.InfoSectionInButtons{
    left: 15%;
}

}

@media only screen and (max-width: 360px){	
    
        #slotMachineMulti{
            zoom : 0.25;
        }    
        .slotWrapTop, .slotWrapBottom{
            zoom:2;
        }
        .reel {
        width: 80px;
        height: 80px;
        
        }
    .tokenDropdown, .tokenDropdown2 {
        min-width:  99.25%;
    }
    .sacrificeButton{
        max-height: 1em;
    }
}
@media only screen and (max-width: 400px){	
    
    
    
.settingsView{
    position: fixed;
    top: 2.35em;
    font-size: 1.2em;
    z-index: 2;
    right: 0%;
    left: 0%;
    border: none;
    transition: all 1s;
    bottom: 0%;
    padding: 11px;
    box-shadow: 0 0 0 0 #000;
}
}


@media only screen and (min-width: 1080px){	
    .innerMenuUlToHideAndShow, .innerMenuUlToHideAndShowTop {
        padding-inline-start: 0px;
        margin: 0px 8px 0px 8px;
    }
    
        #slotMachineMulti{
            zoom : 1;
        }
                
        .slotWrapTop, .slotWrapBottom{
            zoom:1.25;
        }
}