/* Shared styles for Pocket Saucers public pages.

   "Dusk desert" theme: the page sits on the same planet the game does.
   A twilight-to-rust sky fills the viewport with a faint starfield up
   top; the readable content floats in a warm panel over it, the way the
   in-game chrome floats legible text over the noisy ground.

   Every colour below is pulled straight from the in-game Metal shaders
   (PlanetGround.metal, Saucer.metal) so a player who lands here after
   the App Store screenshots gets a "yes, same thing" cue:

     rust ground   #9E3D14 / #E06B26 / #FA9E47   (PlanetGround)
     warm sky      #FFEBC7                        (Saucer env tint)
     silver saucer #B8C7F2  + cyan rim  #4DCCFF   (silverSaucerSurface)
     gold saucer   #FFB82E  + amber rim #FF730D   (goldSaucerSurface)

   Still no JavaScript, no analytics, no web fonts. All flair is CSS/SVG.
   Motion is gated behind prefers-reduced-motion. */

:root {
  --rust-deep: #9E3D14;
  --rust:      #E06B26;
  --rust-hi:   #FA9E47;
  --sky-warm:  #FFEBC7;
  --silver:    #B8C7F2;
  --cyan:      #4DCCFF;
  --gold:      #FFB82E;
  --amber:     #FF730D;

  --ink:       #2a2520;
  --ink-soft:  #6e5c49;
  --panel:     #fffaf2;
  --panel-line:#e8d9c0;
  --link:      #b8480f;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--rust-deep);   /* solid fallback under the sky layer */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: var(--ink);
}

/* --- The planet: a fixed, full-viewport backdrop ------------------- */

/* Twilight sky fading down to the rust ground (a horizon). Fixed so it
   stays put as long pages scroll, and so iOS sizes it to the viewport
   rather than the document. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    to bottom,
    #141d33 0%,     /* deep twilight */
    #2a2342 13%,
    #532b40 28%,
    #9c4422 46%,
    var(--rust) 64%,
    var(--rust-deep) 100%);
}

/* Faint starfield, confined to the dark upper sky (all dots sit in the
   top third, where the gradient is dark enough to show them). Twinkles
   as a gentle global shimmer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 23% 19%, rgba(180,199,242,.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 6%,  rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1.0px 1.0px at 44% 24%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 12%, rgba(77,204,255,.75),  transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 4%,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 73% 21%, rgba(180,199,242,.70), transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 10%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1.1px 1.1px at 90% 18%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 27%,  rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1.0px 1.0px at 49% 30%, rgba(180,199,242,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 96% 30%, rgba(255,255,255,.60), transparent 60%);
  animation: twinkle 7s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

/* --- The readable panel ------------------------------------------- */

.panel {
  position: relative;
  z-index: 0;                /* above the fixed sky layers */
  max-width: 720px;
  margin: clamp(1.5rem, 6vh, 4.5rem) auto 3.5rem;
  padding: 1.75em 2.25em 2em;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  box-shadow:
    0 22px 60px rgba(15, 7, 2, .50),
    0 2px 0 rgba(255, 255, 255, .5) inset;
}

/* --- Hero screenshot (landing page) ------------------------------- */

.hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.25em 0 1.6em;
  border: 1px solid rgba(77, 204, 255, .35);   /* a thread of saucer cyan */
  box-shadow:
    0 8px 24px rgba(15, 7, 2, .35),
    0 0 0 1px rgba(255, 255, 255, .04);
}

/* Inline video player (launch trailer) reusing the .hero frame. The aspect
   ratio matches the 2868x1320 trailer so there's no letterbox; overflow:hidden
   clips the iframe to the rounded corners. */
.hero-video {
  position: relative;
  aspect-ratio: 2868 / 1320;
  height: auto;
  overflow: hidden;
  line-height: 0;
}
.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Typography --------------------------------------------------- */

h1 {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: 2em;
  line-height: 1.15;
  margin: .1em 0 .25em;
  color: var(--ink);
}

.lede {
  font-size: 1.12em;
  color: var(--rust-deep);
  font-weight: 500;
  margin: 0 0 1.4em;
}

h2 {
  font-size: 1.25em;
  margin-top: 2.25em;
  padding-bottom: 0.3em;
  color: #1f1b18;
  border-bottom: 2px solid var(--panel-line);
  /* warm rust-to-gold rule under each section head */
  border-image: linear-gradient(90deg, var(--rust), var(--gold)) 1;
}
h3 {
  font-size: 1.05em;
  margin-top: 1.5em;
  margin-left: 1em;             /* nest h3 visually under its h2 */
  color: #3a322c;
}

/* Body content sits slightly indented from the h2 line, so the section
   structure reads at a glance. h2 stays flush-left as the anchor. */
p, ul, ol { margin-left: 1em; }
h2 + p, h2 + ul, h2 + ol { margin-top: 0.6em; }
h3 + p, h3 + ul, h3 + ol { margin-left: 2em; }

.updated {
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 2em;
  margin-left: 0;               /* date line stays flush with h1 */
}

.summary {
  background: linear-gradient(180deg, #fff6e8, #fbf0dd);
  border-left: 4px solid var(--rust);
  padding: 1em 1.25em;
  margin: 1.5em 0 1.75em;
  border-radius: 4px;
}
.summary p { margin-left: 0; }
.summary p:first-child { margin-top: 0; }
.summary p:last-child  { margin-bottom: 0; }

ul { padding-left: 1.5em; }
li { margin: 0.25em 0; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--amber); }

code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: #f4ebd8;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* --- App Store badge ---------------------------------------------- */
/* Wired and styled, but hidden until v1.0 is live on the App Store.
   To launch: delete the `hidden` attribute on the <a class="appstore">
   in index.html. The href already points at the final listing. */

.appstore {
  display: block;
  width: fit-content;
  margin: 0.25em auto 0.5em;
  line-height: 0;
  transition: transform .15s ease, filter .15s ease;
}
.appstore img { height: 52px; width: auto; display: block; }
.appstore:hover { transform: translateY(-1px); filter: brightness(1.04); }
/* Keep the HTML `hidden` attribute authoritative (a class rule would
   otherwise override the UA `[hidden]{display:none}`). */
.appstore[hidden] { display: none; }

/* --- Saucer marks + the "mill" divider ---------------------------- */

.title-saucer {
  width: 1.5em;
  height: 1.0em;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 5px rgba(77, 204, 255, .55));
  animation: bob 4.5s ease-in-out infinite;
}

/* Three saucers in a row joined by a glowing beam: a wink at the win
   condition (a "mill"). Decorative; hidden from assistive tech. */
.mill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin: 2em 0 1.5em;
}
.mill .m-saucer { width: 42px; height: 28px; }
.mill .m-saucer:nth-child(3) { width: 50px; height: 33px; }  /* center, a touch larger */
.mill .m-line {
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  opacity: .7;
}
.mill .m-saucer.s-cyan { filter: drop-shadow(0 0 4px rgba(77, 204, 255, .6)); }
.mill .m-saucer.s-amber { filter: drop-shadow(0 0 4px rgba(255, 115, 13, .6)); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- Footer ------------------------------------------------------- */

footer {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid var(--panel-line);
  font-size: 0.9em;
  color: var(--ink-soft);
}
footer a { color: var(--ink-soft); }

/* --- Small screens ------------------------------------------------ */

@media (max-width: 600px) {
  .panel {
    margin: 0.75rem;
    padding: 1.25em 1.25em 1.5em;
    border-radius: 12px;
  }
  h1 { font-size: 1.7em; }
}

/* --- Respect reduced-motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body::after, .title-saucer { animation: none; }
}