/* Copyright © 2026 Wonderflight Media */

/* Site shell: landing page and 404. Colors are Tappy Ship's cozy-arcade
   palette (games/tappy-ship/src/data/palette.js). */

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

html, body { min-height: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  color: #FFF3DC;
  font-family: 'Baloo 2', system-ui, sans-serif;
  /* Nebula glows and a scatter of stars, like the game's title screen */
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,243,220,0.9), transparent),
    radial-gradient(1px 1px at 27% 72%, rgba(255,243,220,0.5), transparent),
    radial-gradient(1.5px 1.5px at 41% 33%, rgba(255,243,220,0.5), transparent),
    radial-gradient(1px 1px at 58% 84%, rgba(255,243,220,0.9), transparent),
    radial-gradient(1.5px 1.5px at 68% 14%, rgba(255,243,220,0.5), transparent),
    radial-gradient(1px 1px at 79% 58%, rgba(255,243,220,0.9), transparent),
    radial-gradient(1.5px 1.5px at 91% 27%, rgba(255,243,220,0.5), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,243,220,0.5), transparent),
    radial-gradient(ellipse 60% 45% at 25% 30%, rgba(122,82,196,0.22), transparent),
    radial-gradient(ellipse 55% 40% at 80% 75%, rgba(255,158,196,0.09), transparent),
    #1A1440;
}

.site-name {
  color: #BBA9F0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
}

.logo { width: min(560px, 90vw); height: auto; }

.pitch {
  color: #BBA9F0;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  max-width: 28em;
  margin-top: -0.6em;
}

/* Same pill as the game's title-screen Play button */
.play {
  display: inline-block;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 700;
  color: #07382C;
  background: #4FE0C2;
  border: 0.18em solid #2C2461;
  border-radius: 999px;
  padding: 0.3em 2em;
  margin-top: 0.4rem;
  text-decoration: none;
  transition: transform 0.1s;
}

.play:hover { transform: scale(1.04); }
.play:active { transform: scale(0.96); }
.play:focus-visible { outline: 3px solid #FFC857; outline-offset: 4px; }

h1 {
  color: #FFC857;
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  line-height: 1.1;
  -webkit-text-stroke: 0.12em #2C2461;
  paint-order: stroke;
}

.site-foot {
  color: #BBA9F0;
  opacity: 0.7;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 1.5rem;
}