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

      body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
          color: #e2e8f0;
          overflow-x: hidden;
      }

      .header {
          background: rgba(15, 20, 25, 0.9);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid rgba(59, 130, 246, 0.3);
          padding: 1rem 0;
          position: fixed;
          width: 100%;
          top: 0;
          z-index: 100;
      }

      ul {
          list-style: none;
      }


      .games-section-popular h2::before {
          display: none;
      }

      .tools-section h2::before {
          display: none;
      }



      .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 2rem;
      }

      .logo {
          font-size: 1.8rem;
          font-weight: bold;
          background: linear-gradient(45deg, #3b82f6, #8b5cf6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .nav-links {
          display: flex;
          gap: 2rem;
          list-style: none;
          align-items: center;
      }

      .nav-item {
          position: relative;
      }

      .nav-links a {
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.3s ease;
          position: relative;
          padding: 0.5rem 1rem;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }

      .nav-links a:hover {
          color: #3b82f6;
          background: rgba(59, 130, 246, 0.1);
          transform: translateY(-1px);
      }

      .dropdown-arrow {
          font-size: 0.8rem;
          transition: transform 0.3s ease;
      }

      .dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          background: rgba(15, 20, 25, 0.98);
          backdrop-filter: blur(20px);
          border: 1px solid rgba(59, 130, 246, 0.3);
          border-radius: 12px;
          padding: 0.5rem 0;
          min-width: 200px;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.3s ease;
          z-index: 1000;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }

      .nav-item:hover .dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }

      .nav-item:hover .dropdown-arrow {
          transform: rotate(180deg);
      }

      .dropdown-menu a {
          display: block;
          padding: 0.75rem 1rem;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.3s ease;
          border-radius: 0;
          transform: none;
      }

      .dropdown-menu a:hover {
          background: rgba(59, 130, 246, 0.15);
          color: #3b82f6;
          transform: none;
      }

      .dropdown-menu a:first-child {
          border-radius: 12px 12px 0 0;
      }

      .dropdown-menu a:last-child {
          border-radius: 0 0 12px 12px;
      }

      .mobile-menu-btn {
          display: none;
          background: none;
          border: none;
          color: #cbd5e1;
          font-size: 1.5rem;
          cursor: pointer;
          padding: 0.5rem;
      }

      .mobile-menu {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(15, 20, 25, 0.98);
          backdrop-filter: blur(20px);
          border-top: 1px solid rgba(59, 130, 246, 0.3);
          padding: 1rem 0;
          max-height: 80vh;
          overflow-y: auto;
      }

      .mobile-menu.active {
          display: block;
      }

      .mobile-menu-section {
          border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      }

      .mobile-menu-section:last-child {
          border-bottom: none;
      }

      .mobile-menu-title {
          display: block;
          padding: 1rem 2rem;
          color: #3b82f6;
          text-decoration: none;
          font-weight: 600;
          background: rgba(59, 130, 246, 0.1);
      }

      .mobile-menu a {
          display: block;
          padding: 0.75rem 2.5rem;
          color: #cbd5e1;
          text-decoration: none;
          border-bottom: 1px solid rgba(59, 130, 246, 0.05);
          font-size: 0.9rem;
      }

      .mobile-menu a:hover {
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
      }

      .hero {
          padding: 5rem 2rem 4rem;
          text-align: center;
          position: relative;
          overflow: hidden;
      }

      .hero::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image:
              repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(99, 102, 241, 0.03) 100px, rgba(99, 102, 241, 0.03) 200px),
              repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(139, 92, 246, 0.03) 100px, rgba(139, 92, 246, 0.03) 200px);
          pointer-events: none;
      }

      .hero-content {
          max-width: 800px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
      }

      .hero h1 {
          font-size: 2.5rem;
          margin-bottom: 1rem;
          background: linear-gradient(45deg, #ffffff, #3b82f6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          font-weight: 800;
      }

      .hero p {
          font-size: 1rem;
          color: #94a3b8;
          margin-bottom: 2rem;
          line-height: 1.6;
      }

      .breadcrumbs {
          background: rgba(30, 41, 59, 0.3);
          padding: 1rem 2rem;
          margin-top: 72px;
      }

      .breadcrumbs ol {
          list-style: none;
          display: flex;
          gap: 0.5rem;
          max-width: 1200px;
          margin: 0 auto;
      }

      .breadcrumbs a {
          color: #94a3b8;
          text-decoration: none;
      }

      .breadcrumbs a:hover {
          color: #3b82f6;
      }

      .tools-section {
          padding: 4rem 2rem;
          max-width: 1200px;
          margin: 0 auto;
      }


      /* Games Grid */
      .games-section-popular {
          padding: 4rem 2rem;
          max-width: 1400px;
          margin: 0 auto;
      }

      .section-header-popular {
          text-align: center;
          margin-bottom: 4rem;
      }

      .section-title {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 1rem;
      }

      .section-subtitle {
          color: var(--text-secondary);
          font-size: 1.125rem;
      }

      .filter-tabs {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 3rem;
          flex-wrap: wrap;
      }

      .filter-tab {
          padding: 0.75rem 1.5rem;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-weight: 500;
          color: var(--text-secondary);
      }

      .filter-tab:hover {
          border-color: var(--primary);
          color: var(--text-primary);
      }

      .filter-tab.active {
          background: var(--primary);
          border-color: var(--primary);
          color: white;
      }

      .games-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 1.5rem;
          margin-bottom: 4rem;
      }

      .game-card {
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 1.5rem;
          transition: all 0.3s ease;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }

      .game-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 100%;
          background: linear-gradient(135deg, transparent, rgba(99, 102, 241, 0.05));
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      .game-card:hover::before {
          opacity: 1;
      }

      .game-card:hover {
          transform: translateY(-4px);
          border-color: var(--primary);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
      }

      .game-header {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1rem;
      }

      .game-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--bg-hover);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
      }

      .game-info h3 {
          font-size: 1.125rem;
          font-weight: 600;
          margin-bottom: 0.25rem;
      }

      .game-info .player-count {
          font-size: 0.75rem;
          color: var(--text-muted);
          display: flex;
          align-items: center;
          gap: 0.25rem;
      }

      .player-indicator {
          width: 6px;
          height: 6px;
          background: var(--success);
          border-radius: 50%;
          display: inline-block;
      }

      .game-tools {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          margin-top: 1rem;
      }

      .tool-badge {
          padding: 0.375rem 0.75rem;
          background: rgba(99, 102, 241, 0.1);
          border: 1px solid rgba(99, 102, 241, 0.2);
          border-radius: 8px;
          font-size: 0.75rem;
          color: var(--primary);
          text-decoration: none;
          transition: all 0.2s ease;
      }

      .tool-badge:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: var(--primary);
          transform: translateY(-1px);
      }

      .section-title {
          text-align: center;
          font-size: 2.5rem;
          margin-bottom: 3rem;
          background: linear-gradient(45deg, #ffffff, #8b5cf6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .tools-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 2rem;
          margin-bottom: 4rem;
      }

      .tool-card {
          background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 20, 25, 0.9));
          border: 1px solid rgba(59, 130, 246, 0.2);
          border-radius: 16px;
          padding: 1.3rem;
          text-align: center;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
      }

      .tool-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
          transition: left 0.6s ease;
      }

      .tool-card:hover::before {
          left: 100%;
      }

      .tool-card:hover {
          transform: translateY(-10px);
          border-color: #3b82f6;
          box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
      }

      .tool-icon {
          width: 80px;
          height: 80px;
          margin: 0 auto 1.5rem;
          background: linear-gradient(45deg, #3b82f6, #8b5cf6);
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          position: relative;
          z-index: 2;
      }

      .tool-card h3 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          color: #ffffff;
          position: relative;
          z-index: 2;
      }

      .tool-description {
          color: #94a3b8;
          margin-bottom: 1.5rem;
          line-height: 1.6;
          position: relative;
          z-index: 2;
      }

      .tool-link {
          display: inline-block;
          padding: 0.75rem 1.5rem;
          background: linear-gradient(45deg, #3b82f6, #8b5cf6);
          color: white;
          text-decoration: none;
          border-radius: 25px;
          font-weight: 600;
          transition: all 0.3s ease;
          position: relative;
          z-index: 2;
      }

      .tool-link:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
      }

      .games-section-popular {
          background: rgba(15, 20, 25, 0.5);
          padding: 4rem 2rem;
          border-top: 1px solid rgba(59, 130, 246, 0.2);
      }

      .section-subtitle-popular {
          color: var(--text-secondary);
          font-size: 1.125rem;
      }

      .games-container {
          max-width: 1200px;
          margin: 0 auto;
      }

      .games-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.5rem;
          margin-top: 3rem;
      }

      .game-card {
          background: rgba(30, 41, 59, 0.6);
          padding: 1.5rem;
          border-radius: 12px;
          border: 1px solid rgba(59, 130, 246, 0.1);
          transition: transform 0.3s ease;
          text-align: center;
      }

      .game-card:hover {
          transform: translateY(-5px);
          border-color: #3b82f6;
      }

      .game-icon {
          font-size: 2rem;
          margin-bottom: 1rem;
      }

      .game-card h4 {
          color: #ffffff;
          margin-bottom: 1rem;
      }

      .game-links {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
      }

      .game-links a {
          color: #94a3b8;
          text-decoration: none;
          padding: 0.5rem;
          border-radius: 6px;
          transition: all 0.3s ease;
          font-size: 0.9rem;
      }

      .game-links a:hover {
          color: #3b82f6;
          background: rgba(59, 130, 246, 0.1);
      }

      .footer {
          background: rgba(15, 20, 25, 0.9);
          padding: 2rem;
          text-align: center;
          border-top: 1px solid rgba(59, 130, 246, 0.2);
          color: #64748b;
      }

      .footer-content {
          max-width: 1200px;
          margin: 0 auto;

          margin-bottom: 2rem;
          text-align: left;
          justify-content: center;
          display: flex;
      }

      .footer-section {
          text-align: center;
      }

      .footer-section h4 {
          color: #3b82f6;
          margin-bottom: 1rem;
      }

      .footer-section ul {
          list-style: none;
          line-height: 1.8;
          display: flex;

      }

      .footer-section ul li {
          margin: 0 15px;

      }



      .footer-section a {
          color: #94a3b8;
          text-decoration: none;
          transition: color 0.3s ease;
      }

      .footer-section a:hover {
          color: #3b82f6;
      }

      .footer-bottom {
          border-top: 1px solid rgba(59, 130, 246, 0.2);
          padding-top: 2rem;
          text-align: center;
      }














      .pres-b {
          padding: 6rem 12rem;
          background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.02));

          margin-bottom: 4rem;
      }

      .pres-b h2 {
          color: #d9e1fb;
          font-size: 2.2rem;
          font-weight: 700;
          margin: 50px 0 25px 0;
          position: relative;
          padding-left: 20px;
      }

      h2::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 60%;
          background: linear-gradient(135deg, #3b82f6, #1e40af);
          border-radius: 3px;
      }

      .pres-b h3 {
          color: #c7cde1;
          font-size: 1.5rem;
          font-weight: 600;
          margin: 35px 0 15px 0;
          padding-bottom: 10px;
          border-bottom: 2px solid #e5e7eb26;
      }

      .pres-b p {
          color: grey;
          font-size: 1.125rem;
      }

      .pres-b ul {
          color: grey;
      }

      .ul-green {
          background: linear-gradient(135deg, #131823 0%, #1c3264 100%);
          border: 2px solid #10b981;
          padding: 30px;
          border-radius: 16px;
          margin: 30px 0;
          box-shadow: 0 8px 20px rgba(16, 185, 129, 0.1);
      }

      .faq-section {
          background: #172340;
          padding: 40px;
          border-radius: 16px;
          margin: 40px 0;
      }

      .faq-item {
          margin: 20px 0;
          padding: 25px;
          background: #1e315e;
          border-radius: 12px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
          border-left: 4px solid #3b82f6;
          transition: all 0.3s ease;
      }

      .faq-item:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      }

      .links-section-int {
          background: linear-gradient(135deg, #131823 0%, #1c3264 100%);
          padding: 30px;
          border-radius: 16px;
          border: 1px solid #10b981;
      }

      .links-section-int ul {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          margin-top: 20px;
      }

      .links-section-int .links-a {
          color: #1e40af;
          text-decoration: none;
          padding: 12px 18px;
          background: rgb(227, 232, 242);
          border-radius: 8px;
          transition: all 0.3s ease;
          display: block;
          text-align: center;
          font-weight: 500;
          align-content: center;
      }

      .links-section-int .links-a:hover {
          background: white;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }


      .links-section-int .links-a a {
          color: #10b981;
          font-weight: 600;
      }

      .img-deco-one {
          position: absolute;
          top: 20%;
          left: 5%;
          width: 250px;
      }

      .img-deco-two {
          position: absolute;
          top: 40%;
          right: 5%;
          width: 250px;
      }

      .leaderboard-header h2::before {
          display: none;
      }


      .container-search-d:hover {
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
      }


      .main-header {
          padding: 6rem 2rem 4rem;
          text-align: center;
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
      }

      .main-header::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image:
              repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(99, 102, 241, 0.03) 100px, rgba(99, 102, 241, 0.03) 200px),
              repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(139, 92, 246, 0.03) 100px, rgba(139, 92, 246, 0.03) 200px);
          pointer-events: none;
      }

      .header-content {
          max-width: 800px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
      }

      .main-header h1 {
          font-size: 3rem;
          margin-bottom: 1.5rem;
          background: linear-gradient(45deg, #ffffff, #3b82f6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          font-weight: 800;
      }

      .main-header p {
          font-size: 1.2rem;
          color: #94a3b8;
          line-height: 1.6;
          max-width: 600px;
          margin: 0 auto;
      }

      .content-wrapper {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 2rem;
      }

      .section {
          margin-bottom: 4rem;
      }

      .section-title {
          font-size: 2.2rem;
          font-weight: 700;
          margin-bottom: 2rem;
          background: linear-gradient(45deg, #ffffff, #8b5cf6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          position: relative;
          padding-left: 20px;
      }

      .section-title::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 60%;
          background: linear-gradient(135deg, #3b82f6, #1e40af);
          border-radius: 3px;
      }

      .games-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 1.5rem;
          margin-bottom: 2rem;
      }

      .game-link {
          background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 20, 25, 0.9));
          border: 1px solid rgba(59, 130, 246, 0.2);
          border-radius: 16px;
          padding: 1.5rem;
          text-decoration: none;
          color: #e2e8f0;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
          display: block;
      }

      .game-link::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
          transition: left 0.6s ease;
      }

      .game-link:hover::before {
          left: 100%;
      }

      .game-link:hover {
          transform: translateY(-5px);
          border-color: #3b82f6;
          box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
      }

      .game-icon {
          font-size: 2rem;
          margin-bottom: 1rem;
          display: block;
      }

      .game-name {
          font-size: 1.2rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
      }

      .game-description {
          color: #94a3b8;
          font-size: 0.9rem;
      }

      .tools-overview {
          background: rgba(15, 20, 25, 0.5);
          border-radius: 16px;
          padding: 2rem;
          border: 1px solid rgba(59, 130, 246, 0.2);
      }


      .tools-grid-overview {
          display: flex;
          flex-direction: column;
          gap: 15px;
      }

      .game-row {
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 20px;
          padding: 20px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
      }

      .game-row:hover {
          background: rgba(255, 255, 255, 0.08);
          transform: translateY(-2px);
      }

      .game-title {
          display: flex;
          align-items: center;
      }

      .game-title a {
          color: #00d4ff;
          text-decoration: none;
          font-weight: bold;
          font-size: 1.1rem;
      }

      .tools-available {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
      }

      .tool-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 12px;
          border-radius: 6px;
          font-size: 0.9rem;
          text-decoration: none;
          transition: all 0.3s ease;
      }

      .tool-available {
          background: rgba(0, 255, 0, 0.1);
          border: 1px solid rgba(0, 255, 0, 0.3);
          color: #00ff00;
      }

      .tool-available:hover {
          background: rgba(0, 255, 0, 0.2);
          transform: scale(1.02);
      }

      .tool-unavailable {
          background: rgba(255, 0, 0, 0.1);
          border: 1px solid rgba(255, 0, 0, 0.3);
          color: #ff6666;
          cursor: not-allowed;
      }

      .status-icon {
          font-size: 0.8rem;
      }

      .show-more-btn {
          text-align: center;
          margin-top: 30px;
      }

      .show-more-btn button {
          background: linear-gradient(135deg, #00d4ff, #0099cc);
          color: white;
          border: none;
          padding: 12px 24px;
          border-radius: 8px;
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .show-more-btn button:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
      }

      .more-games {
          margin-top: 1rem;
      }

      .game-batch {
          display: none;
          animation: fadeInUp 0.5s ease forwards;
      }

      .game-batch.visible {
          display: contents;
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(20px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      @media (max-width: 768px) {
          .main-header h1 {
              font-size: 2rem;
          }

          .main-header p {
              font-size: 1rem;
          }

          .content-wrapper {
              padding: 0 1rem;
          }

          .show-more-btn button {
              padding: 0.6rem 1.5rem;
              font-size: 0.9rem;
          }
      }

      @media (max-width: 480px) {
          .tool-item {
              font-size: 0.7rem;
              padding: 0.3rem 0.4rem;
          }

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


      .leaderboard {
          background: linear-gradient(45deg, #1a202c, #2d3748, #4a5568);
          background-size: 200% 200%;
          animation: gradientBG 15s ease infinite;
          color: white;
          border-radius: 16px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          width: 600px;
      }

      .profiltopl {
          display: flex;
          justify-content: space-around;
      }

      .result {
          justify-content: space-around;
          display: none;
          width: 800px;
          align-content: center;
      }

      table {
          border-collapse: collapse;
          border: 2px solid rgb(140 140 140);
          font-family: sans-serif;
          font-size: 0.8rem;
          letter-spacing: 1px;
      }

      caption {
          caption-side: bottom;
          padding: 10px;
          font-weight: bold;
      }

      thead,
      tfoot {
          background-color: rgb(228 240 245);
      }

      th,
      td {
          border: 1px solid rgb(160 160 160);
          padding: 8px 10px;
      }

      td:last-of-type {
          text-align: center;
      }

      tbody>tr:nth-of-type(even) {
          background-color: #1e315e;
      }

      tbody>tr:nth-of-type(first) {
          background-color: #1e315e;
      }


      tfoot th {
          text-align: right;
      }

      tfoot td {
          font-weight: bold;
      }

      @media (max-width: 768px) {
          .hero h1 {
              font-size: 1.5rem;
          }

          .nav-links {
              display: none;
          }

          .mobile-menu-btn {
              display: block;
          }

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

          .nav-container {
              padding: 0 1rem;
          }

          .dropdown-menu {
              position: static;
              opacity: 1;
              visibility: visible;
              transform: none;
              box-shadow: none;
              border: none;
              background: transparent;
              padding: 0;
          }
      }



      .profiltopl {
          display: flex;
          justify-content: space-around;
      }

      .result {
          width: 800px;
          align-content: center;
      }

      .fullinfol,
      .fullinfod {
          border: 4px solid #fff;
          background: #12121200;
          border-radius: 16px;
          padding-top: 60px;
          padding-bottom: 40px;
          padding-left: 60px;
          padding-right: 60px;
          position: relative;
      }

      .lastplayedd {
          display: block;
          top: 7px;
          position: absolute;
          color: rgba(255, 255, 255, 0.37);
          left: 15px;
          font-size: 0.9em;
          font-weight: 600;
      }

      .guardian-info {
          position: relative;
          text-align: center;
      }

      .patnamed {
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .regroup-timewd {
          text-align: center;
          margin-top: 40px;
      }

      .sinceyeard {
          font-size: 1.3rem;
          color: white;
          font-style: italic;
      }

      .totalhoursd {
          text-shadow: 0 0 7px #fff;
          font-size: 6rem;
          font-weight: 700;
          color: white;
      }

      .totaltimeconverd {
          font-weight: 600;
          color: white;
          margin-top: -10px;
      }

      .trait_dessus {
          border-top: 1px solid #ffffff3b;
          width: 40%;
          margin: auto;
          margin-top: 40px;
      }

      .characters-info {
          margin-top: 20px;
      }

      .characters-titled {
          text-align: center;
          color: white;
          font-size: 1.3rem;
      }

      .glob-characterd {
          display: block;
      }

      .characterd {
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          color: white;
          padding: 15px;
          margin-bottom: 10px;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          border: 1px solid #ffffff;
          font-weight: 600;
          width: 280px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 20px;
      }

      .characterd>div {
          padding: 2px;
          margin: 5px 0;
      }



      .race-human {
          position: relative;
          /* Assurez-vous que l'élément parent a une position relative */
      }

      .race-human::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('https://wastedondestiny.com/generated/2770607176.jpg');
          background-size: cover;
          /* Adaptez selon vos besoins */
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.5;
          /* Ajustez l'opacité selon vos besoins */
          z-index: -1;
          /* Assurez-vous que le pseudo-élément est derrière le contenu */
      }


      .race-awoken {
          position: relative;
      }

      .race-awoken::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('https://wastedondestiny.com/generated/2770607176.jpg');
          background-size: cover;
          /* Adaptez selon vos besoins */
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.5;
          /* Ajustez l'opacité selon vos besoins */
          z-index: -1;
          /* Assurez-vous que le pseudo-élément est derrière le contenu */
      }


      .race-exo {
          position: relative;
      }

      .race-exo::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('https://wastedondestiny.com/generated/2770607178.jpg');
          background-size: cover;
          /* Adaptez selon vos besoins */
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.5;
          /* Ajustez l'opacité selon vos besoins */
          z-index: -1;
          /* Assurez-vous que le pseudo-élément est derrière le contenu */
      }

      .deleted-character {
          position: relative;
      }

      .deleted-character::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('/path/to/deleted-background.jpg');
          background-size: cover;
          /* Adaptez selon vos besoins */
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.5;
          /* Ajustez l'opacité selon vos besoins */
          z-index: -1;
          /* Assurez-vous que le pseudo-élément est derrière le contenu */
      }


      .characterd>div {
          padding: 2px;
          margin: 5px 0;
      }


      .pretextoveralll {
          font-size: 1.3rem;
          color: white;
          font-style: italic;
      }



      .totaltimeconverl {
          color: rgb(155, 162, 174);
          font-weight: 600;
          color: white;
          margin-top: -10px;

      }

      .wastedtimetxtl {
          font-size: 2.5em;
          color: #c4c4c4;
          font-weight: 600;
          margin-bottom: 10px;
          margin-top: 11px;
      }

      .overalll {
          font-size: 1.3rem;
          color: white;
          font-style: italic;
          margin-top: 25px;
          text-align: center;
      }

      .bloc-steamall {
          display: flex;
          margin-top: 35px;
          justify-content: space-around;
      }

      .detail-steambloc {
          text-align: center;
      }

      .cat-resulttitlesteam {
          color: white;
          font-size: 2.1rem;
          font-weight: 700;
      }


      .cat-restultsoussteam {
          color: #c4c4c4;
          font-weight: 700;
      }

      .issteamban {
          text-align: center;
          font-size: 2.1rem;
          font-weight: 700;
          margin-top: 25px;
      }

      .detailsblocksalll {
          display: flex;
          margin-top: 35px;
          justify-content: space-around;
      }

      .details-block {
          text-align: center;

      }

      .categoryconverl {
          color: white;
          margin-bottom: 10px;

          font-size: 0.9em;
      }

      .categoryl {
          color: #c4c4c4;
          font-weight: 700;
      }

      .categoryresultl {
          color: white;
          font-size: 2.1rem;
          font-weight: 700;
      }

      .fullinfol,
      .fullinfod {
          border: 4px solid #fff;
          background: #12121200;
          border-radius: 16px;
          padding-top: 60px;
          padding-bottom: 40px;
          padding-left: 60px;
          padding-right: 60px;
          position: relative;
      }

      .leaderboard-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px;
          margin-bottom: 10px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          transition: all 0.3s ease;
      }

      .leaderboard-item:hover {
          transform: scale(1.02);
          background: rgba(255, 255, 255, 0.1);
      }

      .leaderboard-item-left {
          display: flex;
          align-items: center;
      }

      .leaderboard-item-right {
          display: flex;
          align-items: center;
      }

      .rank {
          font-size: 18px;
          font-weight: bold;
          color: #a0aec0;
          width: 28px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .rank-icon {
          width: 20px;
          height: 20px;
      }

      .rank-icon.gold {
          color: #ffd700;
      }

      .rank-icon.silver {
          color: #c0c0c0;
      }

      .rank-icon.bronze {
          color: #cd7f32;
      }

      .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 12px;
          border: 2px solid #4a5568;
          transition: all 0.3s ease;
      }

      .leaderboard-item:hover .avatar {
          border-color: #fbbf24;
      }

      .name {
          font-size: 16px;
          color: #e2e8f0;
          font-weight: 500;
      }

      .leaderboard-item-right {
          display: flex;
          align-items: center;
      }

      .region {
          font-size: 14px;
          color: #a0aec0;
          font-weight: 500;
          margin-right: 4px;
          /* Espacement minimal */
      }

      .score {
          font-size: 18px;
          font-weight: 600;
          color: #fbbf24;
          background: rgba(251, 191, 36, 0.1);
          padding: 4px 10px;
          border-radius: 20px;
          transition: all 0.3s ease;
      }

      .leaderboard-item:hover .score {
          background: rgba(251, 191, 36, 0.2);
          transform: scale(1.1);
      }

      .resultnamed {
          font-size: 1.4em;
          color: white;
      }






      /* Cibler l'élément de la barre de recherche */
      #gameNameTag:focus-visible {
          outline: none;
          /* Supprimer l'outline par défaut */
      }

      /*
#gameNameTag {
  border: 2px solid violet;

}
*/
      .container-l .result,
      .container-l .error,
      .container-d .error,
      .container-d .result {
          text-align: left;
          background: #f8f8f8;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          margin-top: 20px;
          color: #333;
          display: none;
          /* Hide by default */
      }

      .container-l .loader,
      .container-d .loader {
          width: 50px;
          aspect-ratio: 1;
          border-radius: 50%;
          background:
              radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat,
              conic-gradient(#0000 30%, #ffa516);
          -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
          animation: l13 1s infinite linear;

          margin-top: 10px;
          margin-right: auto;
          margin-left: auto;
      }

      @keyframes l13 {
          100% {
              transform: rotate(1turn)
          }
      }

      .container-l .details-block,
      .container-d .details-block {
          background: #ffffff;
          color: #000000;
          border-radius: 8px;
          padding: 10px;
          margin: 10px 0;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .container-l .error,
      .container-d .error {
          background-color: #ffcccc;
          color: #990000;
      }



      @keyframes gradientBG {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }








      .link-back {
          margin-left: 1rem;
          margin-right: 1rem;
          margin-bottom: 28px;


      }

      .deleted-character {
          opacity: 0.7;
      }

      .race-unknown {
          border: 1px solid #000000 !important;
      }

      .link-back a {
          color: white;

      }

      .link-back svg {
          vertical-align: middle;
          /* Aligne l'icône avec le milieu du texte */
          margin-right: 4px;
          /* Ajoute un espace entre l'icône et le texte */
      }


      .link-back a:hover {
          color: rgb(255, 187, 0);
      }

      .result {
          justify-content: space-around;
          display: none;
          width: 800px;
          align-content: center;
      }

      .resultlevell {
          background-color: rgb(91, 91, 89);
          padding-left: .5rem;
          padding-right: .5rem;
          border-radius: 9999px;
          border-width: 2px;
          position: absolute;
          margin-top: 120px;
          color: white;

          padding-top: .2rem;
          padding-bottom: .1rem;
          border: 2px solid rgb(255, 255, 255);
      }

      .lpl {
          color: grey;
          font-size: 1.1em;
      }

      .ranknamel {
          font-size: 1.3em;
          color: white;

      }

      .trait_dessus {
          border-top: 1px solid #ffffff3b;
          width: 40%;
          margin: auto;
          margin-top: 40px;
      }



      .globranknamel {
          margin-bottom: 10px;
      }

      .profiltopl {
          display: flex;
          justify-content: space-around;
      }


      .title-rankl {
          font-size: 1.4em;
          color: white;
          margin-bottom: 9px;
      }


      .statsrankl {
          text-align: center;
      }

      .profilicon {
          display: flex;
          justify-content: center;
      }

      .profilicon img {
          border: 2px solid rgb(255, 255, 255);
          border-radius: 1rem;

          width: 130px;
          height: 130px;
      }

      .profilnamesl {
          text-align: center;
      }

      .statsrank1 {
          text-align: center;
      }

      .icon-sum {
          position: relative;
      }

      .winratel {
          display: flex;
          color: white;
          justify-content: center;
      }

      .resultnamel {
          font-size: 1.4em;
          color: white;
          margin-bottom: 9px;
      }

      .resultnamed {
          font-size: 1.4em;
          color: white;

      }


      .resultnamel span {
          color: grey;

      }

      .trophy-icon {
          margin-right: 10px;
          color: #fbbf24;
          animation: bounce 2s infinite;
      }

      @keyframes bounce {

          0%,
          20%,
          50%,
          80%,
          100% {
              transform: translateY(0);
          }

          40% {
              transform: translateY(-10px);
          }

          60% {
              transform: translateY(-5px);
          }
      }

      .leaderboard-header p {
          color: #e2e8f0;
          font-size: 14px;
          opacity: 0.8;
      }

      .leaderboard-list {
          padding: 12px;
      }

      .glob-characterd {
          display: block;
      }

      .characters-titled {
          text-align: center;
          color: white;
          font-size: 1.3rem;
      }

      .characters-dd {
          text-align: center;
          color: white;
      }

      .sinceyeard {
          font-size: 1.3rem;
          color: white;
          font-style: italic;
      }

      .sinceyearl {
          font-size: 1.3rem;
          color: white;
          font-style: italic;
      }

      .regroup-timewd {
          text-align: center;
          margin-top: 55px;
          margin-top: 40px;
      }

      .regroup-timewl {
          text-align: center;
          margin-top: 55px;
      }

      .totalhoursd {
          text-shadow: 0 0 7px #fff;
          font-size: 6rem;
          font-weight: 700;
          color: white;
      }

      .totalhoursd {
          text-shadow: 0 0 7px #fff;
          font-size: 6rem;
          font-weight: 700;
          color: white;
      }


      .totaltimeconverd {
          font-weight: 600;
          color: white;
          margin-top: -10px;
      }

      .totalhoursl {
          text-shadow: rgb(255, 255, 255) 0px 0px 7px;
          font-size: 6rem;
          font-weight: 700;
          color: white;
      }

      .overaltotalhoursl {
          text-shadow: 0 0 7px #fff;
          font-size: 6rem;
          font-weight: 700;
          color: white;
      }

      .overaltotalhoursmtft {
          text-shadow: 0 0 7px #fff;
          font-size: 3rem;
          font-weight: 700;
          color: white;
      }

      .timecharacterd {
          font-size: 1.1em;
      }

      .randld {
          display: flex;
          justify-content: space-between;
      }




      /* mylolmmr */




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

          100% {
              transform: rotate(360deg);
          }
      }

      #loading {
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .loader {
          border: 5px solid #f3f3f3;
          border-top: 5px solid #3498db;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }

      .s003 {
          min-height: 160px;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-align: center;
          align-items: center;
          font-family: poppins, sans-serif;

          background-size: cover;
          background-position: center center;
          padding: 15px
      }

      .s003 form {
          width: 100%;
          max-width: 690px;
          margin-bottom: 0;
      }

      .s003 form .inner-form {
          background: rgba(255, 255, 255, .9);
          display: -ms-flexbox;
          display: flex;
          width: 100%;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-align: center;
          align-items: center;
          box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
          border-radius: 10px;


      }

      .s003 form .inner-form .input-field {
          height: 68px
      }

      .s003 form .inner-form .input-field input {
          height: 100%;
          background: 0 0;
          border: 0;
          display: block;
          width: 100%;
          padding: 10px 32px;
          font-size: 16px;
          color: #555
      }

      .s003 form .inner-form .input-field input.placeholder {
          color: #888;
          font-size: 16px
      }

      .s003 form .inner-form .input-field input:-moz-placeholder {
          color: #888;
          font-size: 16px
      }

      .s003 form .inner-form .input-field input::-webkit-input-placeholder {
          color: #888;
          font-size: 16px
      }

      .s003 form .inner-form .input-field input:hover,
      .s003 form .inner-form .input-field input:focus {
          box-shadow: none;
          outline: 0;
          border-color: #fff
      }

      .s003 form .inner-form .input-field.first-wrap {
          width: 200px;
          border-right: 1px solid rgba(0, 0, 0, .1)
      }

      .s003 form .inner-form .input-field.first-wrap .choices__inner {
          background: 0 0;
          border-radius: 0;
          border: 0;
          height: 100%;
          color: #fff;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          padding: 10px 30px
      }

      .s003 form .inner-form .input-field.first-wrap .choices__inner .choices__list.choices__list--single {
          display: -ms-flexbox;
          display: flex;
          padding: 0;
          -ms-flex-align: center;
          align-items: center;
          height: 100%
      }

      .s003 form .inner-form .input-field.first-wrap .choices__inner .choices__item.choices__item--selectable.choices__placeholder {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          height: 100%;
          opacity: 1;
          color: #888
      }

      .s003 form .inner-form .input-field.first-wrap .choices__inner .choices__list--single .choices__item {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          height: 100%;
          color: #555
      }

      .s003 form .inner-form .input-field.first-wrap .choices[data-type*=select-one]:after {
          right: 30px;
          border-color: #e5e5e5 transparent transparent transparent
      }

      .s003 form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown {
          border: 0;
          background: #fff;
          padding: 20px 30px;
          margin-top: 2px;
          border-radius: 4px;
          box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15)
      }

      .s003 form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown .choices__item--selectable {
          padding-right: 0
      }

      .s003 form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
          background: #fff;
          color: #63c76a
      }

      .s003 form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item {
          color: #555;
          min-height: 24px
      }

      .s003 form .inner-form .input-field.second-wrap {
          -ms-flex-positive: 1;
          flex-grow: 1
      }

      .s003 form .inner-form .input-field.third-wrap {
          width: 120px;
      }

      .s003 form .inner-form .input-field.third-wrap .btn-search {


          border: 0;
          display: block;
          width: 100%;
          top: 30%;
          font-size: 16px;
          color: #5078ef;
          text-align: center;
          height: 100%;
          font-size: 1.5em;
          cursor: pointer;

      }

      .first-input::before {
          content: "";
          position: absolute;
          top: 45%;
          right: 20px;
          border: 8px solid;
          border-top-color: currentcolor;
          border-right-color: currentcolor;
          border-bottom-color: currentcolor;
          border-left-color: currentcolor;
          border-color: #5078ef transparent transparent transparent;
      }

      .s003 form .inner-form .input-field.third-wrap .btn-search svg {
          width: 16px
      }

      /*  .s003 form .inner-form .input-field.third-wrap .btn-search:hover {
background: #1b5e9d;
}

*/
      .s003 form .inner-form .input-field.third-wrap .btn-search:focus {
          outline: 0;
          box-shadow: none
      }

      #mmrResult h2 {
          color: #ffffff !important;
          font-size: 2.6em;
      }

      #mmrResult img {
          width: 200px;
          height: 200px;
      }

      .approximrank {
          font-size: 3.3em;
          color: white;
          margin-top: -15px;
      }

      .rankstats {
          font-size: 3.3em;
          color: white;
          font-weight: 600;
      }

      .helpguide {
          margin-top: 100px;
          color: white;
      }


      #checkanother {
          width: 200px;
          height: 60px;
          margin: auto;
          margin-top: auto;
          background-color: #ae8524;
          margin-top: -30px;
          display: none;
          border-radius: 5px 5px 5px 5px;
      }

      #shareTwitter {
          width: 200px;
          height: 60px;
          margin: auto;
          margin-top: auto;
          background-color: #60a9de;
          margin-top: -30px;
          display: none;
          border-radius: 5px 5px 5px 5px;
      }









      /* Responsive pour la section tools-overview */

      /* Tablettes (768px et moins) */
      @media (max-width: 768px) {
          .tools-overview {
              padding: 1.5rem;
          }

          .game-row {
              grid-template-columns: 1fr;
              gap: 15px;
              padding: 15px;
          }

          .game-title {
              text-align: center;
              margin-bottom: 10px;
          }

          .game-title a {
              font-size: 1rem;
          }

          .tools-available {
              grid-template-columns: repeat(2, 1fr);
              gap: 8px;
          }

          .tool-item {
              padding: 6px 10px;
              font-size: 0.8rem;
          }
      }

      /* Mobiles (480px et moins) */
      @media (max-width: 480px) {
          .tools-overview {
              padding: 1rem;
          }

          .game-row {
              padding: 12px;
              gap: 10px;
          }

          .game-title a {
              font-size: 0.9rem;
          }

          .tools-available {
              grid-template-columns: 1fr;
              gap: 6px;
          }

          .tool-item {
              padding: 8px 12px;
              font-size: 0.85rem;
              justify-content: center;
          }

          .status-icon {
              font-size: 0.9rem;
          }

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

      /* Très petits écrans (360px et moins) */
      @media (max-width: 360px) {
          .tools-overview {
              padding: 0.75rem;
          }

          .game-row {
              padding: 10px;
          }

          .game-title a {
              font-size: 0.85rem;
          }

          .tool-item {
              padding: 6px 8px;
              font-size: 0.8rem;
          }

          .show-more-btn button {
              padding: 8px 16px;
              font-size: 0.85rem;
              width: 100%;
          }
      }

      .content-second {
          padding: 6rem 2rem 0rem;
          text-align: center;
          position: relative;
          overflow: hidden;
      }