/* ==========================================================================
   1. Root Variables & General Reset
   ========================================================================== */

/* Root Variables */
:root {
  --background-color: rgb(5, 5, 5);
  --menu-bg-color: rgb(5, 5, 5);
  --text-color: #e8e8e8;
  --font-family: "AITTA Magpie toes", serif;
  --max-width: 1600px;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--background-color);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   2. Core Layout Components
   ========================================================================== */
/* Flex container for menubar and main content */
.flex-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  flex-direction: row;
}

/* Wrapper for the entire page */
.wrapper {
  display: flex;
  max-width: var(--max-width);
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

/* --- menubar ELEMENTS --- */
.menubar {
  flex: 1;
  background-color: var(--menu-bg-color);
  display: flex;
  flex-direction: column;
  padding: 0.1rem;
  box-sizing: border-box; 
  overflow-y: auto; /* Changed from scroll to auto */
  overflow-x: hidden;
  min-width: 200px;
  left: 0;
  position: relative;
  z-index: 10; /* Ensure menubar is above main-content */
  max-width: 300px;
}

/* Navigation Links */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  margin: 0;
  align-self: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-color);
  font-size: xx-large;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* Hover effect: Apply glow only on hover */
.nav-links a:hover span {
  color: #fff;
  /* Keep color change on hover */
  filter: brightness(120%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  /* Apply glow */
  /* Remove hover-based slide animation */
  animation: slide-back 0.3s ease forwards;
}

/* Add a rule to reset the transform when not hovered, using slide-back */
.nav-links a span {
  text-decoration: none;
  color: var(--text-color);
  font-size: xx-large;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
  transform: translateX(0);
  animation: slide-back 0.3s ease forwards;
}

/* Active link text: Apply slide and glow */
.nav-links a span.active-link-text {
  color: #fff;
  /* Keep color change for active state */
  filter: brightness(120%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  /* Apply glow */
  animation: slide-right 0.3s ease forwards;
  /* Apply slide-right animation */
}

/* Ensure glow is removed when hovering off a non-active link */
.nav-links a:not(.active) span:hover {
  filter: brightness(120%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  /* Re-apply glow on hover for non-active */
}

/* Ensure glow is kept on active link text even when not hovered */
.nav-links a span.active-link-text {
  filter: brightness(120%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.nav-links a:hover {
  color: #fff;
}

.nav-links img.icon {
  width: 1.5rem;
  height: auto;
  margin-right: 5%;
}

/* Social Icons */
.some-icons {
  width: fit-content;
  max-width: max-content;
  height: auto;
  padding: 15% 24% 5% 24%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8% 8%;
  justify-items: center;
  align-items: center;
}

#unreal-logo {
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 4%;
  pointer-events: none;
}

.some-icons a,
.some-icons img.unreal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  height: auto;
  margin: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
  color: inherit;
  text-decoration: none;
}

.some-icons a:hover {
  transform: scale(1.08);
  filter: brightness(120%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.some-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tooltip for Steam Icon */
.some-icons .steam-icon .tooltip {
  position: absolute;
  bottom: 100%;
  /* Position above the icon */
  left: 50%;
  /* Start from the center of the icon */
  transform: translateX(-50%);
  /* Center the tooltip horizontally */
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  font-family: "AITTA Magpie toes", serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2000;
  width: fit-content;
  text-align: center;
  transform-origin: center bottom;
}

.some-icons .steam-icon:hover .tooltip {
  opacity: 1;
  visibility: visible;
  bottom: calc(100%);
  /* Adjust the distance from the icon */
}

/* Other icons */
.other-icon {
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity */
}

/* When hovering steam icon specifically, darken other icons */
.some-icons:has(.steam-icon:hover) .other-icon:not(.steam-icon *) {
  opacity: 0.1;
}

/* Keep steam icon and its tooltip fully visible when hovered */
.some-icons .steam-icon:hover img,
.some-icons .steam-icon:hover .tooltip {
  opacity: 1 !important;
}

/* Ensure steam icon and its tooltip stay visible */
.some-icons .steam-icon:hover,
.some-icons .steam-icon:hover .tooltip {
  opacity: 1 !important;
}

/* Hide tooltip on mobile */
@media (max-width: 768px) {
  .some-icons .steam-icon .tooltip {
    display: none;
  }
}

.logo.desktop-only {
  display: block;
  width: auto;
  max-width: 80%;
  height: auto;
  margin: 0;
  position: relative;
  overflow: visible;
  align-self: center;
}

.logo.desktop-only::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/backgrounds/forest-dark-square.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  border-radius: 5px;
  margin-left: 16%;
}

.main-logo {
  width: 100%;
  max-width: fit-content;
  height: auto;
  object-fit: contain;
  z-index: 1;
  position: relative;
  transition: transform 0.3s ease, opacity 0.4s ease-in-out;
  transform-origin: top center;
}

.main-logo:hover {
  transform: scale(1.07);
}

@media (max-width: 768px) {
  .logo.desktop-only {
    display: none;
    /* Hide the logo on mobile */
  }
}

.page-title {
  font-size: 2rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;

  h2 {
    font-size: 2rem;
  }
}

/* --- MAIN CONTENT ELEMENTS --- */

/* Main Content */
.main-content {
  flex: 5;
  padding: 0.6rem;
  box-sizing: border-box;
  overflow-y: auto;
  /* Allow scrolling for game and team pages */
  background-color: rgb(5, 5, 5);
    position: relative; /* Ensure it participates in stacking context */
  z-index: 0;         /* Set a z-index lower than the menubar's */
}

/* Page Content Wrapper */
.page-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  height: auto;
  box-sizing: border-box;
}

/* Grid container adjustments for all pages */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  width: 100%;
  padding-inline: 4rem;
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0;
  justify-content: center;
  margin-bottom: 3vh;
}

/* ==========================================================================
   3. Page Specific Styles
   ========================================================================== */

/* Home Section */
#home {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgb(5, 5, 5);
}

.home-image-container {
  position: relative;
  top: 0;
  right: 0;
  width: auto;
  max-height: 100vh;
  display: contents;
  overflow: hidden;
  background-color: rgb(5, 5, 5);
  z-index: 0;
}

.home-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 450px;
  z-index: 3;
  animation: fade-in 0.5s ease-in-out;
}

.home-video {
  width: auto;
  height: 100vh;
  object-fit: cover;
  position: relative;
  top: 0;
  left: inherit;
  z-index: 0;
  animation: fade-in 0.5s ease-in-out;
  filter: brightness(1) contrast(0.97);
}

.home-image {
  /* This is shown if the video is not playing*/
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  animation: fade-in 0.5s ease-in-out;
}

/* Trailer Section */
#trailer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.hero-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90%;
  max-height: 60vh;
  overflow: hidden;
  /* border: 1px solid #3b3b3b; */
  box-shadow: 0 0 30px rgba(235, 243, 0, 0.2);
}

.hero-video {
  display: block;
  position: relative;
  /* Change to relative */
  width: 100%;
  /* Make video fill container */
  height: auto;
  /* Maintain aspect ratio */
  min-height: 100%;
  /* Ensure video covers the container */
  object-fit: cover;
  background-color: rgb(5, 5, 5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/*==================================
 ========== Game Section ===========
 =================================== */
#game {
  background-image: url("images/game-page/hayfield-horros.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

/* Dimming overlay */
#game::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  /* Lower z-index than text content */
}

/* Text content container */
#game>* {
  position: relative;
  /* Creates a new stacking context */
  z-index: 2;
  /* Higher than the overlay */
}

/* Game item adjustments */
.game-item {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1000 / 715;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  box-sizing: border-box;
  border: 2px solid rgba(52, 63, 80, 0.382);
  padding: 1rem;
  justify-content: flex-start;
  /* Aligns content to top */
  align-items: flex-start;
  /* Aligns items to left */
}

.game-item ul {
  list-style: none;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  line-height: 1em;
  margin: 1.5rem 0;
}

.game-item p {
  font-size: 98%;
  line-height: 1.5;
  margin: 0.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  text-align: end;
  flex-direction: column;
  justify-content: center;
}

.origins-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  /* Subtract twice the padding you want */
  max-width: 90%;
  /* Prevent it from getting too wide */
  margin: 0 auto;
  /* Center horizontally */
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  color: var(--text-color);
  z-index: 2;
  border-radius: 5px;
  box-sizing: content-box;

  li {
    margin: 1rem 0;
  }
}



.character-image {
  aspect-ratio: 1000 / 518;
}

.character-text-box {
  position: absolute;
  display: flex;
  padding: 0;
  color: var(--text-color);
  z-index: 2;
  border-radius: 5px;
  overflow-y: hidden;
  max-width: 60%;
  text-align: end;
  flex-direction: column;
  justify-content: center;
}

.character-text-box h1 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem 0;
}

.character-text-box p {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
}

#game-leif .character-text-box {
  left: 5%;
  top: 20%;
  text-align: end;
  align-self: center;
  display: flex;
  position: relative;
}

#game-osmo .character-text-box {
  left: 0;
  bottom: 0;
  text-align: end;
  align-self: start;
  display: flex;
  position: relative;
  vertical-align: unset;
}

#game-landlord .character-text-box {
  display: flex;
  overflow-y: hidden;
  max-width: 90%;
  text-align: start;
  flex-direction: column;
  justify-content: center;
}

#game-aitta {
  background-image: url("images/game-page/aitta-night.jpg");
}

#game-story {
  background-image: url("images/game-page/open-book.jpg");
}

#game-elise {
  background-image: url("images/game-page/elise-prison.jpg");
}

#game-leif {
  background-image: url("images/game-page/leif-introduction-no-text.jpg");
}

#game-osmo {
  background-image: url("images/game-page/osmo-introduction-no-text.jpg");
  flex-direction: column-reverse;
}

#game-landlord {
  background-image: url("images/game-page/farmowner-intro-no-text.jpg");
  flex-direction: column-reverse;
}

.concept-art {
  aspect-ratio: 1920 / 1080;
}

/* Portrait item that spans 2 rows */
.portrait-item {
  grid-row: span 2;
  aspect-ratio: 1080/1280;
  background-position: top center;
}

/*==================================
 ========== TEAM PAGE ==============
 =================================== */

#team {
  background-image: url("images/game-page/hayfield-horros.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  aspect-ratio: 1000 / 715;
  box-sizing: border-box;
}

.team-member {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1000 / 715;
  background-size: cover;
  background-position: center;
  padding: 0.8rem;
  color: #fff;
  font-family: "AITTA Magpie toes", serif;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Team member backgrounds */
#lurppa {
  background-image: url("images/team/plain/lurppa-plain.jpg");
}

#aino {
  background-image: url("images/team/plain/aino-plain.jpg");
}

#puppe {
  background-image: url("images/team/plain/puppe-plain.jpg");
}

#dianuli {
  background-image: url("images/team/plain/dianuli-plain.jpg");
}

#joonatan {
  background-image: url("images/team/plain/joonatan-plain.jpg");
}

#julia {
  background-image: url("images/team/plain/julia-plain.jpg");
}

#talents {
  background-image: url("images/team/plain/talents.jpg");
}

.member-flag-logo {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  /* Center horizontally */
  transform: translateX(-50%);
  /* Adjust for true centering */
  width: 92%;
  /* Or your desired width */
  min-width: 92%;
  /* Ensure it doesn't shrink */
  z-index: 5;
  opacity: 0.9;
  pointer-events: none;
  display: flex;
  justify-content: center;
  /* Center contents horizontally */
  padding: 0;
  /* Remove left padding */
}

/* If the image itself needs to stretch */
.member-flag-logo img {
  width: 100%;
  /* Make image fill container */
  height: auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Ensure full image is visible */
}

/* Text Container Layout */
.text-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1.5rem;
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
}


.member-intro {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom,
      rgba(38, 58, 85, 0.61),
      rgba(13, 13, 13, 0.89),
      rgba(13, 13, 13, 0));
  padding: 1rem;
  border-radius: 5px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-family: "AITTA Magpie toes", serif;
  flex: 2;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  /* Ensures the ::after pseudo-element clips correctly */
}


/* Width ratio adjustments */
.team-member.wide-intro .member-info {
  flex: 1;
  /* Name/role takes 1 part */
}

.team-member.wide-intro .member-intro {
  flex: 3;
  /* Intro takes 3 parts (1:3 ratio) */
}

.team-member.equal-width .member-info,
.team-member.equal-width .member-intro {
  flex: 1;
  /* Equal width (1:1 ratio) */
}

/* Keep existing hover effects */
.team-member:hover,
.game-item:hover {
  box-shadow: 0 0 15px rgba(169, 230, 252, 0.322);
  transform: scale(1.03) translateY(0);
  z-index: 10;
}

#julia .member-intro {
  justify-content: center;
  background-color: #2c3f5e00;

}

.aino-icons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 90%;
  margin-top: auto;
  margin-bottom: 3%;
  padding: 0;
  z-index: 10;
}

.aino-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: auto;
  transition: transform 0.3s ease;
}

.aino-icon {
  position: relative;
  /* Needed for proper transform origin */
  transform-origin: center bottom;
  /* Scale from the bottom center */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.aino-icon:hover {
  transform: scale(1.1);
  filter: brightness(150%);
}

.aino-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.member-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0.863), rgba(13, 13, 13, 0.47), rgba(13, 13, 13, 0));
  padding-left: 1%;
  border-radius: 5px;
  position: relative;
  /* For the ::after pseudo-element positioning */
  overflow: hidden;
  /* Ensures the ::after pseudo-element clips correctly */
}

.member-info h2 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  letter-spacing: 1px;
  color: #fff;
}

.member-info h3 {
  font-size: 1.3rem;
  margin: 0 0 1.5rem 0;
  font-weight: normal;
  position: relative;
}

.member-info h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2c3f5e, transparent);
  margin-top: 0.5rem;
}

.traits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
}

.traits li {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1.2rem;
}

.current-object h4,
.works h4 {
  font-size: 1.4rem;
  margin: 0 0 0.8rem 0;
  color: #f2be6b;
  letter-spacing: 0.5px;
}

.current-object p {
  font-size: 1.1rem;
  line-height: 1.1;
  margin: 0 0 2rem 0;
  display: flex;
  text-align: start;
}

.works ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.works li {
  font-size: 1rem;
  line-height: 1.1em;
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 1.5rem;
}

.works li::before {
  position: absolute;
  left: 0;
  color: #d4a373;
  font-size: 1.2rem;
}

/* Fade-out effect for overflowing text in team member cards (non-inspected) */
.team-member:not(.active-inspection) .member-info::after,
.team-member:not(.active-inspection) .member-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  /* Adjust height of the fade area as needed */
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0), rgb(6, 6, 6) 75%);
  /* Fades to the dark background of the boxes */
  pointer-events: none;
  /* Allows clicks to pass through */
  z-index: 1;
  /* Sits on top of the text */
}

/* ================================================
   ============= PROGRESS PAGE ====================
   ================================================ */

#progress {
  background-image: url("images/backgrounds/clouds-sunset.jpg"),
    linear-gradient(180deg,
      #3b80a1 0%,
      #41a2b7 20%,
      #cc8d40 60%,
      #fff9db 80%,
      #f7971e 100%),
    url("images/progress-page/progress-page-forest.png");
  background-size: cover, cover, cover;
  background-position: center, center, left;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, color-burn, normal;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.progress-description {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-family: "AITTA Magpie toes", serif;
  color: #fff;
  line-height: 1.4;
  width: 56%;
}

.progress-item {
  background-image: url("../images/progress-page/distortion-line.png");
  width: 80%;
  height: 2rem;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.progress-bar-container {
  position: relative;
  width: 90%;
  height: 2rem;
  margin: 1rem 0;
  overflow: visible;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 25px;
  background: linear-gradient(90deg, #4a4a4a, #2e2e2e);
  border: 2px solid #6b4e3d;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 1rem auto;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d4a373, #8c5a3c);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.progress-value {
  position: absolute;
  font-size: 1.4rem;
  font-family: "AITTA Magpie toes", serif;
  color: #fff;
  z-index: 10;
  border: none;
  background: none;
  width: auto;
  height: auto;
  text-align: center;
  padding-left: 1%;
}

/* ========= SUPPORT PAGE ================ */
#support {
  background-image: url("images/backgrounds/lakeview.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: transparent;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

#support .page-title h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.support-grid-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Space between paypal and crypto sections */
  padding: 20px;
}

.support-section {
  padding: 25px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.support-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8em;
  color: #eee;
  /* Light text for dark backgrounds */
}

/* PayPal Section */
.paypal-section {
  background-color: rgba(0, 43, 138, 0.7);
  color: white;
}

.paypal-section form input[type="image"] {
  max-width: 250px;
  /* Increased size for better visibility */
  height: auto;
  border: none;
  transition: transform 0.2s ease-in-out;
}

.paypal-section form input[type="image"]:hover {
  transform: scale(1.05);
}

.paypal-section p  {
	margin-top: 1em;
	font-size: 1.5rem;
}
.crypto-section > p  {
	margin-top: 1em;
	font-size: 1.5rem;
}

.crypto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Reduced min width to allow shrinking on small screens */
	gap: 1em;
	margin-top: 2%;
}


.crypto-item {
  padding: 20px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  /* Space between address and icon */
  text-align: center;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, outline 0.2s ease-in-out;
  cursor: pointer; /* Indicate clickable */
}

.crypto-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.651);
}

.crypto-item.copied-feedback {
  outline: 2px solid #4CAF50; /* Green outline for success */
  outline-offset: -2px; /* Adjusts outline to be slightly inside */
}

/* Crypto Section */
.crypto-section {
background-color: rgba(1, 1, 1, 0.7);
  color: white;
}

.crypto-address {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
  word-break: break-all;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 4px;
  color: #f0f0f0;
  width: 100%;
  box-sizing: border-box;

}

.crypto-icon {
	display: block;
	width: 100%;
	max-width: 50%; /* Limit max width to 50% of parent for relative sizing */
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}
/* Specific Crypto Colors */
.crypto-item.bitcoin {
  background-color: #f7931a;
}

.crypto-item.bitcoincash {
  background-color: #478559;
}

.crypto-item.ethereum {
  background-color: #627eea;
}

.crypto-item.dogecoin {
  background-color: #c3a634;
}



/* Footer */
.mobile-somelinks {
  display: none;
  /* Hide footer on desktop */
}

/* ==========================================================================
   4. Reusable Components
   ========================================================================== */

/* Placeholder Box for Home Section */
.placeholder-box {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-radius: 10px;
}

/* Page Sections */
.page {
  display: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  background-color: rgb(5, 5, 5);
  overflow: hidden;
}

.page.active {
  display: flex;
}



.team-member,
.game-item {
  transition: transform 0.3s ease;
}

/* ==========================================================================
   5. Effects
   ========================================================================== */

/* Fade-in animation */
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Overlay for page transitions */
.page-fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  /* Black with slight transparency */
  z-index: 1000;
  /* Ensure it appears above all other elements */
  animation: fadeIn 0.5s ease-in-out forwards;
  /* Start with fade-in */
}

/* Black Matter Effect */
.black-matter {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.2%;
  height: 0;
  background: rgb(7, 7, 7);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out, height 0.5s ease-out;
}

/* Black Matter Animation */
@keyframes black-matter-run {
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

/* Slide to the right animation */
@keyframes slide-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(20%);
  }
}

/* Slide back animation */
@keyframes slide-back {
  from {
    transform: translateX(20%);
  }

  to {
    transform: translateX(0);
  }
}

#fog-canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

/* =============================== Inspection System ============================ */
.inspection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inspection-overlay.active {
  opacity: 1;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  #talents .member-info {
    background-color: rgba(65, 65, 65, 0);
  }
}

.inspection-overlay.active .origins-text-box {
  width: 96%;
  justify-content: flex-start;
  font-size: 1.1em;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
  height: fit-content;
  display: flex;
}

.inspection-overlay.active .text-container>.member-info {
  position: relative;
  transition: opacity 0.3s ease;
  background: linear-gradient(to bottom,
      rgb(0, 0, 0),
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0));


}

.inspection-overlay.active .text-container>.member-info h2 {
  font-size: 2.5rem;

}

.inspection-overlay.active .text-container>.member-intro {
  position: relative;
  transition: opacity 0.3s ease;
  background: linear-gradient(to bottom,
      rgba(16, 21, 30, 0.52),
      rgba(28, 66, 153, 0.274),
      rgba(0, 0, 0, 0));
  /* Add these new properties */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Aligns content to top */
  align-items: flex-start;
  /* Aligns items to left */
  padding-top: 20px;
  /* Add some top padding */
  padding-bottom: 20px;
  /* Keep bottom padding */
  height: 100%;
  /* Take full available height */
  overflow-y: auto;
  /* Add scroll if content overflows */
}

.origins.game-item.active-inspection.show {
  & ul {
    font-size: 1.4em;
    line-height: 1em;
  }
}

.inspection-overlay.active #julia .text-container>.member-intro {
  position: relative;
  transition: opacity 0.3s ease;
  background: none;
}

.inspection-overlay.active #joonatan .text-container>.member-info {
  .traits li {
    font-size: 1.2em;
  }
}

.inspection-overlay.active .text-container>.member-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
      rgba(13, 13, 13, 0.85),
      rgba(13, 13, 13, 0.4),
      rgba(13, 13, 13, 0));
  border-radius: 5px;
  transition: opacity 0.3s ease;
}

.inspection-overlay.active .text-container>.member-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  transition: opacity 0.3s ease;
}

.inspection-overlay.active .text-container>.member-info:hover::before,
.inspection-overlay.active .text-container>.member-intro::before {
  opacity: 0;
  /* Only fades the background */
}

/* Ensure text remains visible */
.inspection-overlay.active .text-container>.member-info h2,
.inspection-overlay.active .text-container>.member-info h3,
.inspection-overlay.active .text-container>.member-info .traits {
  position: relative;
  /* Brings text above the pseudo-element */
  opacity: 1 !important;
  /* Forces text to stay visible */
}

.team-member.active-inspection,
.game-item.active-inspection {

  position: fixed;
  width: min(80vw, 1118px);
  height: min(90vh, 800px);
  top: 50%;
  left: 50%;
  z-index: 1001;
  margin: 0;
  opacity: 0;
  transition: all 0.2s ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%) perspective(1000px) rotateX(45deg) scale(1);
  transform-origin: bottom;
}

.team-member.active-inspection {



  .member-intro {
    font-size: 1.1rem;
  }



  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.4em;
  }

  .traits li {
    font-size: 1.4em;
  }

  .works li {
    font-size: inherit;
  }
}




/* Add show class for smooth appearance */
.team-member.active-inspection.show,
.game-item.active-inspection.show {
  opacity: 1;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  /*This sets the final position and scale */

  p,
  ul {
    font-size: 1.4em;
  }
}

.character-image.active-inspection>.character-text-box {
  p {
    font-size: 2em;
  }

  h1 {
    font-size: 3em;
  }
}

body.inspection-mode {
  overflow: hidden;
}

.inspection-mode .main-content {
  position: inherit;
  width: 100%;
  top: var(--scroll-position, 0);
  overflow: hidden;
}

/* ============= Inspection element size for specific types ============== */
.character-image.active-inspection {
  width: 70vw;
  max-width: 1000px;
  height: auto;
}

.concept-art.active-inspection {
  max-width: 1000px;
  width: 74vw;
  height: auto;
}

.origins.active-inspection {
  width: 62vw;
  height: auto;
  max-width: 1000px;
}

.portrait-item.active-inspection {
  width: auto;
  max-height: 80vh;
  max-width: 800px;
  height: 90%;
}

/* Ensure content fits */
.member-info,
.origins-text-box {
  max-width: 100%;
  box-sizing: border-box;
}

/* -------------- Temp fixes while inspection is active --------------- */
/* Hide other content during inspection */
body.inspection-mode .team-member:not(.active-inspection),
body.inspection-mode .page-title,
body.inspection-mode .page-content:not(.active-inspection),
body.inspection-mode .game-item:not(.active-inspection) {
  display: none;
  pointer-events: none;
}

/* ==========================================================================
   6. Media Queries
   ========================================================================== */
/* ========== Aspect Ratio Handling (MSI Widescreen) ========== */
@media (min-aspect-ratio: 16/9) {
  /* .main-content {
     border: 2px solid #FF0000; */
  /* Red - MSI widescreen 
  }*/
}

/* ========== Width-Based Breakpoints ========== */
/* Wide Desktop (1425px+) - Default styles */
/* (No border needed for default state) */

/* Narrow Desktop (1152px-1424px) */
@media (max-width: 1424px) {

  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    padding-inline: 3rem;
  }

  .team-member {
    font-size: 0.85em;
  }


  .inspection-overlay.active .team-member.active-inspection.show .member-info h2 {
    font-size: 2.1rem;


    .team-member .member-info h3 {
      /* Corrected selector */
      font-size: calc(1.3rem * 0.85);
    }
  }
}

/* Compact Desktop (1025px-1151px) - Critical Danger Zone */
@media (max-width: 1151px) and (min-width: 1025px) {

  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    /* Slightly larger min */
    padding-inline: 2rem;
  }
}

/* Tablet Transition (900px-1024px) */
@media (max-width: 1024px) and (min-width: 900px) {


  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    /* Slightly smaller gap */
  }
}

@media (max-width: 1240px) {
    .nav-links a span {
	font-size: 1.5rem;
}
}

/* Tablet (769px-899px) */
@media (max-width: 899px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.5rem;
  }
  .menubar .logo {
    width: 70%;
  }

  .page-title {
    font-size: 2.5vw;
  }
}

/* Tall Screens (height-specific) */
@media (max-height: 720px) and (min-width: 769px) {


  .nav-links a span {

    font-size: 1.5rem;

    .team-member .text-container {
      transform-origin: top left;
      margin-bottom: 0;
    }
  }
}