/* FIRST LIGHT — playfirstlight.com
   THE GARAGE AT FIRST LIGHT (2026-09-03, BUG-289). The page wears the title
   screen's own light: a warm near-black ground, the dawn coming in amber from
   the top right, the cabinet's blue pooled low on the left, and the game's gold.
   The July starfield and its cyan are gone — that was the space look the game
   left behind in August. Every color is a token below; the pages carry none. */

:root {
  --bg:        #0b0806;   /* the garage's dark — warm, never blue-black */
  --ink:       #f1e6d2;   /* warm white, the sun on the concrete */
  --ink-hi:    #fff6e6;
  --dim:       #a5927a;   /* dust-sheet tan */
  --faint:     #6b5c4a;
  --gold:      #ffd75c;   /* the game's gold — a lit brick */
  --dawn:      #ff9a3c;   /* the sky in the door */
  --dawn-deep: #b8501a;
  --blue:      #3d6fe0;   /* the cabinet's glow */
  --blue-deep: #14274d;
  --line:      #2a2018;   /* rules and card edges */
  --card:      rgba(24, 16, 10, 0.72);
}

@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; }

/* ⛔ THE `hidden` ATTRIBUTE MUST ALWAYS WIN, AND !important IS WHY.
   The UA rule is `[hidden] { display: none }` at specificity (0,1,0), so ANY
   class rule that sets `display` — `.nf-scrim { display: grid }` did — ties on
   specificity and wins on source order. The element then stays laid out and
   CLICKABLE while looking absent, and a fixed full-viewport one eats every
   click on the page. Without !important this depends on rule order, which the
   next edit to this file can silently reverse. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Rajdhani', 'Segoe UI', Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  /* the title screen's two light sources, abstracted: the dawn through the
     door (top right) and the cabinet's glow (low left). No stars. */
  background-image:
    radial-gradient(ellipse 70% 42% at 88% -4%, rgba(255, 140, 50, 0.20), transparent 70%),
    radial-gradient(ellipse 55% 38% at 6% 104%, rgba(45, 90, 200, 0.16), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
}

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

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

/* ---- hero: the garage itself ---- */

.hero {
  position: relative;
  display: grid;
  place-items: start center;
  text-align: center;
  /* the box is the pane plus its margins — sky above, a short step below (his eye);
     no min-height, so the gap under the pane is padding and nothing else */
  padding: clamp(5rem, 16vh, 10rem) 1.5rem 2.4rem;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 36%; /* keep the door, the sun and the tower in frame */
  display: block;
}
/* the picture settles into the page rather than ending at an edge */
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 8, 6, 0.25) 0%, rgba(11, 8, 6, 0) 30%, rgba(11, 8, 6, 0) 55%, rgba(11, 8, 6, 0.86) 84%, var(--bg) 100%);
}

.hero > :not(.hero-art) { position: relative; z-index: 1; } /* the art stays absolute, behind */

/* the game's glass pane (PANE in screens.ts): a dark fill at 0.65, a lit edge at
   0.14, radius 18, backdrop blur 7 — on the site's warm dark instead of the field's */
.hero-pane {
  background: rgba(11, 8, 6, 0.50);
  border: 1px solid rgba(241, 230, 210, 0.14);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: 2.2rem 2.8rem 2rem;
  max-width: 100%;
}

.hero-title {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink-hi);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(255, 154, 60, 0.45),
    0 0 72px rgba(184, 80, 26, 0.35);
}

.hero-tagline {
  margin-top: 0.9rem;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  color: var(--gold);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.hero-stats {
  margin-top: 0.6rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

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

.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;
  text-decoration: none; /* the Steam CTA is an <a> — kill the default rule */
}

/* the Steam button is the cabinet: its blue, lit from inside */
.btn-steam {
  background: linear-gradient(180deg, #2a4fa8, var(--blue-deep));
  color: var(--ink-hi);
  border: 1px solid rgba(61, 111, 224, 0.5);
  box-shadow: 0 0 28px rgba(61, 111, 224, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.btn-music {
  margin-left: 0.8rem;
  background: rgba(11, 8, 6, 0.55);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 92, 0.35);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

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

.cta-note {
  display: block;
  margin-top: 0.7rem;
  color: var(--dim);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

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

.pitch {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 3.5rem;
}

.pitch-lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-hi);
  margin-bottom: 1.1rem;
}

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

.pitch-close {
  color: var(--gold);
  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: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.3rem 1.2rem;
}

.act-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.act-card h3 {
  margin: 0.45rem 0 0.4rem;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--ink-hi);
}

.act-card p { color: var(--dim); 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 rgba(255, 215, 92, 0.35);
  padding: 0.2rem 0 0.2rem 1.1rem;
}

.feature h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dawn);
  margin-bottom: 0.45rem;
}

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

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

.screens { padding-bottom: 4rem; }

.screens h2 {
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  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 var(--line);
  background: #05070f; /* letterbox — the shots' own field dark, which IS blue-black */
  padding: 1.1rem 0; /* the shots breathe top and bottom */
}

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

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

footer {
  text-align: center;
  padding: 2.2rem 1.5rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

/* ---- the sub-pages: lessons, report, privacy ---- */

/* the banner: the wide Westfield key art (the Steam header's picture),
   with the page's title on the pane. Shares .hero-art and .hero-pane. */
.lessons-hero.banner {
  position: relative;
  min-height: clamp(300px, 44vh, 440px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 3rem 1.5rem;
}
.lessons-hero.banner .hero-art img { object-position: 50% 62%; } /* the key art: sun and tower on the horizon */
.lessons-hero.banner > :not(.hero-art) { position: relative; z-index: 1; }
.lessons-hero.banner .lessons-title { margin-top: 0; }
.lessons-hero.banner .hero-pane { transform: translateY(10px); } /* his eye: 10px lower than center */
.lessons-hero.banner .lessons-home,
.lessons-hero.banner .lessons-home:visited { color: inherit; text-decoration: none; }
.lessons-hero.banner .lessons-home:hover { color: var(--gold); }

.lessons-hero {
  text-align: center;
  padding: 4rem 1.5rem 2.4rem;
}
.lessons-mark {
  width: 96px; height: 96px;
  border-radius: 22%; /* the app-icon shape; the art is full bleed */
  object-fit: cover;
  filter: drop-shadow(0 0 28px rgba(255, 154, 60, 0.28));
  transition: filter 0.25s;
}
.lessons-home:hover .lessons-mark {
  filter: drop-shadow(0 0 42px rgba(255, 215, 92, 0.45));
}
.lessons-title {
  font-size: clamp(1.7rem, 5.5vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-top: 1.2rem;
  color: var(--ink-hi);
  text-shadow:
    0 0 24px rgba(255, 154, 60, 0.35),
    0 0 64px rgba(184, 80, 26, 0.3);
}
.lessons-sub {
  margin-top: 0.7rem;
  font-family: 'Orbitron', Verdana, sans-serif;
  color: var(--dawn);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.lessons-byline {
  margin-top: 1.1rem;
  color: var(--faint);
  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: #c9b9a2;
  border-left: 2px solid rgba(255, 215, 92, 0.22);
  padding-left: 1.2rem;
}
.lessons article p:first-of-type::first-letter {
  font-family: 'Orbitron', Verdana, sans-serif;
  font-weight: 900;
  color: var(--gold);
  font-size: 3.1em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
}
.lessons article em {
  font-style: italic;
  color: var(--dawn);
}
.lessons-close {
  font-family: 'Orbitron', Verdana, sans-serif;
  font-weight: 700;
  color: var(--gold) !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: var(--dawn);
  text-decoration: none;
  letter-spacing: 0.14em;
  transition: color 0.2s, text-shadow 0.2s;
}
footer a:hover {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 215, 92, 0.5);
}

/* ---- tabs (lessons, report) ---- */

.lessons-tabs {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin: 0 auto 2.6rem;
  border-bottom: 1px solid var(--line);
  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: var(--faint);
  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: var(--dawn); }
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  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: var(--dawn);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}

/* ---- the Next Fest card ----
   A one-per-visit announcement on the home page, gone of its own accord once the
   fest ends. It wears the game's own glass pane (.hero-pane) rather than a new
   look, and it carries no colours of its own — every value is a token above.
   ⛔ sessionStorage, not localStorage: "once per visit" is the ask, so a visitor
   who comes back next week sees it again while the fest is still on. */

.nf-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(5, 4, 3, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.nf-scrim.is-up { opacity: 1; }

.nf-card {
  position: relative;
  max-width: min(760px, 100%);
  background: rgba(11, 8, 6, 0.72);
  border: 1px solid rgba(241, 230, 210, 0.16);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: 1.1rem 1.1rem 1.4rem;
  text-align: center;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.nf-scrim.is-up .nf-card { transform: none; }

.nf-card img {
  width: 100%;
  height: auto;
  border-radius: 11px;
  display: block;
}

.nf-card .nf-cta {
  display: inline-block;
  margin-top: 1.1rem;
}

.nf-close {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(241, 230, 210, 0.3);
  background: var(--bg);
  color: var(--ink);
  font-family: 'Orbitron', Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.nf-close:hover { color: var(--gold); border-color: var(--gold); }

.nf-skip {
  display: block;
  margin: 0.8rem auto 0;
  background: none;
  border: none;
  color: var(--faint);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.nf-skip:hover { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .nf-scrim, .nf-card { transition: none; }
}