/* ==========================================================================
   Custom Font Faces
   ========================================================================== */

/* Title Font */
@font-face {
  font-family: 'ARB';
  src: url('Fonts/Arb218BigBluntMar50Normal-q1Y2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Body Font */
@font-face {
  font-family: 'OpsilonItalic';
  src: url('Fonts/OpsilonItalic-3lm9p.ttf') format('truetype');
  font-weight: normal;
  font-style: italic; 
  font-display: swap;
}

/* Accent Font */
@font-face {
  font-family: 'Bahiana';
  src: url('Fonts/Bahiana-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Base Elements
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #1a1a1a;
  background-image: url('BackGround.png');
  background-size: 2560px 1440px;
  background-position: center top;
  background-attachment: fixed;
  color: #f0f0f0;
}

body, p, span, a, li, button, input, textarea {
  font-family: 'OpsilonItalic', sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .title-text {
  font-family: 'ARB', sans-serif;
  font-weight: normal; 
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #d8d8d8;
}

a {
  color: #fad201; /* New yellow color */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #ffe14c; /* Brighter yellow hover color */
}

/* ==========================================================================
   Layout & Utility
   ========================================================================== */

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.text-center {
  text-align: center;
}

.highlight {
  color: #fad201; /* New yellow color */
  font-family: 'ARB', sans-serif;
}

/* ==========================================================================
   Header / Hero
   ========================================================================== */

header {
  text-align: center;
  padding-bottom: 2rem;
}

.game-title {
  font-size: 3.5rem;
}

.title-accent {
  font-family: 'Bahiana', sans-serif;
  font-size: 1.85rem; /* Increased size and changed to rem for consistency */
  display: block; /* Ensures it sits on its own line neatly */
  margin-top: -0.5rem; /* Optional: Pulls it slightly closer to the main title */
}

.subtitle {
  font-style: italic;
  color: #fad201; /* New yellow color */
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin-bottom: 2.5rem;
}

/* Eyebrow labels — small comic-log style tags above section headings */
.eyebrow {
  display: inline-block;
  font-family: 'OpsilonItalic', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fad201; /* New yellow color */
  border: 1px solid rgba(250, 210, 1, 0.4); /* Border using new yellow color */
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  margin-bottom: 0.9rem;
}

/* Panels — translucent cards so text stays readable over the background */
.panel {
  background: rgba(10, 10, 10, 0.68);
  border: 1px solid rgba(250, 210, 1, 0.18); /* Border using new yellow color */
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin-bottom: 2rem;
  text-align: left;
  backdrop-filter: blur(2px);
}

.intro.panel {
  text-align: left;
}

/* ==========================================================================
   Playable Demo
   ========================================================================== */

.play-container {
  text-align: center;
  margin: 0 0 2.5rem;
}

.play-heading {
  margin-bottom: 1.25rem;
}

.play-frame {
  display: inline-block;
  padding: 10px;
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(250, 210, 1, 0.35); /* Border using new yellow color */
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(250, 210, 1, 0.12); /* Shadow using new yellow color */
}

.play-frame iframe {
  display: block;
  width: 640px;
  height: 360px;
  max-width: 80vw;
  aspect-ratio: 640 / 360;
  border: none;
  border-radius: 4px;
}

@media (max-width: 700px) {
  .play-frame iframe {
    width: 88vw;
    height: auto;
  }
}

/* ==========================================================================
   Trailer video
   ========================================================================== */

.video-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem;
  padding-bottom: 42.1875%; /* 900/1600 * 56.25%, keeps 16:9 within the max-width */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(250, 210, 1, 0.18); /* Border using new yellow color */
}

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

/* ==========================================================================
   Features list
   ========================================================================== */

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

.features li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
  color: #d8d8d8;
}

.features li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #fad201; /* New yellow color */
}

.tagline {
  font-style: italic;
  color: #fad201; /* New yellow color */
  margin-bottom: 0;
}

/* ==========================================================================
   Footer / WIP status
   ========================================================================== */

footer.panel {
  text-align: left;
}

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

.wip-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  color: #b8b8b8;
  font-size: 0.95rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 0 6px rgba(250, 210, 1, 0.2); /* Shadow using new yellow color */
  flex-shrink: 0;
}

/* ==========================================================================
   Image & Text Split Layout
   ========================================================================== */

.split-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.text-col {
  flex: 1; /* Takes up remaining space on the left */
}

.image-col {
  flex: 0 0 40%; /* Forces the image column to take exactly 40% of the width */
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Space between screenshots if there are multiple */
}

.panel-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(250, 210, 1, 0.35); /* Yellow border to match your theme */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustment for mobile screens */
@media (max-width: 850px) {
  .split-layout {
    flex-direction: column;
  }
  
  .image-col {
    width: 100%;
    flex: 1 1 auto;
  }

  .screenshots {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .screenshots .panel-img {
    width: calc(50% - 0.625rem); /* If on mobile, put screenshots side by side */
  }
}
@media (max-width: 500px) {
  .screenshots .panel-img {
    width: 100%; /* Full width on very small screens */
  }
}