* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: initial;
}

.container {
  max-width: 1200px;
}

.header {
  display: inline-block;
  padding: 15px;
  width: 100%;
}
.header .logo {
  float: left;
  font-size: 27px;
  letter-spacing: 10px;
  font-weight: 600;
  color: #3f51b5;
}
.header .menu {
  float: right;
}
.header .menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.header .menu ul li.register {
  padding: 10px 20px;
  background: #e3ce10;
  color: #272727;
  border-radius: 2px;
  margin-right: 20px;
  cursor: pointer;
}
.btns{
margin: auto;margin-top: 20px;
}
.btns a{
background: #31315f;padding: 10px 50px;margin: 10px;min-width: 150px;display: inline-block;
color: white;
border-bottom: 2px solid #7a7a7d;
border-radius: 5px;
text-transform: capitalize;
}
.header .menu ul li.login {
  padding: 10px 20px;
  background: #3f51b5;
  color: white;
  border-radius: 2px;
  cursor: pointer;
}
.header .menu ul li.login a {
  color: white;
}
.marquee {
  float: right;
  width: 100%;
  padding: 5px 0 0;
  overflow: hidden;
}
marquee ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}
marquee ul li {
  margin-right: 20px;
}
.alert-msg {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 2px;
}
.alert-success,
.success-msg {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.alert-info,
.info-msg {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #075985;
  border: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.alert-msg {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 3px;
}
.alert-warning,
.warning-msg {
 background: linear-gradient(135deg, #fef9c3, #fef08a);
  color: #854d0e;
   border: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.alert-danger,
.error-msg {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.stats {
  display: inline-block;
  width: 100%;
  margin-top: 50px;
}
.stats ul {
  padding: 0;
  list-style: none;
  margin: 0;
  display: flex;
  width: 100%;
}
.stats ul li {
  width: 100%;
  text-align: center;
}
.stats ul li div {
  background: #3f51b5;
  border: 1px solid #e3ce10;
  border-radius: 4px;
  color: #e3ce10;
  padding: 10px;
  margin-right: 10px;
}
.stats ul li div label {
  display: block;
  font-size: 14px;
}
.stats ul li div span {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 5px;
}

.register-form,
.login-form {
  margin: 0 auto;
  width: 350px;
  text-align: center;
}
.captcha_image {
  display: flex;
}
.captcha_image img {
  border-radius: 2px;
  display: block;
  width: 150px;
  border: 1px solid black;
  background: radial-gradient(black, transparent);
  pointer-events: none;
}
.captcha_image .rbtn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.captcha_image span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin: 15px;
  cursor: pointer;
  color: #03a9f4;
}
.support_message {
  padding-right: 5px;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
/*! Firefox */
.support_message {
  scrollbar-color: #128612 #004e00;
}

/*! Other Browser */
.support_message {
  --scrollbarBG: #e5e9ed;
  --thumbBG: #b2b9d2;
}
.support_message::-webkit-scrollbar {
  width: 5px;
}
.support_message {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.support_message::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
.support_message::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
}

.message_wrap {
  display: inline-block;
  width: 100%;
}
.user_message {
  float: left;
}
.admin_message {
  float: right;
}
.user_message .um_header,
.admin_message .um_header {
  font-size: 16px;
  margin-bottom: 5px;
}
.user_message .message {
  background: #fbbebe;
  padding: 12px;
  border-radius: 3px;
  width: 100%;
  white-space: pre-wrap;
  color: #252746;
}
.admin_message .message {
  background: #d1fdc5;
  padding: 12px;
  border-radius: 3px;
  width: 100%;
  white-space: pre-wrap;
  color: #252746;
}


.captchadesign{
  margin: auto;background: #ca0a37;padding: 10px;display: inline-block;width: 100%;
}
.captchaimg{
 width: 70%;float: left;
 text-align: right;
}
.captchaimg img{
  margin: auto;height: 50px;border-radius: 5px;
}
.cpatchareset{
  margin: auto;float: right;width:30%;text-align: left;
  line-height: 30px;
  padding: 10px;cursor: pointer;
}
.captchain{
  margin: auto;background: #ca0a37;padding: 10px;
}
.captchain h2{
  margin: auto;font-size: 14px;padding-bottom: 5px;
  color: white;
}
.captchain input{
  margin: auto;height: 30px;width: 80%;
  background: #f2f2f2;
  border: 1px solid #b20a31;
}
.logincap{
  margin: auto;text-align: center !important;background: #e9e9e9;width: 78%;
 border-radius: 5px;
  margin-top: 5px;
}
.logincap h3{
  margin: auto;font-size: 14px;background: #a09f9f;
  padding: 10px;
  color: white;
}
.bans{
margin: auto;padding: 20px;background: #11131733;
border-radius: 5px;
margin: 5px;
}

.coinget{
margin: auto;padding: 30px 0px;background: white;
}
.coinget img{
margin: 10px;height: 45px;
}

.coinget h1{
margin: auto;font-size: 25px;font-family: 'Patua One', cursive;text-align: center;
padding-bottom: 15px;
text-transform: capitalize;
color: #545555;
}.bene{
margin: auto;padding: 50px 0px;text-align: center;
}
.banich{
background: #fff;
padding: 20px 20px;
border-radius: 5px;
margin-bottom: 20px;
width: 100%;
}
.banich img{
margin: auto;height: 60px;
margin-bottom: 20px;
}
.banich h2{
margin: auto;padding: 10px 0px;font-size: 16px;
background: #213c3e0a;
font-weight: 500;
font-family: 'Patua One', cursive;
color: #595858;
}
.banich p{
margin: auto;padding: 10px 0px;font-size: 15px;
color: #4a4a4a;
font-family: 'Rubik', sans-serif;
}

.statisticstab{
  margin: auto;width: 100%;background: white;
  padding: 20px 0px;
  border-radius: 4px;
}
.statisticstab h2{
  margin: auto;color: #757474;font-size: 15px;
}
.statisticstab h1{
 margin: auto;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Patua One', cursive;
  color: #595858;
 margin-bottom: 5px;
}
.accountsuminfo{
margin: auto;background: #504f4f;text-align: center;
width: 100%;
margin-bottom: 10px;
box-shadow: 0px 1px 5px 0 rgb(176, 176, 176);
padding: 15px 0px;
border-radius: 3px;
}
.accountsuminfo h1{
margin: auto;
font-size: 22px;
font-weight: bold;
color: #fdfdfd;
}
.accountsuminfo p{
margin: auto;
font-size: 15px;
padding-top: 2px;
padding-bottom: 10px;
color: #fff;
}
.accountsuminfo a{
margin: auto;
background: #6c6e6e;
padding: 5px 10px;
color: #fafafa;
border-radius: 5px;
width: 80%;
display: inline-block;
text-transform: capitalize;
font-weight: 500;
font-size: 15px;
}
.accountsuminfo a:hover{
background: #fff;
text-decoration: none;
color: #242424;
}
.accountstch{
margin: auto;background: #fff;width: 100%;margin-bottom: 10px;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
overflow: hidden;
}
.accountstch h2{
margin: auto;font-size: 15px;background: #d0d0d0;padding: 12px;
color: #393838;
}
.accountstchrow{
margin: auto;width: 100%;background: #fff;display: inline-block;
border-bottom: 1px solid #d9d9d9;
padding: 5px;
}
.accountstchrow a{
color: #1c61b9;
font-size: 13px;
}
.accountstchrow:last-child{
border-bottom: none;
}
.accountstchrow h4{
float: left;
width: 50%;
text-align: left;
margin: auto;
color: #3c3b3b;
padding: 2px;
font-size: 14px;
}
.accountstchrow p{
float: right;
width: 50%;
text-align: right;
margin: auto;
color: #575757;
font-weight: 600;
padding: 2px;
font-size: 15px;
overflow: hidden;
} 

.page-link:hover {
  z-index: 2;
  color: #f8f8f8 !important;
  background-color: #ad315a !important;
  border-color: #a9325a !important;
}
.active > .page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: #c42d5f !important;
  border-color: #943655 !important;
}
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: #232324 !important;
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.icon-captcha-wrapper {
        margin: 15px 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        max-width: 100%;
        width: 100%;
    }
    
    .icon-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        padding: 0 4px;
        font-size: 13px;
    }
    .icon-title {
        color: #5f6368;
        font-weight: 450;
        font-size: clamp(11px, 3vw, 13px); /* Responsive font */
    }
    .icon-right {
        display: flex;
        align-items: center;
        gap: clamp(5px, 2vw, 10px); /* Responsive gap */
    }
    .icon-attempts {
        font-size: clamp(10px, 2.5vw, 12px);
        color: #5f6368;
        background: #f1f3f4;
        padding: 3px 8px;
        border-radius: 12px;
        white-space: nowrap;
    }
    .icon-refresh {
        width: clamp(24px, 6vw, 26px);
        height: clamp(24px, 6vw, 26px);
        border: none;
        background: transparent;
        color: #5f6368;
        font-size: clamp(16px, 4vw, 18px);
        cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    .icon-refresh:hover {
        background: #f1f3f4;
    }
    
    .icon-box {
        background-image: radial-gradient(circle, #e0e0e0 1px, transparent 1px);
        background-size: 12px 12px;
        background-color: #fafafa;
        border: 1px solid #e8eaed;
        border-radius: 12px;
        padding: clamp(12px, 3vw, 16px) clamp(12px, 4vw, 20px);
        transition: all 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }
    .icon-box.verified {
        background-image: none;
        background-color: #f0f9f0;
        border-color: #34a853;
    }
    
    /* Responsive Grid - Columns adjust according to screen size */
    .icon-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: clamp(4px, 2vw, 8px);
        transition: opacity 0.2s;
    }
    
    /* Small screens - adjust grid */
    @media (max-width: 480px) {
        .icon-grid {
            gap: 3px;
        }
        .icon-item {
            font-size: 18px !important;
            padding: 2px 0;
        }
    }
    
    /* Extra small screens */
    @media (max-width: 360px) {
        .icon-grid {
            gap: 2px;
        }
        .icon-item {
            font-size: 16px !important;
        }
        .icon-box {
            padding: 10px 8px;
        }
    }
    
    .icon-item {
        font-size: clamp(16px, 5vw, 22px);
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        padding: 4px 0;
        color: #3c4043;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        will-change: transform;
        min-width: 0; /* Prevent overflow */
    }
    
    /* Normal icon hover */
    .icon-item:hover {
        transform: scale(1.15) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) !important;
    }
    
    /* Upside-down icon - always rotated */
    .icon-item.upside-down {
        transform: rotate(180deg) !important;
    }
    
    /* Upside-down icon hover - rotate maintain */
    .icon-item.upside-down:hover {
        transform: scale(1.15) rotate(180deg) !important;
    }
    
    .icon-item.wrong {
        animation: shake 0.3s;
    }
    .icon-item.disabled {
        opacity: 0.4;
        pointer-events: none;
    }
    
    /* Wrong message */
    .icon-wrong {
        text-align: center;
        font-size: clamp(10px, 3vw, 12px);
        color: #d93025;
        min-height: 0;
        margin-top: 0;
        font-weight: 450;
        transition: all 0.2s;
    }
    .icon-wrong:not(:empty) {
        margin-top: clamp(5px, 2vw, 8px);
        min-height: 18px;
    }
    
    .icon-success {
        display: none;
        align-items: center;
        justify-content: center;
        gap: clamp(5px, 2vw, 8px);
        padding: 0;
    }
    .success-check {
        color: #34a853;
        font-size: clamp(18px, 5vw, 20px);
        font-weight: bold;
    }
    .success-text {
        color: #34a853;
        font-size: clamp(12px, 4vw, 14px);
        font-weight: 500;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)); }
        25% { transform: translateX(-3px) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)); }
        75% { transform: translateX(3px) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)); }
    }