@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
    :host,html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        font-family: Poppins,sans-serif;
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-tap-highlight-color: transparent
    }
    /* width */
    ::-webkit-scrollbar {
      width: 0px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      opacity: 1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: rgba(25, 140, 255, 0.8);
      border-radius: 15px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
 body {
      margin: 0;
      font-family: Poppins,sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
	 background: #000;
    }
    header {
      background: #000;
      color: #fff;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header nav a {
      color: #fff;
      margin-left: 1rem;
      text-decoration: none;
    }
    main {
      flex: 1;
      padding: 1rem;
      max-width: 80%;
      margin: 0 auto;
    }


/*----------------CONTACT -------------------*/


/* Contact Section */
.contact-section {
  width: 100%;
  max-width: 600px;
  padding: 4rem 1rem;
  text-align: center;
	color: white;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.contact-form input,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  transition: border 0.3s, box-shadow 0.3s;
  outline: none;
  backdrop-filter: blur(4px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}
.textBox2 {
  width: 100%;             /* Full width of parent */
  max-width: 300px;        /* But don’t exceed this */
  
  background: linear-gradient(135deg, rgba(0,242,254,0.1), rgba(79,172,254,0.08));
  border: 1px solid rgba(150,150,150,0.8);
  border-radius: 5px;
  padding: 0.5rem 0.5rem;
  text-align: left;
  box-shadow: 0 0 20px rgba(0,242,254,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*----------------------- CONTACT STYLE END -------------------*/
    .game-list {
      display: grid;
	font-family: Poppins,sans-serif;
      gap: 1rem;
		background: #000000;
		color: #ffffff;
    }
    .game-card {
      background: #000000;
      border: 1px solid #ddd;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .game-info {
      flex: 1 1 auto;
      margin-right: 1rem;
		text-align: left;
		padding-top: 10px;
		
    }
    .stats {
      text-align: left;
      font-size: 0.9rem;
      color: #fff;
    }
.top-bar {
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  
}

.top-bar-logo {
  height: 80px;
  margin: 0 auto;
  width: auto;
}
.buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
	.button {
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.95rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #4facfe, #00f2fe);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.button:hover::before {
  left: 0;
}

.button.primary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.6);
}

.button.outline {
  background: transparent;
  color: white;
  border: 2px solid #00f2fe;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
}

.button.primary:hover,
.button.outline:hover {
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.6);
}
.banner  {
   margin: 0 auto;
		text-align: center;
  }
	.banner p {
  font-size: 1.125rem;
  margin: 0 auto;
		text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
	.banner h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
		text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

/* stat counter styles --------------------------------*/
* {
  box-sizing: border-box; /* Prevents padding from overflowing width */
}

.player-stats-section {
  display: flex;
  flex-direction: column;  /* One column only */
  align-items: center;     /* Center horizontally */
  justify-content: center; /* Optional: vertical center if parent has height */
  gap: 1.5rem;
  padding: 2rem 1rem;
  width: 100%;
  max-width: 500px;        /* Keeps it nice and narrow */
  margin: 0 auto;          /* Centers whole block */
  text-align: center;
}

.stat-card {
  width: 100%;             /* Full width of parent */
  max-width: 200px;        /* But don’t exceed this */
  margin: 0 auto;          /* Center each card */
  background: linear-gradient(135deg, rgba(0,242,254,0.1), rgba(79,172,254,0.08));
  border: 1px solid rgba(0,242,254,0.3);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,242,254,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 30px rgba(0,242,254,0.35);
}
.stat-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #c6f9ff;
  margin-bottom: 0.75rem;
  letter-spacing: 1px;
}
.stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #00f2fe;
  
}

.bottom {
  height: 80px;
	text-align: center;
  width: 100%;
	font-size: 0.7rem;
	color: #ccc;
	padding-top: 20px;
	border-top: solid 1px #333;
}
.game-img {
  width: 100%;
   object-fit: cover;
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}

/* On mobile, make image full width */
@media (max-width: 768px) {
  .game-img {
    width: 100%;
    height: auto;  /* auto keeps aspect ratio */
    max-height: 300px; /* optional: limit height */
  }
}
/* stat counter styles END --------------------------------*/
/* Larger screens: side-by-side cards */
@media (min-width: 600px) {
  .player-stats-section {
    flex-direction: row;
    justify-content: center;
  }
}

    @media (min-width: 600px) {
      .game-list {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 900px) {
      .game-list {
        grid-template-columns: repeat(3, 1fr);
      }
    }
@media (max-width: 480px) {
  .top-bar {
    padding: 1rem;
  }
  
  .buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .button {
    width: 100%;
    text-align: center;
  }


}
@media (max-width: 768px) {
  .buttons {
    padding: 0 10px;   /* 10px gap left & right */
    flex-wrap: wrap;   /* wrap to next line if needed */
  }

  .button {
    flex: 1;           /* optional: make buttons auto-resize */
    text-align: center;
  }
}