@import url('/fonts/fonts.css');

body {
  overflow-x: hidden !important;
}

.navbar-menu a {
text-decoration: none !important;
}

a {
  text-decoration-thickness: 1px !important;
  text-decoration: none;
}

/* TITLE BARS! */
.title-bar {
  position: fixed !important;
  background-color: var(--secondary-color) !important;
  color: var(--primary-color) !important;
  font-weight: bold !important;
  text-align: left !important;
  padding: 2.5px 10px !important;
  width: 100% !important;
  height: 45px !important;
  border-top-left-radius: 0.5vw !important;
  border-top-right-radius: 0.5vw !important;
  top: 0 !important;
  border: none;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important; 
  margin: 0 auto !important; 

  box-shadow: inset 0 1px 0 0 var(--background-color-text), /* Top */
    inset 1px 0 0 0 var(--background-color-text), /* Left */
    inset -1px 0 0 0 var(--background-color-text); /* Right */}

#titlebar-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
}

.titlebar-buttons {
  display: flex !important; /* Ensures buttons are in a row */
  gap: 10px !important; /* Adds a consistent 10px gap between buttons */
  align-items: center !important; /* Centers the buttons vertically */
  justify-content: flex-end !important; /* Align buttons to the right */
  margin-left: auto !important; /* Ensures it stays at the right side */
}

.title-bar svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important; 
  object-fit: contain !important;
}

.titlebar-buttons button {
  width: 32px !important;
  height: 32px !important; 
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  
  display: flex !important;
  justify-content: center !important;
  align-items: center !important; 
}

.title-bar button svg {
  width: 100%;
  height: 100%; 

}
.titlebar-buttons button {
  position: relative;
  display: inline-block;
}

 .tooltiptext {
  visibility: hidden;
  width: fit-content;
  background-color: rgb(36, 36, 36);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.15s;
  opacity: 0;
  white-space: nowrap;
}

.titlebar-buttons button .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.titlebar-buttons button:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}


/* GAME CONTAINER */
#game-container {
  display: grid;
  grid-template-rows: 45px auto; /* Title bar and content area */
  grid-template-columns: 1fr; /* Single column */
  gap: 0; /* No gap between title bar and content */

  width: 100%; /* Full width */
  max-width: 1066.67px; /* Consistent max-width */
  background-color: rgb(12, 12, 12);
  border-radius: 0.5vw;

  justify-items: center; /* Center content horizontally */
  align-items: start; /* Align content to the top */

  box-shadow: inset 0 0 0 1px var(--background-color-text);
  padding: 1px;
  margin: auto;
  transform-origin: center;
  transform: scale(0.95);
}

/* GAME IFRAME */
#game-iframe {
  grid-row: 2; /* Place iframe in the second row */
  background-color: #000; /* Optional: Black background for iframe */
  border: none;
  box-sizing: border-box;
}


.description-container {
  display: grid;
  position: relative;
  grid-template-columns: 39% 59%;
  gap: 2%;
  max-width: 1066.67px; /* Adjust width for scaling */
  min-width: 1066.67px;
  margin: 0 auto;
  padding: 0 20px;
  transform-origin: top center;
  transform: scale(0.95); 
}

.game-container a:hover {
  text-decoration: underline !important;
}

.description {
  font-size: 1.2rem;
  background-color: #0c0c0c;
  color: var(--background-color-text);
  font-weight: bold;
  text-align: left;
  border-radius: 0.5vw;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--background-color-text);
  margin: 0;
  box-sizing: border-box;
  /* Remove padding to prevent excess space */
}

.description p, .description a, .description span{
  color: var(--background-color-text);
}

.description p {
  margin-top: 40px; /* Adjusted margin to avoid overlap */
  padding: 10px; /* Optional: Add padding if you want some spacing inside the paragraph */
}

.description a {
  text-decoration-skip-ink: none !important; /* Firefox fix? */
  text-decoration-thickness: 1px !important;

}
.description-left a:hover {
  text-decoration: underline;
}

.description-head {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--secondary-color);
  color: var(--primary-color) !important;
  font-weight: bold;
  text-align: left;
  padding: 2.5px 10px;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border-top-left-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
  margin: 0;
  box-sizing: border-box;
  font-size: 0.95rem;
  display: flex;
  align-items: center; /* Vertical centering */
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 0 var(--background-color-text), /* Top */
  inset 1px 0 0 0 var(--background-color-text), /* Left */
  inset -1px 0 0 0 var(--background-color-text); /* Right */
}





.description-left {
  overflow: hidden;
  white-space: wrap;
  text-overflow: ellipsis;
}

.description-right {
  white-space: normal !important; /* Allow text to wrap normally */
  word-wrap: break-word; /* Ensure long words break to the next line if necessary */
  word-break: break-word; /* Breaks words at the end of the line */
}
.description-right a { 
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important; /* Only works on first? */

}

.description-container {
  display: grid;
  position: relative;
  grid-template-columns: 39% 59%;
  grid-template-rows: auto auto; /* Add a second row for Related Games */
  gap: 2%;
  max-width: 1066.67px; /* Adjust width for scaling */
  margin: 0 auto;
  padding: 0 20px;
  transform-origin: top center;
  transform: scale(0.95);
}

.description-bottom {
  margin-top: 0.6%;
  grid-column: span 2; /* Make Related Games span both columns */
  grid-row: 2; /* Place in the second row */
}
#relatedGamesContainer {
  display: flex;
  gap: 10px; /* Reduced gap between items */
  justify-content: space-between; /* Ensures equal spacing between images */
  align-items: center; /* Vertically center the items */
  flex-wrap: nowrap; /* Prevent items from wrapping vertically */
  padding: 60px 15px 15px 15px; /* Added 50px top padding (to clear the header) and adjusted others */
  width: 100%; /* Ensure container takes up full width */
  box-sizing: border-box; /* Prevent padding from affecting overall width */
  overflow: hidden; /* Prevent overflow */
}

#relatedGamesContainer a {
  display: inline-block; /* Inline-block to respect layout */
  text-align: center; /* Center text below images */
  color: var(--background-color-text); /* Match text color */
  font-weight: bold;
  text-decoration: none;
  width: calc(25% - 20px); /* Ensure each item takes up 1/4th of the container width */
  padding: 0 5px; /* Reduced horizontal padding inside anchor */
  position: relative; /* Allow absolute positioning of the span */
  box-sizing: border-box;
  transform: none;
}

#relatedGamesContainer img {
  width: 100%; /* Ensure images scale to fit the container */
  max-width: 180px; /* Slightly bigger images */
  height: auto; /* Maintain aspect ratio */
  aspect-ratio: 16/9;
  border-radius: 0.4vw; /* Slight rounding for image edges */
  box-shadow: 0px 0px 7px #000; /* Add shadow */
  outline: 0.25vw solid transparent;
  z-index: 0; /* Ensure images stay behind description */
  transition: 0.15s ease-out;
}

#relatedGamesContainer a:hover {
  transform: scale(1.06);
  color: white;
}

#relatedGamesContainer a:hover span {
  color: white;
  text-shadow: 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;
  transition: 0.15s ease-out;
}

#relatedGamesContainer a:hover img {
  outline: 0.25vw solid #58aafc;
  box-shadow: 1px 1px 12px #58aafc, 1px 1px 10px #58aafc;
}

#relatedGamesContainer span.game-name {
  position: absolute; /* Position the name over the image */
  bottom: 7px; /* Near the bottom of the image */
  left: 17px; /* Align text to the left */
  font-size: 0.85rem; /* Smaller text */
  color: transparent; /* Match description text color */
  text-shadow: none; /* Optional: Add a text shadow for readability */
  white-space: nowrap; /* Keep text on one line */
}




/* SCROLL BARS! */

/* Total scrollbar width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px; /* For horizontal scrollbar */
}

/* Scrollbar track */
::-webkit-scrollbar-track {
  background: #3c3c3c; 
  border-radius: 0px;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
  background: #8b8b8b; 
  border-radius: 10px;
}

/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #9d9d9d; 
}

/* Scrollbar corner (for both horizontal and vertical scrollbars) */
::-webkit-scrollbar-corner {
  background: transparent;
}



#navbar-container {
  width: 100%;
  height: 11vh !important;
  background-color: var(--secondary-color);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

body {
  background-image: url("/ .png");
  font-family: "M Plus Rounded 1c", sans-serif;
  background-position: center;
  background-color: #141414;
  color: white;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  /* Enable scrolling for the entire page */
}

.navbar-spacer {
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  /* Reduce margin to minimize empty space */
}

button {
  padding: 10px 20px;
  margin: 0 10px;
  border: 2px solid var(--secondary-color);
  border-radius: 5px;
  background-color: transparent;
  color: var(--secondary-color);
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
  width: 220px;
  height: 50px;
  text-align: center;
}

.selected {
  background-color: var(--secondary-color) !important;
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

#primary-button:hover, #backup-button:hover {
  background-color: var(--secondary-color) !important;
  color: var(--primary-color) !important;
}

#issue-button{
  color: black;
}

#issue-button:hover{
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
}

#game-iframe {
  margin-top: -1px;
  border: 0;
  background-image: url('/loading.png');
  background-size: auto;
  background-position: 50%;
}

.box-16-9 {
  position: absolute;
  top: 175px; /* Aligns with the top of the iframe */
  left: calc(50% + 400px + 25% - 200px - 125px); /* Move the box to the right by its full width */
  width: 250px; /* Fixed width for the box */
  height: auto; /* Adjust height based on the image aspect ratio */
  background-color: var(--secondary-color); 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Text at the bottom */
  text-align: center;
  overflow: hidden; /* Hide any overflow from the image */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.box-16-9 img {
  width: 100%;
  height: auto; /* Adjust height based on the 16:9 aspect ratio */
  aspect-ratio: 16 / 9; /* Ensure the image maintains a 16:9 aspect ratio */
  object-fit: cover; /* Ensures the image covers the entire area */
}

.box-16-9 p {
  margin: 0;
  padding-bottom: 5px;
  width: 100%;
  background-color: var(--secondary-color); /* Semi-transparent background for text */
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-size: large;
  font-weight: bold;
}

.box-16-9 p:hover {
  text-decoration: underline !important;
}
.box-16-9 button:hover {
  text-decoration: underline !important;
}

.fixed-background {
  position: fixed; /* Fixes the position relative to the viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  z-index: -999 !important; /* Ensures it's behind other content */
  visibility: visible !important;
  background-size: cover; /* Scale the image to cover the entire div */
  background-repeat: repeat !important; /* Repeat the image */
  background-position: center; /* Center the image */
}