/* Base styles */
:root {
  /*
   * Updated colour palette to match Valve's Steam storefront aesthetic.
   * The base background is now a near‑black blue (#171a21).  Text is
   * rendered in a cool light grey (#c7d5e0) for comfortable contrast,
   * while accents use Steam’s signature blue (#66c0f4).  Loading
   * indicators blend into the dark background using a slightly
   * lighter shade (#1b2838).
   */
  --bg-dark: #171a21;
  --text-dark: #c7d5e0;
  --accent-dark: #66c0f4;
  --loading-bg-dark: #1b2838;
  --loading-fill-dark: #66c0f4;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 1.6;
  transition: var(--transition);
  height: 100vh;
  overflow: hidden;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 800px;
}

/* Override layout for the media page: top align content to prevent overlap with header */
/*
 * For the media page we want the contact information and media kit to sit
 * side by side on larger screens. The base `.content-wrapper` uses a
 * column layout, so we override the flex direction here and space the
 * children evenly. We still include a top margin to avoid overlapping the
 * header. On smaller viewports this will collapse back to a column via a
 * media query defined further down.
 */
#media .content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* Stretch children to the height of the tallest column so the
     contact information and media kit share the same vertical
     dimensions. */
  align-items: stretch;
  gap: 60px;
  margin-top: 80px;
}

/* Ensure the container inside the media section grows with its contents. The
   base `.container` sets a fixed height of 100%, which would otherwise
   constrain the media kit area and hide elements below the fold. By
   removing the fixed height here, the container and section will
   naturally expand. */
#media .container {
  height: auto;
  min-height: 100%;
}

/* Allow the media section to expand beyond the viewport height so that all
   elements (including the download link) are visible. We set a minimum
   height equal to the viewport height, but permit the section to grow
   naturally based on its content. Without this override the section
   inherits a fixed height from the generic `.section` class, which
   truncated the media kit download link. */
#media.section {
  height: auto !important;
  min-height: 100vh;
  position: relative !important;
  /* Provide its own scroll when content exceeds the viewport height. */
  overflow-y: auto !important;
}

/* Header styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

header {
  /* Darken the header background to blend with the new Steam palette */
  background-color: rgba(23, 26, 33, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.logo-container {
  flex: 1;
}

.logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
  color: var(--text-dark);
  transition: var(--transition);
  cursor: pointer;
}

.logo-text:hover {
  color: var(--accent-dark);
}

#logo {
  height: 50px; /* Increased from 40px */
  width: auto;
  transition: var(--transition);
}

#logo {
  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(346%) hue-rotate(314deg) brightness(98%) contrast(96%); /* Creamy off-white filter */
}

nav {
  flex: 2;
  display: flex;
  justify-content: center;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 40px;
}

nav a {
  text-decoration: none;
  font-size: 1.5rem; /* Standardized font size for all header tabs */
  letter-spacing: 1px;
  transition: var(--transition);
  position: relative;
}

nav a {
  color: var(--text-dark);
}

nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  transition: var(--transition);
  background-color: var(--accent-dark);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a.active {
  color: var(--accent-dark);
}

.spacer {
  /* Unused spacer removed; replaced by social icons container. Retain flex definition for backward compatibility */
  flex: 1;
}

/* Social media icons in the header */
.social-icons {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Reduce base size by roughly 65% as requested */
  width: 12px;
  height: 12px;
  transition: var(--transition);
}

.social-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Tint icons to use the accent colour from the Steam palette */
  filter: invert(73%) sepia(9%) saturate(736%) hue-rotate(170deg) brightness(96%) contrast(94%);
}

.social-icons a:hover img {
  /* Lighten on hover for visual feedback */
  filter: invert(85%) sepia(19%) saturate(955%) hue-rotate(170deg) brightness(105%) contrast(96%);
}

/* Section styles */
main {
  height: 100vh;
  overflow: hidden;
  padding-top: 80px;
}

.section {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow-y: auto;
}

.section.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.main-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 4px;
  color: var(--text-dark);
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
}

/* Styling for the main logo image on the landing page. Limit the
   maximum width so it does not overwhelm the layout, preserve the
   aspect ratio and center the image within its container. */
.main-logo-image {
  display: block;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.section-logo {
  max-width: 300px; /* Increased from 200px */
  height: auto;
  margin-bottom: 30px;
  transition: var(--transition);
}

.section-logo {
  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(346%) hue-rotate(314deg) brightness(98%) contrast(96%); /* Creamy off-white filter */
}

.section-title {
  font-size: 4rem;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.section-title {
  color: var(--accent-dark);
}

.section p {
  font-size: 2.5rem;
  text-align: center;
  max-width: 800px;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.contact-info {
  font-size: 2.5rem;
  margin-top: 20px;
  text-align: center;
}

/* Style email links inside contact info */
.email-link {
  color: var(--accent-dark);
  font-weight: bold;
  text-decoration: underline;
}

/* Media kit section styling */
.media-kit-section {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.media-kit-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  letter-spacing: 4px;
  color: var(--accent-dark);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

.media-kit-image {
  width: 100%;
  max-width: 800px;
  /* Reduce the maximum height of the media kit preview so there is space
     within the viewport for the download link underneath, even on
     laptops with shorter screens. */
  max-height: 200px;
  height: auto;
  border-radius: 12px;
  border: 3px dashed var(--accent-dark);
}

.media-kit-download {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--text-dark);
  border: 2px solid var(--accent-dark);
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition);
}

.media-kit-download:hover {
  background-color: var(--accent-dark);
  color: var(--bg-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Adjust font sizes for contact information specifically within the media section */
#media .contact-info p {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

#media .contact-info {
  margin-top: 0;
  margin-bottom: 40px;
}

/* Game showcase styles - Into the Unwell inspired layout */

/* Hero Artwork Section */
.game-hero-artwork {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* New hero image styling: ensure the key art fills the hero container and scales properly. */
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Attempt to improve perceived sharpness when the image is scaled. */
  image-rendering: auto;
  image-rendering: crisp-edges;
}

.hero-artwork-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-artwork-placeholder {
  width: 100%;
  height: 100%;
  /* Use a dark blue gradient reminiscent of Steam’s header background */
  background: linear-gradient(135deg, var(--bg-dark), #2a475e, var(--accent-dark));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}

.hero-artwork-placeholder span {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--text-dark);
  text-align: center;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}

.hero-artwork-placeholder span:first-child {
  font-size: 2.5rem;
  letter-spacing: 4px;
  opacity: 0.8;
}

.hero-artwork-placeholder span:last-child {
  font-size: 6rem;
  letter-spacing: 8px;
  font-weight: bold;
}

.steam-wishlist-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 25px 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: var(--transition);
  border: 3px solid var(--accent-dark);
  backdrop-filter: blur(10px);
}

.steam-wishlist-overlay:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.steam-wishlist-overlay img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.steam-wishlist-overlay span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 3px;
  color: var(--text-dark);
  font-weight: bold;
}

/* Screenshot + About Section */
.game-content-section {
  background: var(--bg-dark);
  padding: 80px 0;
}

.screenshot-about-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 80px;
  align-items: center;
}

.game-screenshot {
  flex: 1;
  max-width: 600px;
}

.screenshot-placeholder {
  width: 100%;
  height: 400px;
  /* Harmonise screenshot placeholders with the Steam dark palette */
  background: linear-gradient(135deg, var(--loading-bg-dark), #2a475e);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 3px dashed var(--accent-dark);
}

.screenshot-placeholder span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--accent-dark);
  text-align: center;
}

/*
 * Responsive layout adjustments
 * These media queries ensure the website looks good on tablets and mobile devices by stacking columns,
 * reducing font sizes and adjusting spacing. The header navigation also stacks vertically on small screens.
 */
@media (max-width: 1024px) {
  nav a {
    font-size: 1.3rem;
  }
  .game-about .game-title {
    font-size: 4rem;
  }
  .game-about .game-description {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
  }
  nav ul {
    flex-direction: column;
    gap: 20px;
  }
  nav a {
    font-size: 1.2rem;
  }
  .screenshot-about-container {
    flex-direction: column;
    gap: 40px;
  }
  .game-about .game-title {
    font-size: 3rem;
    text-align: center;
  }
  .game-about .game-description {
    font-size: 1.1rem;
    text-align: center;
  }
  .additional-screenshots-section .screenshots-container {
    flex-direction: column;
    gap: 20px;
  }
  .screenshot-item {
    max-width: none;
  }
  .steam-wishlist-overlay {
    padding: 15px 25px;
  }
}

@media (max-width: 480px) {
  nav a {
    font-size: 1rem;
  }
  .game-about .game-title {
    font-size: 2.5rem;
  }
  .game-about .game-description {
    font-size: 1rem;
  }
  .contact-info, .section p {
    font-size: 2rem;
  }
}

/* Main screenshot image styling: mimic placeholder dimensions and border */
.screenshot-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px dashed var(--accent-dark);
}

.game-about {
  flex: 1;
  max-width: 600px;
  /* Center the contents (logo and text) within the game-about section */
  text-align: center;
}

.game-about .game-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5rem;
  letter-spacing: 6px;
  color: var(--text-dark);
  margin: 0 0 30px 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

.game-about .game-description {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--text-dark);
  margin: 0;
  opacity: 0.9;
}

/* Style for the game logo image used in place of the text header */
.game-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 30px auto;
}

/* Additional Screenshots Section */
.additional-screenshots-section {
  background: var(--bg-dark);
  padding: 60px 0 100px 0;
}

.screenshots-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 40px;
  justify-content: center;
}

.screenshot-item {
  flex: 1;
  max-width: 400px;
}

.screenshot-placeholder-small {
  width: 100%;
  height: 250px;
  /* Harmonise small placeholders with the Steam dark palette */
  background: linear-gradient(135deg, var(--loading-bg-dark), #2a475e);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent-dark);
  transition: var(--transition);
}

.screenshot-placeholder-small:hover {
  border-color: var(--text-dark);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.screenshot-placeholder-small span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--accent-dark);
  text-align: center;
}

/*
 * When a screenshot image is placed inside the small placeholder, the
 * image should fill the entire area while preserving its aspect
 * ratio. The dashed border from the parent container will still
 * frame the image. Set a border radius to match the parent so the
 * corners align.
 */
.screenshot-placeholder-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/*
 * Video wrapper ensures the embedded YouTube trailer maintains a 16:9 aspect
 * ratio on all screen sizes. A dashed border and rounded corners echo the
 * existing visual language used for screenshot placeholders. The iframe is
 * absolutely positioned within the wrapper to fill the available space.
 */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border: 2px dashed var(--accent-dark);
  border-radius: 12px;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
 * Lightbox overlay styles. When a gallery image is clicked the lightbox
 * becomes visible and displays the larger version of the screenshot at
 * the center of the screen against a dark, semi‑transparent backdrop.
 */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-dark);
  background: none;
  border: none;
  cursor: pointer;
}

/* Responsive Design for New Layout */
@media (max-width: 768px) {
  .hero-artwork-placeholder span:first-child {
    font-size: 1.8rem;
  }
  
  .hero-artwork-placeholder span:last-child {
    font-size: 3.5rem;
  }
  
  .steam-wishlist-overlay {
    padding: 20px 30px;
  }
  
  .steam-wishlist-overlay img {
    width: 50px;
    height: 50px;
  }
  
  .steam-wishlist-overlay span {
    font-size: 1.5rem;
  }
  
  .screenshot-about-container {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  
  .game-about .game-title {
    font-size: 3.5rem;
  }
  
  .game-about .game-description {
    font-size: 1.2rem;
  }
  
  .screenshots-container {
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
  }
}

/*
 * Media page specific layout adjustments. These rules assign equal
 * flex grow to the contact and media kit sections and align text
 * appropriately. On desktop sizes the two columns share the
 * available space evenly. The media kit section is left aligned so
 * its heading and download button sit flush with the contact info.
 */
#media .contact-info,
#media .media-kit-section {
  flex: 1;
}

/* Add a subtle vertical divider and breathing space on the right of
   the contact section so the two columns appear distinct yet
   balanced. The semi‑transparent blue reflects the site’s accent
   colour. */
#media .contact-info {
  border-right: 1px solid rgba(102, 192, 244, 0.2);
  padding-right: 40px;
  margin-right: 40px;
}

/* Left‑align the contact text within the media page for better
   readability when positioned as a column */
#media .contact-info p {
  text-align: left;
}

/* Arrange the media kit column contents from top to bottom and
   align them to the start. Without this override the default center
   alignment from `.media-kit-section` would keep content centred. */
#media .media-kit-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* On small screens, stack the media page content vertically and
   restore centre alignment for both columns. This mirrors the
   existing mobile behaviour and prevents text and images from
   becoming cramped. */
@media (max-width: 768px) {
  #media .content-wrapper {
    flex-direction: column;
  }
  #media .contact-info,
  #media .media-kit-section {
    flex: none;
    width: 100%;
  }
  /* Remove the vertical divider on small screens and reset spacing */
  #media .contact-info {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
  #media .contact-info p {
    text-align: center;
  }
  #media .media-kit-section {
    align-items: center;
  }
}

/* Loading bar styles */
.loading-bar-container {
  width: 100%;
  max-width: 400px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  margin: 20px 0;
}

.loading-bar-container {
  background-color: var(--loading-bg-dark);
}

.loading-bar {
  height: 100%;
  border-radius: 15px;
  transition: width 1.5s ease-in-out;
  background-color: var(--loading-fill-dark);
}

/* Footer styles */
footer {
  text-align: center;
  padding: 20px;
  transition: var(--transition);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  backdrop-filter: blur(10px);
}

footer {
  /* Darken the footer to match the header and overall aesthetic */
  background-color: rgba(23, 26, 33, 0.9);
  /* Use a subtle blue accent for the top border to echo the Steam palette */
  border-top: 1px solid rgba(102, 192, 244, 0.2);
}

footer p {
  font-size: 1rem;
  letter-spacing: 1px;
}

/* Responsive styles */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  
  .logo-container, .theme-toggle {
    flex: none;
    width: 100%;
  }
  
  .logo-container {
    display: flex;
    justify-content: flex-start;
  }
  
  .theme-toggle {
    display: flex;
    justify-content: flex-end;
  }
  
  nav {
    width: 100%;
    order: 3;
  }
  
  nav ul {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  
  .section p {
    font-size: 2rem;
  }
  
  main {
    padding-top: 150px;
  }
  
  .section {
    padding-top: 150px;
  }
  
  .section-title {
    font-size: 3rem;
  }
  
  .contact-info {
    font-size: 2rem;
  }
  
  .main-logo {
    font-size: 4rem;
  }
  
  .game-hero {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
  }
  
  .game-info {
    padding-left: 0; /* Keep this removal for mobile */
  }
  
  .game-title {
    font-size: 2.5rem;
  }
  
  .placeholder-artwork {
    height: 200px; /* Reverted to original mobile size */
  }
  
  .placeholder-artwork span {
    font-size: 1.2rem; /* Reverted to original mobile size */
  }
  
  .platform-icon {
    padding: 20px; /* Keep enhanced mobile size */
    min-width: 120px;
  }
  
  .platform-icon img {
    width: 60px; /* Keep enhanced mobile size */
    height: 60px;
  }
  
  .platform-icon span {
    font-size: 1.2rem; /* Keep enhanced mobile size */
  }
}

@media (max-width: 480px) {
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .section p {
    font-size: 1.5rem;
  }
  
  main {
    padding-top: 200px;
  }
  
  .section {
    padding-top: 200px;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .loading-bar-container {
    max-width: 280px;
  }
  
  .contact-info {
    font-size: 1.5rem;
  }
  
  .main-logo {
    font-size: 3rem;
  }
  
  .game-hero {
    padding: 20px 15px;
  }
  
  .game-title {
    font-size: 2rem;
  }
  
  .game-description {
    font-size: 1rem;
  }
  
  .placeholder-artwork {
    height: 150px; /* Reverted to original smallest mobile size */
  }
  
  .placeholder-artwork span {
    font-size: 1rem; /* Reverted to original smallest mobile size */
  }
  
  .platform-icon {
    padding: 16px;
    min-width: 100px;
  }
  
  .platform-icon img {
    width: 50px; /* Keep enhanced smallest mobile size */
    height: 50px;
  }
  
  .platform-icon span {
    font-size: 1rem;
  }
}