/* Basic Styles and Google Fonts */
 :root {
     --primary-color: #e94560;
     --secondary-color: #00c896;
     --highlight-color: #ffc107;
     --dark-bg: #1a1a2e;
     --card-bg: #2c2c44;
     --light-text: #f0f0f0;
     --dark-text: #333;
     --grey-text: #c5c6c7;
     --font-headings: 'Russo One', sans-serif;
     --font-body: 'Open Sans', sans-serif;
     --container-width: 1140px;
     --header-height: 70px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 body {
     font-family: var(--font-body);
     line-height: 1.6;
     background-color: #f4f4f4;
     color: var(--dark-text);
     overflow-x: hidden;
 }

 html {
     scroll-behavior: smooth;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-headings);
     color: var(--dark-bg);
 }

 a {
     text-decoration: none;
     color: var(--primary-color);
 }

 ul {
     list-style: none;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 .container {
     margin: 0 auto;
 }

 .containerLB {
     margin: -20px;
 }

 .section-padding {
     padding: 60px 0;
 }

 .bg-dark {
     background-color: var(--dark-bg);
     color: var(--light-text);
 }

 .bg-dark h1,
 .bg-dark h2,
 .bg-dark h3 {
     color: var(--light-text);
 }

 .section-title {
     text-align: center;
     font-size: 2.8rem;
     margin-bottom: 5px;
     color: var(--dark-bg);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .section-title span {
     color: var(--primary-color);
 }

 .text-light h2.section-title {
     color: var(--light-text);
 }

 /* Button Styles */
 .btn {
     display: inline-block;
     padding: 12px 28px;
     font-family: var(--font-headings);
     font-size: 1rem;
     text-transform: uppercase;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.3s ease;
     letter-spacing: 0.5px;
     text-align: center;
 }

 .btn-primary {
     background-color: var(--primary-color);
     color: #fff;
 }

 .btn-primary:hover {
     background-color: #d73b53;
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
 }

 .btn-secondary {
     background-color: var(--secondary-color);
     color: #fff;
 }

 .btn-secondary:hover {
     background-color: #00b386;
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(0, 200, 150, 0.4);
 }

 .btn-highlight {
     background-color: var(--highlight-color);
     color: var(--dark-bg);
     font-weight: bold;
 }

 .btn-highlight:hover {
     background-color: #e6ac00;
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(255, 193, 7, 0.5);
 }


 .btn-lg {
     padding: 15px 35px;
     font-size: 1.2rem;
 }

 .btn-sm {
     padding: 8px 15px;
     font-size: 0.9rem;
 }

 /* Header */
 header {
     background-color: rgba(26, 26, 46, 0.95);
     color: var(--light-text);
     padding: 0 10px;
     height: var(--header-height);
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 header .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 100%;
 }

 header .logo {
     font-family: var(--font-headings);
     font-size: 1.6rem;
     color: var(--light-text);
     text-transform: uppercase;
     flex-shrink: 0;
 }

 header .logo span {
     color: var(--primary-color);
 }

 header nav {
     flex-grow: 1;
     display: flex;
     justify-content: center;
 }

 header nav ul {
     display: flex;
     align-items: center;
 }

 header nav ul li {
     margin-left: 20px;
 }

 header nav ul li:first-child {
     margin-left: 0;
 }


 header nav ul li a {
     color: var(--grey-text);
     font-weight: 600;
     font-size: 0.9rem;
     padding: 5px 0;
     position: relative;
     transition: color 0.3s ease;
 }

 header nav ul li a:hover,
 header nav ul li a.active {
     color: var(--primary-color);
 }

 header nav ul li a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width 0.3s ease;
 }

 header nav ul li a:hover::after,
 header nav ul li a.active::after {
     width: 100%;
 }

 .header-right-content {
     display: flex;
     align-items: center;
 }

 .header-icons {
     display: flex;
     align-items: center;
     margin-right: 15px;
 }

 .header-icons a {
     color: var(--grey-text);
     font-size: 1.2rem;
     margin-left: 18px;
     position: relative;
     transition: color 0.3s ease;
 }

 .header-icons a:hover {
     color: var(--primary-color);
 }

 .notification-icon .counter {
     position: absolute;
     top: -8px;
     right: -10px;
     background-color: var(--primary-color);
     color: white;
     font-size: 0.7rem;
     padding: 2px 5px;
     border-radius: 50%;
     font-family: var(--font-body);
     font-weight: bold;
 }


 .auth-buttons .btn {
     margin-left: 10px;
     padding: 8px 15px;
     font-size: 0.8rem;
 }

 .auth-buttons {
     flex-shrink: 0;
 }

 .menu-toggle {
     display: none;
     background: none;
     border: none;
     color: var(--light-text);
     font-size: 1.5rem;
     cursor: pointer;
     margin-left: 15px;
 }

 /* Hero Section */
 /* https://images.unsplash.com/photo-1542773998-9325f0a098d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80 */
 #hero {
     background: url('../web-img/1.png') no-repeat center center/cover;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: var(--light-text);
     position: relative;
     padding-top: var(--header-height);
     padding-bottom: 40px;
 }

 #hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
 }

 .hero-content {
     position: relative;
     z-index: 1;
     max-width: 700px;
 }

 .hero-content h1 {
     font-size: 3.5rem;
     margin-bottom: 20px;
     color: var(--light-text);
     line-height: 1.2;
 }

 .hero-content p {
     font-size: 1.3rem;
     margin-bottom: 30px;
     color: var(--grey-text);
 }

 .hero-actions {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
 }

 .hero-actions .btn {
     min-width: 220px;
 }

 .btn-video-call {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .btn-video-call i {
     font-size: 1.2em;
 }


 /* Featured Games */
 .games-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     grid-auto-flow: column;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding-bottom: 20px;
 }

 .game-card {
     background-color: var(--card-bg);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     color: var(--light-text);
     scroll-snap-align: start;
     flex-shrink: 0;
     width: 280px;
 }

 .game-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 .game-card img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     border-bottom: 3px solid var(--primary-color);
 }

 .game-card .game-info {
     padding: 20px;
 }

 .game-card .game-info h3 {
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--light-text);
 }

 .game-card .game-info p {
     font-size: 0.9rem;
     margin-bottom: 15px;
     color: var(--grey-text);
     min-height: 40px;
 }

 /* Why Choose Us Section */
 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     text-align: center;
 }

 .feature-item {
     background-color: var(--card-bg);
     padding: 30px;
     border-radius: 8px;
     transition: transform 0.3s ease;
 }

 .feature-item:hover {
     transform: scale(1.05);
 }

 .feature-item i {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 15px;
 }

 .feature-item h3 {
     font-size: 1.4rem;
     margin-bottom: 10px;
     color: var(--light-text);
 }

 .feature-item p {
     color: var(--grey-text);
     font-size: 0.9rem;
 }

 /* Latest News */
 .news-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 /* .news-grid1 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     grid-auto-flow: column;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding-bottom: 20px;
 } */

 .news-grid1 {
     display: grid;
     grid-auto-flow: column;
     /* Force items in a row */
     grid-auto-columns: minmax(280px, 1fr);
     /* Each column fixed width */
     gap: 30px;

     overflow-x: auto;
     /* Horizontal scroll */
     overflow-y: hidden;
     /* Hide vertical scroll */
     scroll-snap-type: x mandatory;
     /* Snap horizontally */
     -webkit-overflow-scrolling: touch;
     /* Smooth on iOS */
     padding-bottom: 20px;
 }

 .news-grid1>* {
     scroll-snap-align: start;
     /* Each card snaps */
 }



 .news-item {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.3s ease;
 }

 .news-item:hover {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }

 .news-item img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .news-content {
     padding: 20px;
 }

 .news-content h3 {
     font-size: 1.3rem;
     margin-bottom: 8px;
     color: var(--dark-bg);
 }

 .news-meta {
     font-size: 0.8rem;
     color: #777;
     margin-bottom: 10px;
 }

 .news-content p {
     font-size: 0.95rem;
     margin-bottom: 15px;
 }

 .read-more {
     font-weight: bold;
     color: var(--secondary-color);
     transition: color 0.3s ease;
 }

 .read-more:hover {
     color: var(--primary-color);
 }

 /* Call to Action Banner */
 #cta-banner {
     background-color: var(--primary-color);
     color: var(--light-text);
     padding: 60px 0;
     text-align: center;
 }

 #cta-banner h2 {
     font-size: 2.5rem;
     margin-bottom: 15px;
     color: var(--light-text);
 }

 #cta-banner p {
     font-size: 1.1rem;
     margin-bottom: 30px;
 }

 #cta-banner .btn-primary {
     background-color: var(--light-text);
     color: var(--primary-color);
     font-weight: bold;
 }

 #cta-banner .btn-primary:hover {
     background-color: #f0f0f0;
     transform: scale(1.05);
     box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
 }

 /* Footer */
 footer {
     background-color: var(--dark-bg);
     color: var(--grey-text);
     padding: 50px 0 20px;
 }

 .footer-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-bottom: 30px;
 }

 .footer-about h3 {
     font-size: 1.8rem;
     color: var(--light-text);
     margin-bottom: 15px;
 }

 .footer-about h3 span {
     color: var(--primary-color);
 }

 .footer-about p {
     font-size: 0.9rem;
     margin-bottom: 20px;
 }

 .social-links a {
     color: var(--grey-text);
     font-size: 1.3rem;
     margin-right: 15px;
     transition: color 0.3s ease;
 }

 .social-links a:hover {
     color: var(--primary-color);
 }

 .footer-links h4,
 .footer-contact h4 {
     font-size: 1.2rem;
     color: var(--light-text);
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .footer-links ul li {
     margin-bottom: 10px;
 }

 .footer-links ul li a {
     color: var(--grey-text);
     transition: color 0.3s ease, padding-left 0.3s ease;
 }

 .footer-links ul li a:hover {
     color: var(--primary-color);
     padding-left: 5px;
 }

 .footer-contact p {
     margin-bottom: 10px;
     font-size: 0.9rem;
 }

 .footer-contact p i {
     margin-right: 10px;
     color: var(--primary-color);
 }

 .footer-bottom {
     text-align: center;
     padding-top: 20px;
     border-top: 1px solid #3a3a5a;
     font-size: 0.9rem;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     header nav ul li {
         margin-left: 15px;
     }

     header nav ul li a {
         font-size: 0.85rem;
     }

     .header-icons a {
         font-size: 1.1rem;
         margin-left: 15px;
     }

     .auth-buttons .btn {
         padding: 7px 12px;
         font-size: 0.75rem;
     }

     .LBtimer {
         font-size: 2vw;
     }
 }

 @media (max-width: 992px) {
     .section-title {
         font-size: 2.2rem;
     }

     .hero-content h1 {
         font-size: 2.8rem;
     }

     .hero-content p {
         font-size: 1.1rem;
     }

     .games-grid {
         /* Removed grid-template-columns to allow for pure horizontal scroll with individual card width */
         grid-auto-columns: minmax(280px, 1fr);
         /* Ensures each card takes at least 280px */
         grid-template-columns: unset;
         /* Override previous grid-template-columns */
         justify-content: start;
         /* Align items to the start of the container */
     }

     .news-grid1 {
         /* Removed grid-template-columns to allow for pure horizontal scroll with individual card width */
         grid-auto-columns: minmax(280px, 1fr);
         /* Ensures each card takes at least 280px */
         grid-template-columns: unset;
         /* Override previous grid-template-columns */
         justify-content: start;
         /* Align items to the start of the container */
     }

     .hero-actions {
         flex-direction: column;
     }

     .LBtimer {
         font-size: 2vw;
     }
 }

 @media (max-width: 768px) {
     header .container {
         padding: 0 10px;
     }

     header nav {
         display: none;
         position: absolute;
         top: var(--header-height);
         left: 0;
         width: 100%;
         background-color: var(--dark-bg);
         flex-direction: column;
         padding: 10px 0;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     }

     header nav.active {
         display: flex;
     }

     header nav ul {
         flex-direction: column;
         width: 100%;
         align-items: stretch;
     }

     header nav ul li {
         margin: 0;
         text-align: center;
     }

     header nav ul li a {
         display: block;
         padding: 12px 15px;
         border-bottom: 1px solid #3a3a5a;
         font-size: 1rem;
     }

     header nav ul li a::after {
         display: none;
     }

     .header-icons {
         margin-right: 10px;
     }

     .header-icons a {
         font-size: 1.2rem;
         margin-left: 12px;
     }

     .auth-buttons {
         display: none;
     }

     .menu-toggle {
         display: block;
     }

     .hero-content h1 {
         font-size: 2.2rem;
     }

     .section-padding {
         padding: 40px 0;
     }

     .features-grid {
         grid-template-columns: 1fr;
     }

     .news-grid {
         grid-template-columns: 1fr;
     }

     .footer-content {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .footer-about .social-links {
         justify-content: center;
         display: flex;
     }

     .LBtimer {
         font-size: 3vw;
     }
 }

 @media (max-width: 480px) {
     header .logo {
         font-size: 1.4rem;
     }

     .header-icons a {
         font-size: 1.1rem;
         margin-left: 10px;
     }

     .notification-icon .counter {
         font-size: 0.6rem;
         padding: 1px 4px;
         top: -6px;
         right: -7px;
     }

     .hero-content h1 {
         font-size: 1.8rem;
     }

     .hero-content p {
         font-size: 1rem;
     }

     .btn {
         padding: 10px 20px;
         font-size: 0.9rem;
     }

     .btn-lg {
         padding: 12px 25px;
         font-size: 1rem;
     }

     .section-title {
         font-size: 1.8rem;
     }

     .game-card .game-info h3 {
         font-size: 1.3rem;
     }

     .LBtimer {
         font-size: 5vw;
     }
 }

 /* New Styles for Added Pages */
 .form-container {
     max-width: 500px;
     margin: 0 auto;
     padding: 40px;
     background-color: var(--card-bg);
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     text-align: center;
 }

 .form-container h2 {
     font-size: 2rem;
     margin-bottom: 30px;
     color: var(--light-text);
 }

 .form-group {
     margin-bottom: 20px;
     text-align: left;
 }

 .form-group label {
     display: block;
     font-size: 0.9rem;
     color: var(--grey-text);
     margin-bottom: 8px;
 }

 .form-control {
     width: 100%;
     padding: 12px 15px;
     font-size: 1rem;
     border: 1px solid #4a5568;
     border-radius: 5px;
     background-color: #374151;
     color: var(--light-text);
     transition: all 0.3s ease;
 }

 .form-control:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
 }

 .form-text {
     font-size: 0.8rem;
     color: var(--grey-text);
     margin-top: 5px;
 }

 .chips-store-section {
     text-align: center;
     padding: 40px 0;
 }

 .chips-packages {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
     flex-wrap: wrap;
 }

 .chip-package {
     background-color: var(--card-bg);
     padding: 20px;
     border-radius: 10px;
     width: 250px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .chip-package:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 .chip-package h3 {
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--light-text);
 }

 .chip-package p {
     font-size: 1.1rem;
     margin-bottom: 15px;
     color: var(--primary-color);
     font-weight: bold;
 }

 .leaderboard-section {
     padding: 40px 0;
 }

 .leaderboard-table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
     background-color: var(--card-bg);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .leaderboard-table thead th {
     padding: 15px;
     text-align: left;
     background-color: #374151;
     color: var(--light-text);
     font-weight: bold;
     border-bottom: 2px solid #4a5568;
 }

 .leaderboard-table tbody td {
     padding: 15px;
     text-align: left;
     border-bottom: 1px solid #4a5568;
     background-color: white;
 }

 .leaderboard-table tbody tr:nth-child(odd) {
     background-color: #3f4856;
 }

 .leaderboard-table tbody tr:last-child td {
     border-bottom: none;
 }

 .logout-section {
     padding: 40px 0;
     text-align: center;
 }

 .teams-section,
 .contact-us-section,
 .about-us-section {
     padding: 40px 0;
 }

 .terms-content,
 .contact-content,
 .about-content {
     background-color: var(--card-bg);
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     color: var(--light-text);
     line-height: 1.8;
 }

 .terms-content h2,
 .contact-content h2,
 .about-content h2 {
     font-size: 2rem;
     margin-bottom: 20px;
     color: var(--light-text);
 }

 .terms-content p,
 .contact-content p,
 .about-content p {
     font-size: 0.95rem;
     color: var(--grey-text);
     margin-bottom: 15px;
 }

 .contact-content ul {
     list-style: disc;
     padding-left: 20px;
     margin-bottom: 15px;
 }

 .contact-content li {
     margin-bottom: 10px;
     font-size: 0.95rem;
     color: var(--grey-text);
 }

 /* Utility Classes */
 .text-center {
     text-align: center;
 }

 .mt-2 {
     margin-top: 10px;
 }

 .mt-4 {
     margin-top: 20px;
 }

 .mb-4 {
     margin-bottom: 20px;
 }

 .mb-6 {
     margin-bottom: 30px;
 }

 .ml-2 {
     margin-left: 10px;
 }

 .text-primary {
     color: var(--primary-color);
 }

 .text-secondary {
     color: var(--secondary-color);
 }

 /* Full-screen transparent popup */
 .popup-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     justify-content: center;
     align-items: center;
     padding: 20px;
 }

 .popup-content {
     background: #fff;
     padding: 30px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     border-radius: 10px;
     position: relative;
     color: #000;
     width: 1000px;
 }

 .close-btn {
     position: absolute;
     top: 5px;
     right: 7px;
     font-size: 28px;
     font-weight: bold;
     color: white;
     cursor: pointer;
     transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
     animation: closePulse 1.5s infinite;
 }

 .close-btn-animation {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: white;
     background-color: #e94560;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     cursor: pointer;
     box-shadow: 0 0 10px lab(54.13% 68.68 44.43 / 0.6);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     animation: pulse 1.5s infinite;
 }

 .close-btn:hover {
     transform: scale(1.3) rotate(90deg);
     color: #ff6b81;
     box-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
 }

 @keyframes closePulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
     }
 }

 .open-popup-btn {
     margin: 100px auto;
     display: block;
     padding: 15px 30px;
     font-size: 18px;
     background: #e94560;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 /* ==================================================== */

 .profile-ui {
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     background-color: #f9f9f9;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .profile-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 /* .profile-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background-color: #ddd;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 } */

 .profile-avatar {
     position: relative;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background-color: #ddd;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .main-profile-avatar {
     position: relative;
     /* width: 40px; */
     /* height: 40px; */
     border-radius: 50%;
     background-color: #ddd;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .avatar-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Keeps aspect ratio and fills circle */
 }

 .user-icon {
     width: 40px;
     height: 40px;
     color: #666;
 }

 .profile-details {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .profile-info-item {
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .profile-label {
     font-weight: bold;
     color: #333;
     width: 100px;
 }

 .profile-value {
     color: #555;
 }

 .profile-actions {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
     gap: 10px;
 }

 .edit-profile-button {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .edit-icon {
     width: 18px;
     height: 18px;
 }

 /* .edit-avatar-button {
     position: absolute;
     bottom: 0;
     right: -10px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background-color: #fff;
     border: 2px solid #f9f9f9;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
 } */

 .edit-avatar-button {
     position: absolute;
     bottom: 5px;
     right: 5px;
     background: rgba(255, 255, 255, 0.8);
     border: none;
     border-radius: 50%;
     padding: 4px;
     cursor: pointer;
     font-size: 14px;
 }

 .edit-avatar-button:hover {
     background-color: #eee;
 }

 .edit-icon {
     width: 16px;
     height: 16px;
     color: #666;
 }

 /* =========================================================== */

 .notifications-ui {
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .notifications-list {
     list-style: none;
     padding: 0;
     margin: 0;
     overflow-y: auto;
     max-height: 300px;
 }

 .notification-item {
     padding: 10px;
     border-bottom: 1px solid #eee;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .notification-item:last-child {
     border-bottom: none;
 }

 .notification-message {
     flex-grow: 1;
 }

 .notification-actions {
     display: flex;
     gap: 5px;
 }

 .btn-sm {
     padding: 5px 10px;
     font-size: 0.8em;
 }

 .btn-success {
     background-color: #28a745;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 .btn-success:hover {
     background-color: #218838;
 }

 .btn-danger {
     background-color: #dc3545;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 .btn-danger:hover {
     background-color: #c82333;
 }



 /* ========================================= */


 /*
Start Success and fail alert Popup
*/
 /* Basic Reset */

 .popup-box {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 300px;
     padding: 20px;
     background: white;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     text-align: center;
     z-index: 10000;
 }

 .popup-box .popup-close-box {
     background: linear-gradient(90deg, #ff8a00, #e52e71);
     border: none;
     border-radius: 50px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     color: white;
     cursor: pointer;
     font-size: 1rem;
     padding: 10px 20px;
     margin-top: 20px;
     transition: all 0.3s ease;
 }

 .popup-box .popup-close-box:hover {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     transform: translateY(-2px);
 }

 .popup .popup-close-box:active {
     transform: translateY(0);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .overlay-box {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
 }

 /*
End Success and fail alert Popup
*/

 /* =========================================== */


 /* LB Popup CSS*/

 .popup_LB {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1000;
 }

 .popup-content_LB {
     background-color: #fff;
     border-radius: 10px;
     padding: 20px;
     text-align: center;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     max-width: 400px;
     width: 90%;
 }

 .popup_LB h2 {
     color: #4caf50;
 }

 .popup_LB h2.loss {
     color: #f44336;
 }

 .main-heading_LB {
     font-size: 24px;
     margin-bottom: 10px;
     color: #333;
 }

 .close-btn_LB {
     cursor: pointer;
     font-size: 24px;
     position: absolute;
     top: 10px;
     right: 15px;
 }

 .ok-btn_LB {
     background-color: #4caf50;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     margin-top: 10px;
 }

 .ok-btn_LB:hover {
     background-color: #45a049;
 }

 .hidden_LB {
     display: none;
 }

 /* ================================================ */

 /* Overlap Popup  */

 .overlay_Pop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(238, 233, 233, 0.5);
     backdrop-filter: blur(5px);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 10000;
 }

 .popup_Pop {
     background: rgb(231, 226, 226);
     color: #fff;
     padding: 20px 30px;
     border-radius: 8px;
     text-align: center;
     animation: fadeIn_Pop 0.3s ease;
 }

 .popup_Pop .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: transparent;
     border: none;
     color: red;
     font-size: 50px;
     font-weight: bold;
     cursor: pointer;
     transition: background 0.2s ease;
 }

 .popup_Pop .close-btn:hover {
     background: rgba(255, 255, 255, 0.4);
     border-radius: 50%;
 }

 .btn_Pop {
     margin: 10px 5px;
     padding: 8px 16px;
     background: #007bff;
     border: none;
     color: #fff;
     border-radius: 5px;
     cursor: pointer;
     transition: background 0.2s ease;
 }

 .btn_Pop:hover {
     background: #0056b3;
 }

 @keyframes fadeIn_Pop {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }


 /* =========================================== */

 /* Daily Bonus */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     visibility: hidden;
 }

 .bonus-container {
     background: linear-gradient(135deg, #6a11cb, #2575fc);
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     text-align: center;
     color: white;
     width: 90%;
     max-width: 400px;
     position: relative;
 }

 .overlay h1 {
     font-size: 24px;
     margin-bottom: 20px;
 }

 .day {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }

 .day:last-child {
     border-bottom: none;
 }

 .day-name {
     font-size: 18px;
 }

 .bonus-amount {
     font-size: 20px;
     font-weight: bold;
 }

 .claim-button {
     background-color: #ffcc00;
     color: #333;
     border: none;
     border-radius: 5px;
     padding: 8px 15px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .claim-button:hover {
     background-color: #e6b800;
 }

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

 /* Responsive Styles */
 @media (max-width: 600px) {
     .overlay h1 {
         font-size: 20px;
     }

     .day-name {
         font-size: 16px;
     }

     .bonus-amount {
         font-size: 18px;
     }

     .claim-button {
         font-size: 14px;
         padding: 6px 12px;
     }

     .close-button {
         font-size: 18px;
     }

     .LBtimer {
         font-size: 3.5vw;
     }
 }

 /* ================================================== */


 /* Start Budddy List Tab Management */

 /* === Tabs Header === */
 .tab-header {
     display: flex;
     justify-content: space-between;
     border: 1px solid #e3e7ee;
     border-radius: 12px;
     overflow: hidden;
     background-color: #f8f9fb;
     margin-bottom: 20px;
 }

 .tab-btn {
     flex: 1;
     padding: 14px 0;
     background: none;
     border: none;
     font-size: 16px;
     font-weight: 500;
     color: #555;
     transition: all 0.25s ease;
     position: relative;
     cursor: pointer;
 }

 .tab-btn:hover {
     background-color: #e6efff;
     color: #007bff;
 }

 .tab-btn.active {
     background-color: #007bff;
     color: #fff;
     font-weight: 600;
 }

 table.leaderboard-table {
     width: 100%;
     border-collapse: collapse;
 }

 .leaderboard-table th,
 .leaderboard-table td {
     padding: 12px;
     border: 1px solid #eee;
     text-align: left;
 }

 .leaderboard-table th {
     background-color: #f0f2f5;
     color: #333;
     font-weight: 600;
 }

 .table-scroll {
     max-height: 300px;
     overflow-y: auto;
     border: 1px solid #ddd;
 }


 /* Tab content switching */
 .tab-content {
     display: none;
 }

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


 /* End Budddy List Tab Management */



 /* Face Login CSS  Start */
 .divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 20px 0;
 }

 .divider span {
     background: #111;
     padding: 0 10px;
     color: #aaa;
 }

 .divider::before,
 .divider::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid #444;
 }





 /* Face Scan UI */

 .scan-line {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     animation: scan 2s linear infinite;
 }

 @keyframes scan {
     0% {
         top: 0;
     }

     100% {
         top: 100%;
     }
 }

 canvas {
     position: absolute;
     top: 0;
     left: 0;
 }

 .face-scan {
     position: relative;
     width: 220px;
     height: 220px;
     margin: 20px auto;
 }

 .scan-circle {
     width: 100%;
     height: 100%;
     border: 4px solid rgba(255, 0, 0, 0.856);
     border-radius: 50%;
     overflow: hidden;
     position: relative;
 }

 #video-container {
     width: 100%;
     height: 100%;
 }

 #video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scaleX(-1);
 }

 #video-container.detected {
     border-color: #00ff88;
     box-shadow: 0 0 20px #00ff88;
 }

 .face-controls {
     text-align: center;
     margin-top: 30px;
 }

 .face-controls .btn {
     margin: 5px;
 }

 #status {
     color: #555;
 }

 #face-password-section input {
     width: 100%;
     padding: 8px;
     margin-top: 8px;
 }

 #face-password-section button {
     margin-top: 12px;
 }


 /* Face Login CSS  End */



 /* ===================================== */



 .popup-content.slider-open {
     max-width: 1200px;
 }

 /* --- side-slider styles --- */
 .side-slider {
     position: absolute;
     top: 0;
     bottom: 0;
     right: -300px;
     width: 300px;
     height: 100%;
     background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
     box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);
     transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     z-index: 100;
     overflow-y: auto;
     padding: 25px;
     box-sizing: border-box;
     border-left: 1px solid #dee2e6;
 }

 .side-slider.open {
     right: 0;
 }


 .popup-content #leaderboard {
     flex-shrink: 0;
     width: 100%;
     transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     margin-right: 0;
 }

 .popup-content.slider-open #leaderboard {
     margin-right: 300px;
 }


 /* --- Existing styles for slider header, content, etc. (keep these) --- */
 .slider-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 2px solid #ced4da;
 }

 .slider-header h3 {
     margin: 0;
     color: #212529;
     font-size: 1.6em;
     font-weight: 600;
 }

 .slider-close-btn {
     cursor: pointer;
     font-size: 30px;
     color: #6c757d;
     transition: color 0.2s ease-in-out;
 }

 .slider-close-btn:hover {
     color: #dc3545;
 }

 .player-detail-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 0;
     border-bottom: 1px dashed #e9ecef;
 }

 .player-detail-item:last-child {
     border-bottom: none;
 }

 .detail-label {
     font-weight: 500;
     color: #495057;
     flex-basis: 40%;
 }

 .detail-value {
     font-weight: 700;
     color: #007bff;
     text-align: right;
     flex-basis: 60%;
 }

 .player-stats-summary {
     background-color: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     padding: 15px;
     margin-top: 30px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .player-stats-summary h4 {
     color: #212529;
     font-size: 1.2em;
     margin-top: 0;
     margin-bottom: 15px;
     text-align: center;
 }

 .player-stats-summary p {
     margin-bottom: 8px;
     color: #495057;
     display: flex;
     justify-content: space-between;
 }

 .player-stats-summary p span {
     font-weight: 600;
     color: #007bff;
 }

 .leaderboard-table tbody tr:hover {
     background-color: #e6f7ff;
     cursor: pointer;
     transition: background-color 0.2s ease-in-out;
 }

 .popup-header-buttons {
     display: flex;
     justify-content: flex-end;

     gap: 10px;

     padding: 10px;

     position: absolute;

     top: 0;
     right: 0;
 }

 .info-btn {
     position: absolute;
     cursor: pointer;
     font-size: 24px;

     color: #888;

     background: none;
     border: none;

     line-height: 1;

     top: 5px;
     right: 44px;

 }

 .LB-Timer-btn {
     position: absolute;
     cursor: pointer;
     font-size: 24px;

     color: #888;

     background: none;
     border: none;

     line-height: 1;

     top: 5px;
     right: 81px;

 }

 .info-btn:hover {
     color: #333;

 }

 .ol-drawer-class {
     padding-left: 20px;
 }

 .ol-drawer-class li {
     padding-left: 10px;
 }


 .LBtimer {
     color: #e67e22;
     text-align: center;
     padding: 10px 0;
 }


 /* ====================================================== */


 .animated-info {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: white;
     background-color: #007bff;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     cursor: pointer;
     box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     animation: pulse 1.5s infinite;
 }

 .animated-LB-time {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: white;
     background-color: #007bff;
     border-radius: 50%;
     height: 30px;
     cursor: pointer;
     box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     animation: pulse 1.5s infinite;
 }


 .animated-info:hover {
     transform: scale(1.2);
     box-shadow: 0 0 15px rgba(0, 123, 255, 0.9);
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
     }

     50% {
         box-shadow: 0 0 15px rgba(0, 123, 255, 1);
     }

     100% {
         box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
     }
 }



 /* START Play Now Button  */

 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 0 10px rgba(255, 0, 100, 0.5);
     }

     50% {
         transform: scale(1.07);
         box-shadow: 0 0 20px rgba(255, 0, 150, 0.7);
     }

     100% {
         transform: scale(1);
         box-shadow: 0 0 10px rgba(255, 0, 100, 0.5);
     }
 }

 @keyframes wiggle {

     0%,
     100% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(2deg);
     }

     50% {
         transform: rotate(-2deg);
     }

     75% {
         transform: rotate(1deg);
     }
 }

 .play-now-btn {
     display: inline-block;
     /* padding: 14px 32px; */
     padding: 8px 10px;
     font-size: 15px;
     font-weight: bold;
     color: #fff;
     background: linear-gradient(90deg, #ff512f, #dd2476);
     border-radius: 50px;
     text-decoration: none;
     position: relative;
     overflow: hidden;
     animation: pulse 1.5s infinite, wiggle 1s infinite ease-in-out;
     transition: all 0.3s ease;
 }

 .play-now-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: rgba(255, 255, 255, 0.4);
     transform: skewX(-25deg);
     transition: left 0.5s ease;
 }

 .play-now-btn:hover::before {
     left: 130%;
 }

 .play-now-btn:hover {
     background: linear-gradient(90deg, #ff758c, #ff7eb3);
     transform: scale(1.1) rotate(0deg) !important;
     box-shadow: 0 6px 25px rgba(255, 0, 150, 0.7);
 }

 /* END Play Now Button  */

 /* Start Leader board icon */
 /* .trophy {
  font-size: 60px;
  display: inline-block;
  animation: sway1 1.2s ease-in-out infinite;
}

@keyframes sway1 {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(8deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
} */

 /* Trophy in center */
 .trophy {
     font-size: 46px;
     transform-origin: center;
     animation: trophy-bounce 2000ms infinite cubic-bezier(.2, .9, .3, 1);
     z-index: 3;
     filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
 }



 /* bounce for trophy */
 @keyframes trophy-bounce {
     0% {
         transform: translateY(0) rotate(-2deg);
     }

     30% {
         transform: translateY(-8px) rotate(2deg);
     }

     60% {
         transform: translateY(-4px) rotate(-1deg);
     }

     100% {
         transform: translateY(0) rotate(0deg);
     }
 }





 /* End Leader board icon */



 /* START Avtar Profile List */

 .container_1 {
     max-width: 315px;
     margin: 0 auto;
     position: fixed;
     margin-top: 40px;
 }

 /* .toggle-btn {
     padding: 12px 20px;
     background-color: #4e73df;
     color: #fff;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-size: 16px;
     width: 100%;
 } */

 .avatar-dropdown {
     display: none;
     /* position: absolute; */
     top: 100%;
     left: 0;
     width: 100%;
     margin-top: 10px;
     background-color: #fff;
     border-radius: 12px;
     padding: 15px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     max-height: 160px;
     overflow-y: auto;
     z-index: 10;
 }

 .avatar-list {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
 }

 .avatar-item {
     position: relative;
     width: 70px;
     height: 70px;
     cursor: pointer;
 }

 .avatar-item img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #4e73df;
     transition: transform 0.2s ease;
 }

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

 .checkmark {
     position: absolute;
     top: -5px;
     right: -5px;
     background-color: #28a745;
     color: white;
     font-size: 14px;
     border-radius: 50%;
     padding: 4px;
     display: none;
     border: 2px solid #fff;
 }

 .avatar-item.selected .checkmark {
     display: block;
 }

 @media (max-width: 600px) {
     .avatar-item {
         width: 60px;
         height: 60px;
     }

     /* .toggle-btn {
        font-size: 14px;
        padding: 10px;
      } */
 }

 /* END Avtar Profile List */