/* FIRST LIGHT — playfirstlight.com
   Dark field, starlight, one gold brick. Matches the game's palette:
   bg #04050c · gold #ffd75c · cyan #5cd6ff · bright #dfe9ff · dim #8093b8 */

@font-face {
  font-family: 'Orbitron';
  src: url('fonts/orbitron-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/orbitron-latin-900-normal.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  background: #04050c;
  color: #dfe9ff;
  font-family: 'Rajdhani', 'Segoe UI', Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  /* the starfield: three layers of tiny radial stars, one faint nebula */
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(223,233,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%,  rgba(158,203,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 42%, rgba(223,233,255,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 34%, rgba(255,217,160,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 72%, rgba(158,203,255,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 84%,  rgba(223,233,255,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 78%, rgba(223,233,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 28%, rgba(255,217,160,0.35) 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 70% 10%, rgba(42,42,102,0.35), transparent),
    radial-gradient(ellipse 50% 35% at 15% 60%, rgba(29,77,92,0.25), transparent);
  background-size: 900px 900px, 700px 700px, 800px 800px, 1000px 1000px,
    750px 750px, 850px 850px, 950px 950px, 650px 650px, 100% 100%, 100% 100%;
}

main { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3, .act-num, .btn {
  font-family: 'Orbitron', Verdana, sans-serif;
}

/* ---- hero ---- */

.hero {
  text-align: center;
  padding: 5.5rem 1.5rem 4rem;
}

.hero-mark {
  width: 180px; height: 180px;
  filter: drop-shadow(0 0 42px rgba(255, 215, 92, 0.25));
}

.hero-title {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  margin-top: 1.6rem;
  color: #f2f6ff;
  text-shadow:
    0 0 24px rgba(92, 214, 255, 0.35),
    0 0 64px rgba(42, 92, 255, 0.3);
}

.hero-tagline {
  margin-top: 0.9rem;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  color: #ffd75c;
  letter-spacing: 0.04em;
}

.hero-stats {
  margin-top: 0.6rem;
  color: #8093b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.hero-cta { margin-top: 2.4rem; }

.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn-steam {
  background: linear-gradient(180deg, #1f3a6e, #14274d);
  color: #dfe9ff;
  border: 1px solid #5c8aff66;
  box-shadow: 0 0 28px rgba(92, 138, 255, 0.25);
  cursor: default;
}

.btn-music {
  margin-left: 0.8rem;
  background: transparent;
  color: #ffd75c;
  border: 1px solid #ffd75c55;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.btn-music:hover {
  border-color: #ffd75caa;
  box-shadow: 0 0 22px rgba(255, 215, 92, 0.2);
}

.cta-note {
  display: block;
  margin-top: 0.7rem;
  color: #5a688c;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* ---- pitch ---- */

.pitch {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #16203c;
}

.pitch-lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: #f2f6ff;
  margin-bottom: 1.1rem;
}

.pitch p + p { margin-top: 1rem; }

.pitch-close {
  color: #ffd75c;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---- acts ---- */

.acts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding-bottom: 3.5rem;
}

.act-card {
  background: linear-gradient(180deg, #0a1226cc, #070c1acc);
  border: 1px solid #1c2848;
  border-radius: 14px;
  padding: 1.4rem 1.3rem 1.2rem;
}

.act-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ffd75c;
}

.act-card h3 {
  margin: 0.45rem 0 0.4rem;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: #f2f6ff;
}

.act-card p { color: #8093b8; font-size: 1rem; line-height: 1.45; }

/* ---- features ---- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
  padding-bottom: 4rem;
}

.feature {
  border-left: 2px solid #ffd75c55;
  padding: 0.2rem 0 0.2rem 1.1rem;
}

.feature h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5cd6ff;
  margin-bottom: 0.45rem;
}

.feature p { color: #a9b6d4; font-size: 1.02rem; }

/* ---- screenshots ---- */

.screens { padding-bottom: 4rem; }

.screens h2 {
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd75c;
  margin-bottom: 1.2rem;
}

.screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.screen-card {
  aspect-ratio: 1200 / 1164; /* uniform boxes (the tallest shot's ratio) */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #1c2848;
  background: #05070f; /* letterbox color — blends with the shots' own dark */
}

/* every box identical; each shot fits INSIDE — never cropped, never stretched */
.screen-card img { width: 100%; height: 100%; object-fit: contain; display: block; }

.screen-card.placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(28, 40, 72, 0.5), transparent),
    #070c1a;
  color: #3d4a6e;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---- footer ---- */

footer {
  text-align: center;
  padding: 2.2rem 1.5rem 3rem;
  border-top: 1px solid #16203c;
  color: #5a688c;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

/* ---- lessons (the essay) ---- */

.lessons-hero {
  text-align: center;
  padding: 4rem 1.5rem 2.4rem;
}
.lessons-mark {
  width: 96px; height: 96px;
  filter: drop-shadow(0 0 28px rgba(255, 215, 92, 0.22));
  transition: filter 0.25s;
}
.lessons-home:hover .lessons-mark {
  filter: drop-shadow(0 0 42px rgba(255, 215, 92, 0.4));
}
.lessons-title {
  font-size: clamp(1.7rem, 5.5vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-top: 1.2rem;
  color: #f2f6ff;
  text-shadow:
    0 0 24px rgba(92, 214, 255, 0.3),
    0 0 64px rgba(42, 92, 255, 0.25);
}
.lessons-sub {
  margin-top: 0.7rem;
  font-family: 'Orbitron', Verdana, sans-serif;
  color: #5cd6ff;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.lessons-byline {
  margin-top: 1.1rem;
  color: #5a688c;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.lessons article {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 0 3.5rem;
}
.lessons article p {
  margin-bottom: 2.4rem;
  color: #a9b6d4;
  border-left: 2px solid #ffd75c33;
  padding-left: 1.2rem;
}
.lessons article p:first-of-type::first-letter {
  font-family: 'Orbitron', Verdana, sans-serif;
  font-weight: 900;
  color: #ffd75c;
  font-size: 3.1em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
}
.lessons article em {
  font-style: italic;
  color: #5cd6ff;
}
.lessons-close {
  font-family: 'Orbitron', Verdana, sans-serif;
  font-weight: 700;
  color: #ffd75c !important;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3rem;
  font-size: 1.15rem;
  border-left: none !important;
  padding-left: 0 !important;
  text-shadow: 0 0 24px rgba(255, 215, 92, 0.35);
}

footer a,
footer a:visited {
  font-family: 'Orbitron', Verdana, sans-serif;
  font-size: 0.85rem;
  color: #5cd6ff;
  text-decoration: none;
  letter-spacing: 0.14em;
  transition: color 0.2s, text-shadow 0.2s;
}
footer a:hover {
  color: #ffd75c;
  text-shadow: 0 0 14px rgba(255, 215, 92, 0.5);
}

/* ---- lessons tabs ---- */

.lessons-tabs {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin: 0 auto 2.6rem;
  border-bottom: 1px solid #16203c;
  max-width: 44rem;
  padding-bottom: 0;
}
.tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Orbitron', Verdana, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: #5a688c;
  padding: 0.6rem 0.2rem 0.85rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}
.tab-btn:hover { color: #5cd6ff; }
.tab-btn.active {
  color: #ffd75c;
  border-bottom-color: #ffd75c;
  text-shadow: 0 0 16px rgba(255, 215, 92, 0.35);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel .lessons-byline { text-align: center; margin: 0 0 2.2rem; }
.tab2-title {
  text-align: center;
  font-family: 'Orbitron', Verdana, sans-serif;
  color: #5cd6ff;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}