/* Reset and basics */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Inter, Arial, sans-serif;
  background-color: #000010;
}

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

/* Layout */
main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1px;
}

main .content {
  display: flex;
  gap: 1px;
  justify-content: center;
  flex-wrap: wrap;
}

.box h2, 
.box p {
  position: relative;
  color: #f7f7f3;
  font-weight: normal;
}

/* Grid section */
.grid-section {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 1px;
}

.grid-item {
  background-color: #fff;
  padding: 1px;
  text-align: center;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: black;
  z-index: 2;
}

/* Playpoints box */
.boxPP {
  position: relative;
  margin: 2px auto 0;
  padding: 10px;
  max-width: 700px;
  width: 90%;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: white; 
  overflow: hidden; 
  border: 1px solid #27282b;
  z-index: 1;
}

.boxPP::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('playpoint.avif') center/cover no-repeat;
  z-index: -2;  
}

.boxPP h2, .boxPP h3 {
  position: relative;
  color: #f7f7f3;
}

/* Buttons */
.buy-now-button {
  position: relative;
  bottom: auto;
  width: auto;
  max-width: 200px;
  margin: 10px auto;
  display: block;
  background-color: #8e0000;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 20px;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

.buy-now-button:hover {background-color: #a70000; transform: scale(1.05);}

.fee-info {  font-size: 12px;  color: #666;}

/* Box image */
.box-image {
  position: relative;
  margin-bottom: 5px;
  z-index: 2; 
  max-width: 40%;
  height: auto;
  opacity: 1; 
}

.box-title {  
  color: white;
  font-size: 24px;
  margin: 10px 0 5px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Metagame */
.metagame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;               
  padding: 0;              
}

/* Forms */
label {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
  color: white;
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

input[type="submit"],
#confirm,
#confirm3 {
  width: 100%;
  color: white;
  padding: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"] {
  background-color: #8e0000;
  font-size: 18px;
}

input[type="submit"]:hover {
  background-color: #a70000;
}

#confirm {
  background-color: #004687;
  font-size: 22px;
}
#confirm:hover {
  background-color: #16348C;
}

#confirm3 {
  background-color: #1E90FF;
  font-size: 18px;
}
#confirm3:hover {
  background-color: #16348C;
}

.hidden-element {
  display: none;
}

/* Form containers */
#form1,
.paypal-box,
.coinbase {
  background-color: rgba(0, 0, 0, 0.8); 
  padding: 15px;
  border: 1px solid #3B3B3B;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  width: 100%;
  color: white;
  margin: 10px 0; 
  box-sizing: border-box;
}

#form1 { max-width: 600px; }
.paypal-box, .coinbase { max-width: 400px; }

/* =========================================
   FAQ SECTION (Liquid Glass)
   ========================================= */
.faq-section {
  max-width: 835px;
  margin: 40px auto;
  padding: 25px;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.faq-section > h3 {
  font-size: 22px;
  color: #fff;
  margin-top: 0;
  margin-bottom: 25px;
  text-align: left;
}

.faq-section a { text-decoration: none; color: inherit; }

.faq-item {
  margin-bottom: 15px;
  padding: 15px;
  display: flex; 
  align-items: flex-start; 
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid #f1c40f; 
  border-radius: 12px;
  transition: all 0.4s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid #f1c40f;
  transform: translateX(5px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.faq-image-box { min-width: 50px; margin-right: 20px; }
.faq-image-box img { width: auto; height: 50px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); margin: 0; }

.faq-content { flex: 1; color: white; }
.faq-content h1, .faq-content h2, .faq-content h4 { 
  margin: 0 0 8px 0; 
  font-size: 16px; 
  color: #f1c40f; 
  cursor: pointer; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
  font-weight: bold; 
}
.faq-content p { 
  margin: 0 0 8px 0; 
  font-size: 14px; 
  color: #fff; 
  line-height: 1.6; 
  opacity: 0.9; 
  font-weight: normal; 
}
.faq-content p:last-child { margin-bottom: 0; }

/* Mobile scaling for FAQ */
@media (max-width: 600px) {
  .faq-section { margin: 20px 15px; padding: 15px; }
}

/* Generic containers */
.container {
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 14px;
  max-width: 700px;
  margin: 10px auto;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Headings */
h2, h4 { color: #f1c40f; font-size: 16px; }
h3 { color: #DBDBDB; font-size: 16px; }

/* =========================================
   LIQUID GLASS FOOTER STYLES
   ========================================= */

.glass-footer {
  position: relative;
  width: 100%;
  margin-top: 50px;
  padding: 50px 20px 20px;
  overflow: hidden;
  /* Glass effect */
  background: rgba(255, 255, 255, 0.03); 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 10;
}

/* Animated Liquid Orbs behind the glass */
.liquid-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  opacity: 0.4;
  animation: liquidFloat 12s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: #004687; /* Site Blue */
  top: -50px;
  left: -50px;
}

.orb-2 {
  width: 250px;
  height: 250px;
  background: #8e0000; /* Site Red */
  bottom: -50px;
  right: -50px;
  animation-duration: 15s;
  animation-direction: alternate-reverse;
}

@keyframes liquidFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.1); }
  100% { transform: translate(-30px, 60px) scale(0.9); }
}

/* Footer Grid Layout */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

.footer-group {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Headings */
.footer-group h4 {
  color: #f1c40f; /* Gold */
  font-size: 16px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.footer-group h4::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 25px;
  height: 2px;
  background: #f1c40f;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Links with fluid hover effect */
.footer-group a {
  color: #DBDBDB;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-group a:not(.social-btn)::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(241, 196, 15, 0.8);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 2px;
}

.footer-group a:not(.social-btn):hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}

.footer-group a:not(.social-btn):hover::before {
  width: 100%;
}

/* Social Media Glass Buttons */
.social-icons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.social-btn {
  position: relative; 
  width: 45px;
  height: 45px;
  border-radius: 50%; /* Makes the container a perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0 !important; 
  
  /* This is the secret: it chops off the square edges of your image! */
  overflow: hidden; 

  /* Glass borders around the image */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.social-btn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Stretches the image to completely fill the circle without squishing it */
  object-fit: cover; 
  margin: 0 !important; 

  /* MAGIC TRICK: Leave this here if you want the black backgrounds to vanish 
     so it looks like glass. If you WANT the buttons to have solid black 
     backgrounds, just delete this line below! */
  mix-blend-mode: screen; 
}

.social-btn:hover {
  border-color: #f1c40f;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 5px 15px rgba(241, 196, 15, 0.5);
}

/* Legal Text */
.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
  z-index: 2;
}

.footer-legal p {
  font-size: 11px;
  color: #888;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

/* Responsive Layout Additions */
@media (min-width: 768px) {
  .footer-group {
    align-items: flex-start;
    text-align: left;
  }
  .footer-group h4::after {
    left: 0;
    transform: none;
  }
  .social-icons {
    justify-content: flex-start;
  }
}

/* Responsive General Settings */
@media (max-width: 768px) {
  main .content {
    flex-direction: column; 
    align-items: center;
  }
  .box {
    width: 100%; 
    max-width: 300px; 
  }
  .buy-now-button {
    max-width: 150px;
  }
}

@media (max-width: 600px) {
  .grid-item { width: 100%; }
}

@media (max-width: 480px) {
  .box { max-width: 100%; }
  .box h2, .box p { font-size: 1em; }
  .boxPP {
    width: 100%;
    max-width: 400px;
    padding: 1px;
    font-size: 0.9em;
  }
}

@media (max-width: 400px) {
  .grid-item { width: 100%; }
}

/* Header */
header {
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  z-index: 10;
}

header img {
  max-width: 300px;
  object-fit: cover;
}

/* Images */
img {
  display: block;
  margin: 0 auto;
  max-width: 150px;
}

.header-logo {
    display: block;
    width: auto;
    height: auto; 
    max-width: 100%; 
    
    /* MOBILE HEIGHT: Set your desired mobile size here */
    max-height: 40px; 
}

/* DESKTOP HEIGHT: For screens 768px and wider */
@media (min-width: 768px) {
    .header-logo {
        max-height: 80px; 
    }
}