@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrThin-2OXy8.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

/* Powerr ExtraLight (weight 200) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrExtraLight-8MWBD.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

/* Powerr Light (weight 300) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrLight-Yz8wj.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

/* Powerr Regular (weight 400) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrRegular-MVzle.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Powerr Medium (weight 500) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrMedium-rgWoO.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Powerr SemiBold (weight 600) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrSemiBold-K75eo.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Powerr Bold (weight 700) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrBold-Rpz8M.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* Powerr ExtraBold (weight 800) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrExtraBold-BWymV.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

/* Powerr Black (weight 900) */
@font-face {
  font-family: "Powerr";
  src: url("fonts/PowerrBlack-1GLyL.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

    body {
        font-family: "Powerr", sans-serif;
        font-weight: 400; /* Regular by default */
        text-align: center;
        background-image: url("images/bg.jpg");
        background-repeat: repeat-y; /* Repeat vertically only */
        background-position: center top; 
        background-size: cover;
        margin: 0;
    }

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: url("images/top-sprite.png") no-repeat;
        width: 240px;
        height: 115px;
    }

        /* Top right sprite (flipped horizontally) */
    body::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        background: url("images/top-sprite.png") no-repeat;
        transform: scaleX(-1); /* Flips the image horizontally */
        width: 240px;
        height: 115px;
    }

    h1 {
        margin: 20px 0;
      }

      img.gameidlist {
        margin-top: -5rem;
        margin-bottom: -9rem;
        width: 55%;
    }

      img.hrline {
        width: 800px;
        margin: 2rem;
    }
      
      .top-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: url('images/top-banner.png') no-repeat center;
        background-size: contain;
        padding: 23px;
        width: 900px;
        margin: 0 auto -9px auto;
        z-index: 5;
        position: relative;
    }
      
      .top-banner img {
        width: 100%;
        height: auto;
        display: block;
      }

      .lsprite {
        max-width: 25px; /* Adjust size as needed */
        height: auto;
        transform: scaleX(-1); /* Flips the image horizontally */
      }
      
      /* Right sprite image styling with horizontal flip */
      .rsprite {
        max-width: 25px; /* Adjust size as needed */
        height: auto;

      }
      
      .top-banner p {
        margin: 0;
        font-size: 36px;
        font-weight: bold;
        background: linear-gradient(0deg, #bf7102, #f3ad5d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
      }
    
      
      #table-container {
        height: 500px;
        overflow-y: auto;
        margin: auto;
        max-width: 800px;
        border: 1px solid #bf710033;
        z-index: 4;
        position: relative;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
        padding: 8px;
        text-align: center;
        font-weight: bold;
    }

td {
    border: 1px solid #bf710033;
    font-family: sans-serif;
}
    
    th {
        background-color: #bf7102;
        color: #fdf298;
    }
    /* Sentinel element to trigger lazy loading */
    #sentinel {
      height: 20px;
    }

    #namesTable thead th {
        position: sticky;
        top: 0;
        z-index: 2; /* Keeps them above the table body rows */
      }

    /* Odd rows (1st, 3rd, 5th, etc.) get background color #fffbda */
    #namesTable tbody tr:nth-child(odd) {
        background-color: #fffbda;
        color: #bf7102; /* Font color */
    }

    /* Even rows (2nd, 4th, 6th, etc.) get background color #f2dfaf */
    #namesTable tbody tr:nth-child(even) {
        background-color: #f2dfaf;
        color: #bf7102; /* Font color */
    }

    .game-id-row {
        position: relative; /* Establishes positioning context */
    }

/* Enable smooth touch scrolling on iOS */
#table-container {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Custom scrollbar styling for WebKit browsers (desktop) */
  #table-container::-webkit-scrollbar {
    width: 12px;
  }
  
  #table-container::-webkit-scrollbar-track {
    background: #bf7102;
  }
  
  #table-container::-webkit-scrollbar-thumb {
    background: #fbe389;
    border-radius: 6px;
  }
  
  #table-container::-webkit-scrollbar-thumb:hover {
    background: #f3d466;
  }
  
  /* For Firefox (desktop) */
  #table-container {
    scrollbar-width: thin;
    scrollbar-color: #fbe389 #bf7102;
}
  
/* Container for the buttons */
.game-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5rem;
    z-index: 6;
    position: relative;
}
    
  /* Remove default link styles and make it behave like a button */
  .gameid-button {
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block;
  }
  
  /* Adjust the image size as needed */
  .btn {
    width: 80%;  /* Adjust width as needed */
    height: auto;
  }
  
  /* Target the first cell in every table row */
#namesTable th:first-child {
    position: relative;
  }
  
  /* Use a pseudo-element to insert the overlay image */
  #namesTable th:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 115%;
    height: 100%;
    background: url("images/leftnumber.png") no-repeat center;
    background-size: cover;
    z-index: 0;
    opacity: 1;
    /* color: #bf7102; */
}
  
  /* Ensure the numbering text is above the overlay */
  #namesTable th:first-child span {
    position: relative;
    z-index: 1;
    /* Optional styling for the text */
    color: #bf7102; /* or your desired color */
    font-weight: bold;
  }


  img.makkah {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

img.pattern {
    width: 100vw;
}

.image-overlay {
    width: 100%;
    overflow: clip;
    margin-top: -31rem;
    padding: 0;
    position: relative;
}

@media only screen and (max-width: 768px) {

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: url("images/top-sprite.png") no-repeat;
        background-size: contain;
        width: 25%;
    }

    body::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        background: url("images/top-sprite.png") no-repeat;
        transform: scaleX(-1);
        background-size: contain;
        width: 25%;
    }

    body {
        font-family: "Powerr", sans-serif;
        font-weight: 400;
        text-align: center;
        background-image: url("images/bg.jpg");
        background-repeat: repeat-y;
        background-position: center top;
        background-size: cover;
        margin: 0;
        font-size: 9px;
    }

    .btn {
        width: 70%;
        height: auto;
    }

    .game-buttons {
        display: flex;
        justify-content: center;
        gap: 0;
        margin-top: 5rem;
        z-index: 6;
        position: relative;
    }

    img.hrline {
        width: 80%;
        margin: 2rem;
    }

    .top-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: url('images/top-banner.png') no-repeat center;
        background-size: contain;
        padding: 23px;
        width: 80%;
        margin: 0 auto -18px auto;
        z-index: 5;
        position: relative;
    }

    .top-banner p {
        margin: 0;
        font-size: 12px;
        font-weight: bold;
        background: linear-gradient(0deg, #bf7102, #f3ad5d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .lsprite {
        max-width: 12px;
        height: auto;
        transform: scaleX(-1);
    }

    .rsprite {
        max-width: 12px;
        height: auto;
    }

    img.gameidlist {
        margin-top: -1rem;
        margin-bottom: -3rem;
        width: 55%;
    }

    #table-container {
        height: 500px;
        overflow-y: auto;
        margin: auto;
        max-width: 85%;
        border: 1px solid #bf710033;
        z-index: 4;
        position: relative;
    }

    .image-overlay {
        width: 100%;
        overflow: clip;
        margin-top: -7rem;
        padding: 0;
        position: relative;
    }
}