*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0 auto;
    padding: 0;  
    font-family: 'verdana', sans-serif;
}
 


a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
  color: #22ccfb;
}

a:hover {
color: #000000;
}

body {  
padding: 0;
background: #f3f3f3;
}


h1, h2, h3, h4, h5, h6 { 
font-weight: 400;
font-style: normal;
letter-spacing: 0.5px;
margin: 0;
padding: 0; 
 
}

h1 a:hover {
color: #ffffff;
}

h2 a:hover { color: #f2168b; }
h2 { font-size: 8vh; margin-bottom: 1rem; } /* Adjust as needed */
h2 a:hover { color: #f2168b; }

#loadingSpinner {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

#loadingSpinner img {
width: 100vw;
height: 100vh;
object-fit: cover;
}


#bg-overlay { 
}

#wrapper {   
  margin: 0 auto 3%;  
  min-width: 350px;   
  padding: 1% 2% 0;
}


#system-messages {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 0;
}

#loading,
#typing-message,
#error-message {
text-align: center;
 font-size: clamp(9px, 1vw, 1rem);
color: #ffffff;
background-color: #e42d6a; /* Different colors to distinguish */
padding: 0.5% 5rem;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: scale(1.1);
width: 96%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: auto; /* Ensure height is auto */
margin-top: 0;
}

#loading.hidden,
#typing-message.hidden,
#error-message.hidden {
display: none; /* Hide the element completely */
}

#header {
width: 100%;  
  margin: 2% 0 0 0; 
  background: transparent;

}

#login-info { 
  width: 100%; 
  margin: 0% 0 2% 0%;
  padding: 2%;  
  color: #22ccfb;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  float: left; 
  border-radius: 12px;
  background: #53a9dd;
}

#login-info:hover {  
}

#user-stuff { 

  display: flex;
  flex-direction: row;
  align-items: center; 
  width: 100%;  
  
}

#panelid1 {
 display: flex;
  flex-direction: row;
    align-items: top;  
      width: 80%;  
}


#connect-wallet {  
    width: 18%; 
   margin: 0% 3% 0% 0; 
   display: flex;
  flex-direction: row;
    align-items: center; 
}

#connect-wallet #userPfp {
     width: 100%; 
  border-radius: 5px;

} 

#userPfp[src="placeholder.png"] { 
  opacity: 1;
  
}


#userInfo {  
  text-align: left;
  width: 60%;   
    font-size: clamp(0.3rem, 1vw, 1rem); 

}

#userInfo span {
  font-weight: bold;
}

#userInfo p#walletAddress { 
  margin: 0 0 0;
}
#userInfo p#username { 
  margin: 0 0 1%;
}
#userInfo p#userstats { 
  margin: 0 0 0;
}

#userInfo p span {  
}


#walletAddress {
  font-size: clamp(0.5rem, 1.8vw, 1.6rem);
  font-weight: bold; 
  text-align: left; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  color: #22f6fb;
  margin: 0 0 2% 0; 
}

#username {
  font-size: clamp(5px, 4.5vw, 35px); 
margin: 0 0 0 0;
padding: 0 0 0 0; 
font-weight: bold;
color: #f8f8f8;   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     max-width:99%;
}

#userFtName {
}


#userStats {
    font-size: clamp(10px, 2.5vw, 25px); 
}

#userStats-wins {
    color: #19e785; 
}
#userStats-losses {
  color: #ec0e68; 
}

#userWins {
}
#userLosses {
}

.userPoints { 
  margin-top: 1%;
  color: white;
  font-size: clamp(8px, 1.2vw, 18px); 
}


#panelid2 {  
    width: 20%;  
  display: flex;
  flex-direction: column;
  align-content: center;  
}


#wallet-wrapper {     
text-align: center; 
    flex-direction: column;
  align-content: center;

}


#connectButton { 
     font-size: clamp(7px, 2vw, 20px); 
  text-align: center; 
  margin: 0 auto;
  font-family: "Orbitron", sans-serif;
  padding: 5% 0%;  
  text-transform: uppercase;
  color: #fff;
  background-color: #e82b8e;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease; 
  width: 90%;
}

#connectButton:hover {
  background-color: #39b9ff;
  transform: scale(1.05);
}


  #search-input {
            width: 100%;
            padding: 1% 2%; 
            background: rgb(255 255 255);
            color: #1acbde; 
            transition: all 0.3s ease;
            outline: none;
    border: 0;
font-size: clamp(0.625rem, calc(0.5rem + 0.75vw), 1rem);
	border-bottom: 1px solid cyan;
	box-shadow: 0 1px 10px 1px aqua;
  margin: 0.3vw 0 0; 
    border-radius: 12px; 
         }

        #search-input::placeholder {
            color: #7b8685;
            opacity: 0.7;
        }

        #search-input:focus {
            	border-bottom: 1px solid cyan;
            box-shadow: 0 0 10px rgb(255 255 255), 0 0 10px rgb(255 255 255 / 70%), inset 0 0 10px rgba(0, 255, 255, 0.7);
        }

        #search-input:focus::placeholder {
            opacity: 0.4;
        }

        /* Extra effects on input interaction */
        #search-input:focus + .glow-effect {
            animation: glow-pulse 1.5s infinite;
        }

        @keyframes glow-pulse {
            0% {
                box-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.7);
            }
            50% {
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.5);
            }
            100% {
                box-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.7);
            }
        }


#club-ad { 
          color: #6b6b6b; 
            font-size: clamp(0.3rem, 0.8vw, 0.87rem);
          margin: 0.2% auto 2% auto;  
          padding: 0.2%;
  text-align: center;
         }
#club-ad a {color: #26b4e7; font-weight: bold; }
#club-ad a:hover {color: #f2168b; font-weight: bold; }

.mini {font-size: 0.8vw;}
.mini a {color: #26b4e7; font-weight: bold; }
.mini a:hover {color: #f2168b; font-weight: bold;}















#matches-container {
  font-family: orbitron;
background: rgb(251 46 122 / 90%);
display: none;
position: relative;    
overflow-y: scroll; 
width: 100%;
  heigh: 90vw;
transition: all 0.3s ease-in-out;
animation: slideDown 0.5s ease-in-out;
margin: 0% 0 0 0; 
z-index: 11;
color: white;
    font-size: clamp(0.6rem, 1vw, 0.9rem);
padding: 0;
  float: left;
  display: inline-block;
white-space: nowrap; 
text-overflow: ellipsis;
}
#matches-container::-webkit-scrollbar {
display: none;
}
#matches-container {
scrollbar-width: none;
}
.match-item {
padding: 0.5% 4%;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.match-item:last-child {
border-bottom: none;
}
.match-item:hover {
background-color: #39b9ff;
}

 







#user-card { 
margin:0 0 5vw 0;    
position: relative;
}
 

.card {   
padding: 0; 
padding: 0;
margin:0;   
}

.card-side {     
}


.card-front {  
}

.card-back {     
}
.card-back::-webkit-scrollbar { 
}

.card.flipped .card-front { 

}

.card.flipped .card-back { 
}

#user-details {
display: flex; 
flex-direction: row;
align-items: top;
margin: 1.2% 0 0 0; 
padding: 0; 
}

#user-info {
marging:0; padding:0; 

}






.details1 {  
  right:0; 
  z-index: 1000;  
  width: 49%; 
margin: 0 0 0 0;
padding: 2% 1%; 
display: flex;  
  flex-direction: row;
  color: #22ccfb;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.3s ease; 
  background: white;
    border-radius: 12px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.details1 p {margin: 0; padding: 0;}
.details1 button {margin: 0; padding: 0;}

.details2 {  
background: #fdfdfd;  
 width: 49%;
margin:0 0 0 2%;
padding:0;   
background: rgb(255 255 255);
border-radius: 12px;
  border: 1px solid #cecece;
}


/* Icons */
#main-icons { 
  margin: 0;
  padding: 2%;
  display: flex; 
  flex-direction: column;
  font-size: clamp(0.9rem, 2vw, 1.5rem);
  background: white;
  border-radius: 12px;
}

#main-icons ul {
  list-style-type: none;
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1%; 
  margin: 0;
  padding: 0;
}

#main-icons li { 
  text-align: left;  
  margin: 1% 0; 
  padding: 1%;  
  width: calc(33.33% - 2%); /* Adjust for 3 columns */
  background: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;

}
#main-icons li span { display: block; padding: 2%; }

#main-icons .label {
  display: block;
    font-size: clamp(5px, 0.9vw, 16px);
  color: #666;
  margin-bottom: 2px;
    word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #22ccfb;
     width: 50%;
  padding:0;
}

#main-icons p {
  margin: 0;
  padding: 2% 4%;
    font-size: clamp(5px, 0.9vw, 16px);
  color: #333;      
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
   padding:0;
}



#profile-image { 
width: 100%; 
margin:  0 0 0 0;  
  border-radius: 50%;
}

#user-score { 
width: 100%; 
margin:  0 0 0 0; 
background: #22ccfb;
color: white;  
font-size: clamp(5px, 1.3vw, 0.8rem); 
text-align: center;
padding: 6% 0;
}




#score-text {padding:0; margin:0;}
#score-number {
padding:0; margin:0; 
font-size: clamp(5px, 1.5vw, 2rem); 
}

.details-top {   
margin: 0 1% 0 0;
width: 25%;
}


.details-bottom {   
margin: 0 0 0 0;   
padding: 0 0 0 2%;
width: 75%;   
}



@keyframes pulse-color {
  0%, 100% {
    background-color: #f2d329;
    box-shadow: 0 0 5px #f2d329, 0 0 10px #f2d329, 0 0 15px #f2d329;
  }
  50% {
    background-color: #e0c420;
    box-shadow: 0 0 10px #e0c420, 0 0 20px #e0c420, 0 0 30px #e0c420;
  }
}





#address {
  font-size: clamp(0.3rem, 1vw, 1rem);
  font-weight: bold; 
  text-align: left; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
  color: #22f6fb;
  margin: 0 0 0 0; 
}

#search-username {
  font-size: clamp(5px, 1.5vw, 20px); 
margin: 0 0 1% 0;
padding: 0 0 0 0; 
font-weight: bold;
color: #b2b2b2;   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     max-width:99%; 
}




 





#copy-address { 
display: none; 
}
#copy-address:hover { 
}

.twitter-name {
font-size: clamp(5px, 1.5vw, 14px); 
font-weight: bold;
color: #515151;  
}  

#twitter-bio {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 4%;
    margin: -2% 0 2% 0;
    font-size: clamp(0.325rem, calc(0.25rem + 0.55vw), 0.9rem);
    color: #9e9e9e;
    display: block;
    min-height: 9em; /* Adjust the max-height as needed */
    max-height: 8em; /* Adjust the max-height as needed */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: pre-wrap; /* Ensures whitespace and line breaks are respected */

}

button.toggle-button  {
    font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-weight: bold; 
  margin: 0;
  padding: 2% 4%; 
  background-color: #f2d329;
  color: #2b2b2b;
  border: none;
  cursor: pointer;  
  z-index: 3;  
  border-radius: 5px;  
  text-align: center; 
font-size: clamp(0.325rem, calc(0.3rem + 0.55vw), 0.9rem); 
    display: block;
  width: 100%;
}

.toggle-button:hover {
  animation: none;
  color: white;
  background-color: #26b4e7;
  box-shadow: 0 0 10px #39b9ff, 0 0 20px #22ccfb, 0 0 30px #39b9ff;
 animation: pulse-color 2s infinite; 
}






footer {  
color: #8d8d8d;
text-align: center;
margin: 0 auto;
padding: 1rem 2rem;
width: 100%;   
bottom: 0;
border-top: 1px solid #444;
font-size: 1.2vh; 
z-index: 1000; 
}
footer p {
margin: 0; 
}

@keyframes fadeInOut {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

 
.message {
visibility: hidden;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 10px;
margin-top: 10px;
text-align: center;
z-index: 10;
}

#data-console {

padding: 0;  
display: flex;
flex-direction: column; /* Make it column direction to stack rows */
gap: 1rem; /* Add space between rows */
margin: 1.5vh auto 0;
width: 100%;
}



#info-lists {
display: flex;
justify-content: space-between; /* Space out the elements */
flex-wrap: wrap; /* Allow wrapping if necessary */
margin: 0; 
}

#info-lists dl {
  color: #484444;
flex: 1;
margin: 0 1% 0 0; 
padding: 1%; 
overflow-y: scroll; 
height: 20vw;   
background:white;
border: 1px solid #cecece;
border-radius: 12px;
}

/* Hide the scrollbar for WebKit browsers (Chrome, Safari) */
#info-lists dl::-webkit-scrollbar {
width: 0;
height: 0;
}




#data-console dt {
font-weight: bold;
margin: 0 0 0.5vw 0;
font-size: clamp(12px, 2vw, 28px);
border-bottom: 0.3vw solid #20dbff;
font-family: orbitron;
  color: #7a7e7f;
}

#data-console dd {
margin: 0;
padding: 0;

}

#data-console dd div {
margin: 1% 2% 1% 1%;
  font-size: clamp(5px, 0.9vw, 16px);

border-left: 0.5vw solid #22ccfb;
transition: background 0.3s ease, transform 0.3s ease;
 border-bottom: 1px solid #cecece;
padding: 0.1vw 0.2vw 0.2vw 0.2vw;
    

}

#data-console dl.last {margin-right:0;}



#data-console dd div:hover a { 
  color: black;
}

#data-console .empty-message {
font-size: 2vh;
color: #9a9a9a;
text-align: center;
margin: 20px 0;
}


#extra-panels {
display: flex;
flex-direction: row;
  gap: 2%;
}



#recent-messages-section { 
padding: 1%; 
margin: 0 0vh; 

width: 49%;
    background:white;
  color: #484444;
   border-radius: 12px; 
border: 1px solid #cecece;

}
 
 #recent-messages-section dd::-webkit-scrollbar {
width: 0px;
height: 0px;

}

/* Hide the scrollbar for other browsers using CSS */
#info-lists dd, #recent-messages-section dd {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
  
}


#recent-messages-section dl {
margin: 0; 
padding: 0;
 border-radius: 12px; 
}

#recent-messages-section dd {
height: 25vw;
  overflow-y:auto; 
background:white;
}

#data-console dd div.message-item {
    margin:0;
    border: 0;
 
  
}
 

#data-console dd div.message-header

 {
    font-weight: bold;
    margin-bottom: 5px;
border: 0;
}

#data-console dd div.message-content {
    white-space: pre-wrap;
    word-break: break-word;
  padding: 1%;
}
 


#trade-activity {
width: 49%;
text-align: left; 
    background:white;
  color: #484444;
   border-radius: 12px; 
border: 1px solid #cecece; 
 ;
}

#trade-activity dt { 
margin: 1vw;   
}

#trade-activity dd div {
  font-size: clamp(5px, 0.9vw, 16px);
}

 

dd#activity-list  {
height: 25vw;
  overflow-y:auto; 
  
}
/* Hide the scrollbar for WebKit browsers (Chrome, Safari) */
dd#activity-list::-webkit-scrollbar {
width: 0;
height: 0;
}


dd#activity-list     { 
  margin: 1vw;
}

#activity-list div a {
color: #22ccfb;
}

#activity-list div:hover a {
color: black;
}

#activity-list div.buy {
border-left-color: #22ccfb;
}

#activity-list div.sell {
border-left-color: red;
}

#activity-list div.club:before {
content: '\f549';
font-family: 'Font Awesome 5 Free'; 
font-weight: 900;
margin-right: 1%;
}

#activity-list div.personal:before {
content: '\f007';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 1%;
} 

























/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the icon */
left: 50%;
margin-left: -60px; /* Center the tooltip */
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
z-index: 1000000;
}

/* Show the tooltip text when hovering over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
font-size: 1vw;
z-index: 1000000;
} 

#button-container { 
align-items: center;
margin: 0 0 0 5%; 
display: flex;
  flex-direction: row;
  width: 98%;
  margin: 0 auto 1em;
}

#informative,
#gameplay {
display: flex;
  flex-direction: row;
justify-content: center;

margin: 0 1% 2% 0%;
  width: 100%;
}

#gameplay button {   

}


#informative button,
#gameplay button {
padding: 2% 3%;      
transition: background 0.3s ease, transform 0.3s ease;  
font-weight: bold; /* Replace <weight> with an actual value */
width: 49%;  
     align-items: center;
  appearance: none;
  background-color: #FCFCFD;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  display: inline-flex;  
  justify-content: center; 
  list-style: none;
  overflow: hidden; 
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
    font-size: clamp(10px, 2.5vw, 22px); 
      
   
  color: #fff;  
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
    font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(45deg, #e81068 20%, #f11b72 5%);
  border: 0;
  color: #fff; 
  box-shadow: 6px 0px 0px #60a9ff;
  margin: 0 5% 0 0;
   
} 

#informative button:after,
#gameplay button:after{  
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'ALTERNATE TEXT';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, white 100%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}


#informative button:hover,
#gameplay button:hover {
    box-shadow: 0 0 10px rgb(91 223 244 / 70%), 0 0 20px rgb(255 255 255 / 70%), 0 0 30px rgb(250 250 250 / 70%);
    background: linear-gradient(45deg, #c44b4b 3%, #00E6F6 3%, #00E6F6 5%, #40dad8 5%);
}

#informative button:hover:after,
#gameplay button:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(4, end);
}
 

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

 

 
.toggle-back-button {
background-color: #f2168b;
}
 
 

button#find-adversary-button { 
}
button#find-adversary-button:hover { 
}

button#toggle-back-button { 
   margin: 0 0 0 0;
}

button#toggle-back-button:hover { 
}


@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

.flip-button {
  margin: 0% 2% 0% 2%;
padding: 1% 4%;
background-color: #22ccfb;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
font-size: clamp(5px, 1vw, 14px);
z-index: 3; 
  float: right;
border-radius: 5px;
font-weight: 400;
font-style: normal;
  width: 96%;
} 

.flip-button:hover {
transform: scale(1.05);
background-color: #39b9ff;
}
#skills-explanation-panel,
#combat-explanation-panel,
#pve-explanation-panel,
#pvp-explanation-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: 20px;
width: 80%;
max-width: 500px;
}

#skills-explanation-panel .panel-content,
#combat-explanation-panel .panel-content,
#pve-explanation-panel .panel-content,
#pvp-explanation-panel .panel-content {
display: flex;
flex-direction: column;
align-items: center;
}

#skills-explanation-panel h2,
#combat-explanation-panel h2,
#pve-explanation-panel h2,
#pvp-explanation-panel h2 {
margin-bottom: 10px;
}

#skills-explanation-panel p,
#combat-explanation-panel p,
#pve-explanation-panel p,
#pvp-explanation-panel p {
margin: 5px 0;
text-align: left;
width: 100%;
}

#close-panel-button,
#close-combat-panel-button,
#close-pve-panel-button,
#close-pvp-panel-button {
margin-top: 10px;
padding: 10px;
background-color: #22ccfb;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}

#close-panel-button:hover,
#close-combat-panel-button:hover,
#close-pve-panel-button:hover,
#close-pvp-panel-button:hover {
background-color: #1b9dd4;
}

#close-panel-button:active,
#close-combat-panel-button:active,
#close-pve-panel-button:active,
#close-pvp-panel-button:active {
background-color: #187b9e;
}

#button-container.hidden {
display: none;
}

#pokemon-card-container {
margin: 0;
padding:0;
position: relative; 
}

#pokemon-card-container .pokemon-card {
    border: 2px solid rgb(251 34 120 / 90%);
    border-radius: 6px;
    background-color: rgb(37 37 37 / 90%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 29%;
    padding: 1%;
    float: left;
    color: #20dbff;
    box-shadow: 0 0 5px rgb(121 220 255 / 70%), 0 0 5px #39b9ff, 0 0 5px rgb(52 213 229 / 70%);
    transition: all 0.3s ease;
    position: relative;
}

#pokemon-card-container .pokemon-card::before {
    content: "";
    display: block;
    padding-top: 150%;  
}

#pokemon-card-container .pokemon-card > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
}

#adversary-card {
    border: 2px solid rgb(251 34 120 / 90%);
    border-radius: 6px;
    background-color: rgb(37 37 37 / 90%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 29%;
    padding: 1%;
    float: right;
    color: #20dbff;
    box-shadow: 0 0 5px rgb(121 220 255 / 70%), 0 0 5px #39b9ff, 0 0 5px rgb(52 213 229 / 70%);
    transition: all 0.3s ease;
    position: relative;
}

#adversary-card::before {
    content: "";
    display: block;
    padding-top: 150%; 
}

#adversary-card > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
}

.pokemon-card-header {
display: flex;
flex-direction: column;
align-items: center;
}

#pokemon-username, #adversary-username {
font-size: clamp(9px, 2vw, 28px);
font-family: "orbitron", sans-serif;
font-optical-sizing: auto;
font-weight: bold;
font-style: normal;
width: 100%;
text-align: center;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; 
  color: #f21286;

  font-family: Arial Black, sans-serif; 
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(45deg, #ff00e0, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(255, 0, 224, 0.5),
               0 0 40px rgba(0, 255, 255, 0.5);
  animation: hue-rotate 4s linear infinite; 
  z-index: 10;
  padding: 1% 2% ;
  letter-spacing: -1px;
}

#userui {   
}

#pfp { 
  position: absolute;
width: 100%;
height: 100%;  
object-fit: contain; 
object-position: top;
} 

#pokemon-profile-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border-radius: 5px; 
object-fit: cover; 
object-position: top;
      transition: all 0.3s ease;
}

#adversary-profile-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border-radius: 5px; 
object-fit: cover; 
object-position: top;
      transition: all 0.3s ease; 
}


#combat-buttons {    
  width: 100%;
  position: absolute;
  bottom: 1%; 
margin-left: 3%;
  display: flex;
flex-direction: column;
     align-content: center;
   flex-direction: middle;  
}

#combat-actions {  
  width: 100%; 
}

#combat-actions button {
 text-align: center;
	display: flex;
   align-content: center;
   flex-direction: middle;
    background-color: #22ccfb;
     color: white; 
	border-radius: 0.2rem;
    box-shadow: 0 .1vw #6a6a6a; 
    cursor: pointer;
    font-size: clamp(5px, 1.5vw, 14px);
  	width: 28%;  
  border: 0;
  display: block;
  float: left; 
padding: 1%;
margin: 1% 3% 1% 1%;  
}


#adversary-combat-actions button { 
  font-size: clamp(6px, 1.5vw, 14px);
	 
	text-align: center;
	display: inline-block;
	width: 10%; 
  height: 10%;
		border-radius: 50%; 
	box-shadow:  0 0 #303030;
	color: white;
	margin: 3% 6% 1% 0;
	background-color: #f2168b;
  	cursor: pointer;
    border: 0;
display: block;
  float: left;
}


#adversary-combat-actions span.text {
      
    font-size: clamp(5px, 1.5vw, 28px);
}



#adversary-combat-actions button:active, #combat-actions button:active {
	box-shadow: none;
	position: relative;
	top: .2em;
}


#combat-actions button:hover,
#adversary-combat-actions button:hover {
    background: #3ae2f5;
}

#combat-actions button:active,
#adversary-combat-actions button:active {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    background: $3ae2f5;
}

/* Tooltip styles */
.tooltip2 {
    position: absolute;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    white-space: nowrap;
    top: 35px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
}

button {
    position: relative;
}

button .tooltip2 {
    display: none;
}

button.show-tooltip2 .tooltip2 {
    display: block;
    opacity: 1;
} 

.pokemon-card-body span {  
padding: 0;
margin: 0;
}

.stat-container {
  margin: 75% 2% 82% 2%;
  padding:0; 
}

#adversary-card .stat-container {
    margin: 105% 2% 82% 2%;
    padding: 0;
}


/** Adversary stats hidden by default (will be displayed with inspect) **/
#adversary-card .stat-bar {
    display: none;
}
#adversary-card .hp-bar {
    display: flex;
    margin-top: 0;
}
#adversary-card .stat-container {
    margin: 105% 2% 82% 2%;
    padding: 0;
}

/** End of Adversary stats hidden by default **/


.stat-bar { 
  width: 94%;
  margin: 0 0 0 0; 
  display: flex;
  gap: 0; 
opacity: 80%; 
}

.stat-icon, .hp-icon  { 
    min-width: 12%;  
    color: #26b4e7; 
   font-size: clamp(4px, 1.2vw, 14px);
      text-shadow: 1px 1px 1px rgb(0 0 0);  
    padding: 0.5% 3% 0.5% 2%;
}

.stat-bar-inner {   
    border-radius: 5; 
     color: #fff; /* White text color */ 
font-size: clamp(4px, 1.2vw, 14px);
    transition: width 0.3s ease, background-color 0.3s ease;
    padding: 0.2% 3% 0.5% 2%;
}

.hp-icon { 
       color: #fa157a;   
}

/* Different tones of blue for stat bars */
#pokemon-attack-bar-inner, #adversary-attack-bar-inner {
    background-color: #6db2ff;
}
#pokemon-defense-bar-inner, #adversary-defense-bar-inner {
    background-color: #4a94ff;
}
#pokemon-speed-bar-inner, #adversary-speed-bar-inner {
    background-color: #357ae8;
}
#pokemon-special-attack-bar-inner, #adversary-special-attack-bar-inner {
    background-color: #2365c8;
}
#pokemon-special-defense-bar-inner, #adversary-special-defense-bar-inner {
    background-color: #1149a7;
}

/* Specific HP bar styles for different levels */
.hp-bar-inner.low, .stat-bar-inner.low {
    background-color: #dc3545;
}

.hp-bar-inner.medium, .stat-bar-inner.medium {
    background-color: #ffc107;
}

.hp-bar-inner.high, .stat-bar-inner.high {
    background-color: #df23ec;
}
 

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#combat-log {
    padding: 0%;
    border-radius: 5px;
    overflow-y: auto; /* Make vertical overflow scrollable */
    overflow-x: hidden; /* Hide horizontal overflow */
    margin-top: 0%;
    width: 40%;
    font-size: clamp(6px, 1vw, 28px);
    font-family: 'Orbitron', sans-serif;
    scroll-behavior: smooth;
    float: left;
    margin-left: 1.5%;
    text-align: center; 
max-height: clamp(10rem, 40vw, 25rem);
    
}

#combat-log::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px; /* Adjust height as needed */
    background: linear-gradient(to bottom, rgba(20, 20, 20, 1), rgba(20, 20, 20, 0));
    z-index: 1;
    pointer-events: none; /* Allows clicks through the gradient */
}

#combat-log::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; 
    background: linear-gradient(to top, rgba(20, 20, 20, 1), rgba(20, 20, 20, 0));
    z-index: 1;
    pointer-events: none; /* Allows clicks through the gradient */
}

#combat-log::-webkit-scrollbar {
    width: 10px;
}

#combat-log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); 
    border-radius: 5px;
}

#combat-log::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5); 
}


#combat-log div {
    animation: fadeIn 1s ease-in-out;
}

#combat-log .log-entry {
    margin: 4% 2%;
    margin-bottom: 0.5%;
    padding: 1% 1.5% 1.5% 1%;
    border-radius: 5px;
    animation: fadeIn 1s ease-in-out;
    background: rgba(0, 0, 0, 1); /* Increase entry background opacity */
     
    
}

#combat-log .log-entry.chatbot {
    background-color: rgba(33, 33, 33, 0.85);
    color: #ffffff;
    font-size: clamp(10px, 1.5vw, 22px);
    font-family: 'Roboto', sans-serif;
    position: fixed;
    top: -20px; /* Initial position outside the screen */
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    animation: slideInBounce 1s forwards, stayAndBounce 8s 1s forwards, slideOut 1s 10s forwards; /* Adjusted timings */
}

@keyframes slideInBounce {
    0% {
        top: -50px;
        opacity: 0;
    }
    60% {
        top: 30px;
        opacity: 1;
    }
    80% {
        top: 20px;
    }
    100% {
        top: 25px;
    }
}

 

@keyframes slideOut {
    0% {
        top: 25px;
        opacity: 1;
    }
    100% {
        top: -50px;
        opacity: 0;
    }
}
 

#combat-log .log-entry.user {
    background-color: rgba(33, 33, 33, 0.85);
    color: #00ffae;
    box-shadow: 0 0 10px rgba(0, 255, 174, 0.9), 0 0 20px rgba(0, 255, 174, 0.9);
}

#combat-log .log-entry.adversary {
    background-color: rgba(70, 20, 20, 0.85);
    color: #ff417f;
    box-shadow: 0 0 10px rgba(255, 65, 127, 0.9), 0 0 20px rgba(255, 65, 127, 0.9);
}

#combat-log .log-entry.system {
    background-color: rgba(29, 29, 76, 0.85);
    color: #22ccfb;
    box-shadow: 0 0 10px rgba(30, 194, 213, 0.9), 0 0 20px rgba(0, 97, 255, 0.9);
}

#combat-log .log-entry span.icon {
    margin-right: 1%;
    vertical-align: middle;
    color: inherit;
}

#combat-log .log-entry.user span.icon {
    color: #00ffae;
}

#combat-log .log-entry.adversary span.icon {
    color: #ff417f;
}

#combat-log .log-entry.system span.icon {
    color: #22ccfb;
}

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



.hidden {
display: none;
}

 
 
 

  

@keyframes disappear {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(100vh); }
}

@keyframes appearParabolic {
  0% { opacity: 0; transform: translateX(100vw) translateY(0); }
  50% { opacity: 1; transform: translateX(0) translateY(-50px); }
  100% { transform: translateX(0) translateY(0); }
}

.adversary-shake {
  animation: shake 0.5s ease;
}

.adversary-disappear {
  animation: disappear 1s ease forwards;
}

.adversary-appear {
  animation: appearParabolic 1s ease forwards;
}

 
/* Debuff button active state */
button.debuff-active {
  background-color: red !important;
  animation: debuff-activate 0.5s ease-out;
  box-shadow: 0 0 10px red;
}

/* Glow effect for the adversary profile image */
#adversary-profile-image.debuff-active {
  animation: debuff-activate 0.5s ease-out;
  box-shadow: 0 0 10px red;
}

@keyframes debuff-activate {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0px red;
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px red;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px red;
  }
}


/* Taunt Dialog Box */
.taunt-dialog {
    position: absolute;
    top: 0px;
left:0;
    margin-left: 25%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: fadeUp 2.5s ease-in-out forwards;
    font-family: "Bangers", cursive, sans-serif;
    font-size: 2vw;
    white-space: nowrap;
    z-index: 1000;
  width: 42%;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -30px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -60px);
    }
}

/**Combat animations**/
/* Add these styles to your existing CSS */

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

@keyframes pullBack {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}

@keyframes fastAttack {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(50px); }
}

@keyframes enemyShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(10px); }
    40%, 80% { transform: translateX(-10px); }
}

.shake {
    animation: shake 1s ease;
}

.pull-back {
    animation: pullBack 0.3s ease forwards;
}

.fast-attack {
    animation: fastAttack 0.2s ease forwards;
}

.enemy-shake {
    animation: enemyShake 0.5s ease;
}

@keyframes specialAttackUser {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    10% {
        transform: translateX(-50px) rotate(0deg); /* Initial impulse */
    }
    30% {
        transform: translate(200px, -100px) rotate(180deg); /* Jumping in a parabolic curve */
    }
    50% {
        transform: translate(200px, -100px) rotate(360deg); /* Completing the spin */
    }
    70% {
        transform: translate(200px, 0) rotate(360deg); /* Charging forward */
    }
    100% {
        transform: translateX(0) rotate(360deg); /* Returning to original position */
    }
}

@keyframes specialAttackAdversary {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    10% {
        transform: translateX(50px) rotate(0deg); /* Initial impulse */
    }
    30% {
        transform: translate(-200px, -100px) rotate(180deg); /* Jumping in a parabolic curve */
    }
    50% {
        transform: translate(-200px, -100px) rotate(360deg); /* Completing the spin */
    }
    70% {
        transform: translate(-200px, 0) rotate(360deg); /* Charging forward */
    }
    100% {
        transform: translateX(0) rotate(360deg); /* Returning to original position */
    }
}

.special-attack-user {
    animation: specialAttackUser 1.5s ease-in-out forwards;
}

.special-attack-adversary {
    animation: specialAttackAdversary 1.5s ease-in-out forwards;
}

 

/* Stun button active state */
button#stun-button.debuff-active {
  background-color: yellow !important;
  animation: stun-activate 0.5s ease-out;
  box-shadow: 0 0 10px yellow;
}

/* Glow effect for the adversary profile image when stunned */
#adversary-profile-image.stun-active {
  animation: stun-activate 0.5s ease-out, stunEffect 1s infinite;
  box-shadow: 0 0 10px yellow;
}

@keyframes stun-activate {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0px yellow;
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px yellow;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px yellow;
  }
}

@keyframes stunEffect {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#combat-log .log-entry.system.combat-start {
    font-weight: bold;
  font-size: 120%;
    color: #20dbff;
    background-color: transparent;
  box-shadow: none; 
}

#combat-log .log-entry.system.combat-start .icon {
  display: none;
 }

 
/** Inspect animation **/ 
@keyframes inspectEffect {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px yellow;
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 20px yellow;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px yellow;
    }
}

.inspect-animation {
    animation: inspectEffect 1.5s ease-out;
}








/* Steal button active state */
button#steal-button.debuff-active {
  background-color: green !important;
  animation: steal-activate 0.5s ease-out;
  box-shadow: 0 0 10px green;
}

/* Steal animation */
@keyframes stealMove {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

@keyframes stealShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.steal-animation {
  animation: stealMove 1s ease-in-out, stealShake 1s ease-in-out 1s;
}

/* Inspect animation */
@keyframes inspectEnlarge {
  0% { transform: scale(1); box-shadow: 0 0 0px #26b4e7; }
  50% { transform: scale(1.2); box-shadow: 0 0 20px #26b4e7; }
  100% { transform: scale(1); box-shadow: 0 0 0px #26b4e7; }
}

.inspect-animation {
  animation: inspectEnlarge 1s ease-out;
}

/* Disabled state */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



@media (min-width: 1300px) {
  #wrapper {
    /* Add your styles here */
    width: 1300px;   
  min-width: 350px;   
  padding: 1% 2% 0;
  }
}



 

/* Compact header styles */

.compact-header { 
      margin: 0 0 0 0;
    padding: 0;

}

.compact-header #login-info,
.compact-header #user-stuff,
.compact-header #panelid1,
.compact-header #panelid2,
.compact-header #wallet-wrapper,
.compact-header #connect-wallet,
.compact-header #userPfp,
.compact-header #userInfo,
.compact-header #walletAddress,
.compact-header #username,
.compact-header #userStats,
.compact-header #userWins,
.compact-header #userLosses,
.compact-header #search-input,
.compact-header #club-ad,
.compact-header #header { 
    transition: all 1s ease-in-out; /* Smooth transition */
    padding: 0;
    margin: 0; 
}

.compact-header #login-info { 
    display: flex; 
    width: 100Vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
align-items: center;
justify-content: center;    
  margin: -3% 0 2% 0;
border-radius: 0;
  padding: 1% 0%;
}


.compact-header #user-stuff { 
}

.compact-header #panelid1 { 
}

.compact-header #panelid2 { 
}

.compact-header #wallet-wrapper { 
}

.compact-header #connect-wallet {  
    width: 10%; 
   margin: 0% 3% 0% 2%; 
}

.compact-header #connect-wallet  #userPfp { 
 
}

.compact-header #userInfo { 
}

.compact-header #walletAddress {  
}

.compact-header #username {  
}

.compact-header #userStats { 
}

.compact-header #userWins { 
}

.compact-header #userLosses { 
}

.compact-header #search-input { 
  display: none;
}

.compact-header #club-ad { 
  display: none;
}

.compact-header #header { 
}
 
button#dot-button { background: grey;}
button#dot-button { background: grey;}
button#beatup-button { background: grey;}
button#heal-button { background: grey;}
button#escape-button { background: grey;}

#total-lp-platform {  
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 3%;
}

#total-lp-platform p { 
  margin: -1% 0 1% 0; 
  padding: 0.5% 1%;
  font-size: clamp(0.4rem, 0.9vw, 0.97rem);
  background: #22ccfb;
  color: white;
  flex: 1;
  text-align: center;
  border-radius: 3px;
}


.weapon-selection-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2%;
  border: 1px solid black;
  z-index: 1000;
  text-align: center;
  width: 35%;
    font-family: 'Orbitron', sans-serif;
      font-size: clamp(10px, 1vw, 16px);
}

.weapon-selection-dialog button 
{ 
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin: 2.5% auto;
  padding: 1%;
  width: 80%; 
      font-size: clamp(8px, 0.8vw, 12px);
}

.grid-cell.active {
  background-color: rgba(0, 0, 255, 0.3); /* Change to blue */
  transition: background-color 0.1s; /* Add a quick transition for smoother appearance */
}




.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #39b9ff;
padding: 10px;
border-radius: 10px;
z-index: 1000;
text-align: center;
color: white;
}

.popup-content {
background-color: #fcfcfc;
padding: 20px;
border-radius: 5px;
  color: #333;
  
}

.popup-content h3 {
  font-weight: bold;
    font-family: 'Orbitron', sans-serif;
}

.popup-content #combat-result { 

}

.popup button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
  background: #22ccfb;
  color: white;
  border: 0;
  border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
}

.popup button:hover {
background: #f2168b;
}

#combat-loot  { 
  margin: 5% 0;
display: flex;
  flex-direction: row;
}

#combat-loot img { 
  border-radius: 5px;
  width: 45%;
  vertical-align: middle;
}