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

/* ── FLUID SCALE ──
   Every size is clamp(min, preferred, max) where the preferred value grows
   with the viewport (vw) and the clamps keep it sane on tiny and huge screens.
   The widths further down are viewport-relative too, and that pairing is the
   point: because type and containers shrink together, a line breaks in the
   same place at every window size instead of tightening as the window narrows.
   Fixed px containers + rem type was what made the features list wrap. */
:root {
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.0vw, 5.5rem);
  --fs-h2:      clamp(1.7rem, 1.1rem + 2.4vw, 3.0rem);
  --fs-hero:    clamp(1.35rem, 0.9rem + 1.9vw, 2.6rem);
  --fs-tagline: clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem);
  --fs-list:    clamp(1.1rem, 0.9rem + 1.05vw, 1.9rem);
  --fs-body:    clamp(1.05rem, 0.85rem + 1.0vw, 1.75rem);
  --fs-small:   clamp(0.95rem, 0.78rem + 0.8vw, 1.45rem);
  --fs-footer:  clamp(0.9rem, 0.75rem + 0.7vw, 1.3rem);

  --page-max:   1240px;   /* the page never gets wider than this  */
  --page-gutter: clamp(1rem, 2.5vw, 3rem);
}

@font-face {
  font-family: 'GameFont';
  src: url('fonts/playful.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Controls don't inherit font-family on their own, so the carousel's thumbnail
   buttons (and anything else added later) pick up playful.ttf too. */
button,
input,
select,
textarea {
  font: inherit;
}

body {
  font-family: 'GameFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Base size drives every element that inherits (list items, paragraphs,
     links, footer). */
  font-size: var(--fs-body);
  background: #0e0e14;
  color: #d0d4dd;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── MAIN CONTENT ── */
#content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f0b628;
  line-height: 1.2;
}

.title-line {
  display: inline-block;
}

.title-line:first-child {
  line-height: 1;
}

/* Width-driven so the wordmark (695x221) scales up with the type but can never
   overflow a narrow viewport. */
#wsb-logo-title {
  width: min(32rem, 100%);
  height: auto;
  vertical-align: middle;
}

.title-line:last-child {
  word-spacing: 0.5em;
}

.wsb-w, .wsb-s, .wsb-b { display: none; }

.sway-letter {
  display: inline-block;
  animation: letterSway 2.5s ease-in-out infinite;
}

@keyframes letterSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(5deg) translateY(-4px); }
  75% { transform: rotate(-5deg) translateY(4px); }
}

.tagline {
  font-size: var(--fs-tagline);
  color: #7a7f8a;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

main {
  max-width: min(var(--page-max), 94vw);
  width: 100%;
  padding: 0 var(--page-gutter);
  flex: 1;
}

/* Prose never wraps by accident: the cap is viewport-relative and only bites on
   genuinely wide screens, so the features list stays on one line until the
   window is phone-small (where wrapping is correct). */
main > section:not(.gallery) {
  max-width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* ── SCREENSHOT CAROUSEL ── */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #16161f;
  border: 1px solid #23232f;
  border-radius: 12px;
  overflow: hidden;
}

.stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.thumb {
  padding: 0;
  aspect-ratio: 16 / 9;
  background: #16161f;
  border: 2px solid #23232f;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb:hover {
  opacity: 0.85;
}

.thumb.is-active {
  opacity: 1;
  border-color: #f0b628;
  transform: translateY(-2px);
}

.thumb:focus-visible {
  outline: 2px solid #f0b628;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero {
  text-align: center;
  font-size: var(--fs-hero);
  line-height: 1.3;
  color: #d0d4dd;
  margin-bottom: 3rem;
}

/* Names the run. Mirrors STARTING_BALANCE / CHALLENGE_NAME in the game's
   constants.lua, so the two can't drift apart. */
.hero .challenge-name {
  font-size: var(--fs-small);
  color: #f0b628;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 0.9em;
}

/* One line per sentence. The gap is in em so it stays equal however the lines
   wrap, and it replaces the single <br> that used to sit between the first two
   (which made that gap tighter than the others). */
.hero .hero-line + .hero-line {
  margin-top: 0.8em;
}

.hero .hero-start {
  color: #00c768;
}

.hero .hero-goal {
  color: #f0b628;
}

.platforms {
  font-size: var(--fs-small);
  color: #5a5f6a;
  margin-top: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

section {
  margin-bottom: 2.5rem;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #f0b628;
  margin-bottom: 0.75rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  /* The feature list gets its own step, above the body base. */
  font-size: var(--fs-list);
  padding: 0.3rem 0;
  color: #a0a5b0;
}

li::before {
  content: "— ";
  color: #4a4f5a;
}

a {
  color: #7a7f8a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: #f0b628;
}

.download p {
  color: #5a5f6a;
  font-style: italic;
}

footer {
  padding: 3rem 1rem;
  text-align: center;
  font-size: var(--fs-footer);
  color: #3a3f4a;
}