/* Moonbell Hollow, the palette the game actually renders. */
:root {
  --bg: #291B38;
  --panel: #33273E;
  --ground: #193B38;
  --ink: #F0E3C6;
  --light: #F2EF78;
  --accent: #78A76D;
  --rule: rgba(240, 227, 198, 0.16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The dotted night the app draws behind every screen. */
  background-image: radial-gradient(rgba(240, 227, 198, 0.10) 0.8px, transparent 0.8px);
  background-size: 22px 22px;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.35rem 5rem; }
a { color: var(--light); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--light); outline-offset: 3px; border-radius: 4px; }
header { margin-bottom: 2.5rem; }
.kicker {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 0.5rem;
}
h1 { font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.1; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 0.7rem; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; margin: 1.6rem 0 0.35rem; color: var(--light); }
p, li { margin: 0 0 0.85rem; }
ul { padding-left: 1.15rem; }
li::marker { color: var(--accent); }
.lede { font-size: 1.12rem; opacity: 0.92; }
.panel {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1.15rem 1.3rem; margin: 1.5rem 0;
}
.panel > :last-child { margin-bottom: 0; }
.stamp { font-size: 0.9rem; opacity: 0.62; }
nav.crumbs { margin-bottom: 2rem; font-size: 0.95rem; }
nav.crumbs a { margin-right: 1.1rem; }
footer {
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule); font-size: 0.9rem; opacity: 0.72;
}
.firefly { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%;
  background: var(--light); box-shadow: 0 0 12px 3px rgba(242, 239, 120, 0.45); vertical-align: 0.06em; }
@media (prefers-reduced-motion: no-preference) {
  .firefly { animation: glow 3.6s ease-in-out infinite; }
  @keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* ------------------------------------------------------------------------
   The home page and the press kit. Everything below is scoped to
   .home and .press, so support.html and privacy.html render as before.
   The display face is Shantell Sans ExtraBold, the face the game and its
   store screenshots use (SIL OFL 1.1, fonts/OFL.txt), cut to Latin.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Shantell Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/shantell-sans-800.woff2") format("woff2");
}
.home, .press {
  --display: "Shantell Sans", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --cream: #FFF4D6;
  --sage: #B9D3A8;
  --tile-lit: #4B7C62;
  --tile-dark: #1A3A35;
  --bank-top: #627E5B;
  --bank-mid: #546E4E;
  --bank-low: #3F553B;
  --shadow: rgba(8, 4, 14, 0.55);
  color-scheme: dark;
}
.home h1, .home h2, .home h3, .press h1, .press h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px;
  background: var(--light); color: var(--bg); border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 12px; color: var(--bg); }
.home img, .press img { max-width: 100%; }
.store-badge { display: inline-block; border-radius: 10px; line-height: 0; }
.store-badge img { display: block; height: 54px; width: auto; }

/* The hero: the night the store screenshots are painted on. */
.hero {
  position: relative; overflow: hidden; margin: 0;
  background: radial-gradient(130% 85% at 30% 0%, #3A2750 0%, rgba(43, 28, 59, 0.9) 48%, rgba(41, 27, 56, 0) 100%);
}
.hero .sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-in {
  position: relative; max-width: 72rem; margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 20px 26px;
}
.app-icon {
  display: block; width: 68px; height: 68px; border-radius: 22.4%;
  box-shadow: 0 10px 26px var(--shadow), 0 0 0 1px rgba(240, 227, 198, 0.14);
}
.wordmark {
  margin: 18px 0 14px; color: var(--cream);
  font-size: clamp(3.3rem, 16.5vw, 6rem); line-height: 0.95;
  text-shadow: 0 0.07em 0 rgba(20, 10, 30, 0.45);
}
.wordmark span { display: block; }
.tagline {
  font-family: var(--display); font-weight: 800; color: var(--light);
  font-size: clamp(1.18rem, 5vw, 1.55rem); line-height: 1.3; margin: 0 0 12px; max-width: 26rem;
}
.pitch { font-size: 1.06rem; line-height: 1.6; margin: 0 0 22px; max-width: 31rem; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.get-note { margin: 0; font-size: 0.95rem; color: var(--sage); }
.hero-art { position: absolute; top: 14px; right: 8px; width: 132px; pointer-events: none; }
.hero-art .trail { display: none; }
.flyer { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 22px rgba(8, 4, 14, 0.45)); }

@media (min-width: 860px) {
  .hero-in {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center; gap: 24px; padding: 64px 40px 40px;
  }
  .hero-art { position: relative; top: auto; right: auto; width: 100%; aspect-ratio: 480 / 440; }
  .hero-art .trail { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flyer { position: absolute; left: 4%; top: 3%; width: 54%; }
  .tagline { max-width: 30rem; }
  .app-icon { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: no-preference) {
  .flyer { animation: hover 5.5s ease-in-out infinite; }
  .trail .dashes { animation: fly 14s linear infinite; }
  @keyframes hover { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }
  @keyframes fly { to { stroke-dashoffset: -340; } }
}

/* The screenshots: a swipeable rail on phones, one row on a wide screen. */
.shots { position: relative; }
.rail-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-scroll:focus-visible { outline-offset: -3px; }
.rail {
  list-style: none; margin: 0; padding: 8px 20px 34px;
  display: flex; gap: 14px; width: max-content;
}
.rail li { margin: 0; width: min(62vw, 270px); scroll-snap-align: start; flex: none; }
.rail img {
  display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868;
  border-radius: 7.5% / 3.45%; background: #2B1C3B;
  box-shadow: 0 18px 40px var(--shadow), 0 0 0 1px rgba(240, 227, 198, 0.10);
}
@media (min-width: 1000px) {
  .rail-scroll { overflow: visible; }
  .rail { width: auto; max-width: 76rem; margin: 0 auto; padding: 12px 40px 64px; gap: 18px; }
  .rail li { flex: 1 1 0; width: auto; }
  .rail li:nth-child(even) { transform: translateY(30px); }
}

/* Shared section rhythm. */
.band { max-width: 66rem; margin: 0 auto; padding: 56px 20px; }
.band > h2, .band-head { font-size: clamp(1.75rem, 6.4vw, 2.5rem); line-height: 1.12; margin: 0 0 18px; color: var(--cream); }
.small { font-size: 0.95rem; color: var(--sage); }

/* A friend's Daily Glow, as it arrives in a message. */
.friend-in { display: grid; gap: 26px; align-items: center; grid-template-areas: "head" "share" "copy"; }
.friend-head { grid-area: head; margin: 0; }
.share { grid-area: share; }
.friend-copy { grid-area: copy; }
.share { margin: 0; }
.bubble {
  position: relative; max-width: 330px; padding: 14px 18px 16px; border-radius: 22px;
  background: #3B2D4B; border: 1px solid rgba(240, 227, 198, 0.14);
  box-shadow: 0 16px 36px var(--shadow); font-size: 0.94rem; line-height: 1.45;
}
.bubble::after {
  content: ""; position: absolute; left: -7px; bottom: 10px; width: 18px; height: 18px;
  background: #3B2D4B; border-left: 1px solid rgba(240, 227, 198, 0.14); border-bottom: 1px solid rgba(240, 227, 198, 0.14);
  border-bottom-left-radius: 16px 14px; transform: skewX(-18deg); clip-path: inset(30% 30% 0 0);
}
.bubble p { margin: 0; }
.share-grid {
  margin: 10px 0 !important; font-size: 23px; line-height: 1.12; letter-spacing: 1px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.share-link { color: var(--light); text-decoration: underline; text-underline-offset: 3px; font-size: 0.9rem; }
.share-link .nw { white-space: nowrap; }
.share figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--sage); }
.friend-copy p { max-width: 34rem; }
@media (min-width: 760px) {
  .friend-in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "share head" "share copy"; gap: 18px 64px; }
  .friend-head { align-self: end; }
  .friend-copy { align-self: start; }
}

/* How it plays: one firefly lighting its cross on a five by five garden. */
.how-in { display: grid; gap: 30px; align-items: center; }
.mini-board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 6px;
  width: min(100%, 300px); aspect-ratio: 1; border-radius: 16px;
  background: #2D4A3E; box-shadow: 0 18px 40px var(--shadow), 0 0 0 1px rgba(240, 227, 198, 0.12);
}
.mini-board .c {
  position: relative; border-radius: 5px; background-color: var(--tile-dark);
  background-image: radial-gradient(circle at 38% 62%, rgba(120, 167, 109, 0.55) 0 2.5px, transparent 3px),
                    radial-gradient(circle at 62% 58%, rgba(120, 167, 109, 0.55) 0 2.5px, transparent 3px);
  transition: background-color 0.45s ease calc(var(--d, 0) * 0.16s);
}
.mini-board .lit { background-color: var(--tile-lit); background-image: radial-gradient(circle, rgba(242, 239, 120, 0.22), transparent 70%); }
.mini-board .lit::after, .mini-board .fly::after, .mini-board .tree::after, .mini-board .stone::after {
  content: ""; position: absolute; inset: 10%; background: center / contain no-repeat;
}
.mini-board .lit::after {
  background-image: url("img/flower.webp"); inset: 20%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--d, 0) * 0.16s + 0.1s), opacity 0.3s ease calc(var(--d, 0) * 0.16s + 0.1s);
}
.mini-board .fly { background-color: var(--tile-lit); background-image: radial-gradient(circle, rgba(242, 239, 120, 0.55), transparent 70%); }
.mini-board .fly::after { background-image: url("img/firefly.webp"); inset: 0; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.4s ease; }
.mini-board .tree::after { background-image: url("img/trees.webp"); inset: 4%; }
.mini-board .stone::after { background-image: url("img/rock.webp"); inset: 8%; }
.mini-board .stone b {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font: 800 clamp(1rem, 5vw, 1.35rem)/1 var(--display); color: #2A1B3A; padding-top: 4%;
}
.mini-board.armed:not(.play) .lit { background-color: var(--tile-dark); }
.mini-board.armed:not(.play) .lit::after { transform: scale(0.2); opacity: 0; }
.mini-board.armed:not(.play) .fly::after { transform: translateY(-40%) scale(0.7); opacity: 0; }
.rules { margin: 0; padding-left: 1.4rem; max-width: 32rem; }
.rules li { margin-bottom: 0.7rem; padding-left: 0.2rem; }
.rules li::marker { font-family: var(--display); font-weight: 800; color: var(--light); }
@media (min-width: 760px) {
  .how-in { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
}

/* Three ways to play. */
.cards { display: grid; gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 20px;
  padding: 22px 22px 18px;
}
.card h3 { font-size: 1.45rem; margin: 14px 0 6px; color: var(--light); }
.card p { margin: 0 0 0.6rem; }
.card-art { display: flex; gap: 8px; align-items: flex-end; height: 72px; }
.card-art img { width: 72px; height: 72px; }
.card-art.worlds img { width: 58px; height: 58px; }
.boards { margin: 18px 0 0; color: var(--sage); }
@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Good to know: the plain facts. */
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 40px; }
.facts-list li { position: relative; padding-left: 26px; margin: 0 0 0.9rem; }
.facts-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--light); box-shadow: 0 0 10px 2px rgba(242, 239, 120, 0.4);
}
.facts-list strong { color: var(--cream); }
@media (min-width: 760px) { .facts-list { grid-template-columns: 1fr 1fr; } }

/* The last call, standing on the painted bank. */
.last { text-align: center; padding: 40px 20px 8px; }
.last img.flyer-small { display: block; width: 104px; height: 104px; margin: 0 auto 6px; }
.last h2 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; margin: 0 0 20px; color: var(--cream); }
.last .store-badge { margin-bottom: 8px; }

.ground {
  --bh: clamp(92px, 12vw, 170px); position: relative; overflow-x: clip;
  /* Undo the plain footer the support and privacy pages use. */
  margin-top: 18px; padding-top: 0; border-top: 0; opacity: 1; font-size: inherit;
}
.bank { position: relative; height: var(--bh); }
/* 2px past its box, so no hairline of night shows between the bank and the ground below it. */
.bank svg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 2px); display: block; }
.bank img { position: absolute; transform: translateX(-50%); height: auto; }
.ground-in {
  background: var(--bank-low); color: var(--ink);
  padding: 6px 20px max(36px, env(safe-area-inset-bottom)); text-align: center; font-size: 0.95rem;
}
.ground-in nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-bottom: 14px; font-size: 1.02rem; }
.ground-in a { color: var(--cream); }
.ground-in a:hover { color: #fff; }
.ground-in p { margin: 0 auto 8px; max-width: 40rem; }
.ground-in .legal { font-size: 0.8rem; opacity: 0.85; }

/* The press kit. */
.press .wrap { max-width: 52rem; }
.press h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1.05; margin: 0 0 10px; color: var(--cream); }
.press h2 { font-size: 1.6rem; margin: 2.6rem 0 0.8rem; color: var(--cream); }
.kit-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kit-id .app-icon { width: 84px; height: 84px; }
.kit-id-name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--cream); margin: 0; line-height: 1.2; }
.kit-id-name small { display: block; font-family: inherit; font-size: 1rem; color: var(--sage); }
.kit-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.kit-facts dt { color: var(--sage); font-weight: 600; }
.kit-facts dd { margin: 0; }
@media (max-width: 520px) {
  .kit-facts { grid-template-columns: 1fr; gap: 2px; }
  .kit-facts dd { margin-bottom: 10px; }
}
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.downloads li { margin: 0; }
.downloads a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
}
.downloads a:hover { border-color: rgba(242, 239, 120, 0.5); color: var(--ink); }
.downloads img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; }
.downloads strong { display: block; color: var(--light); }
.downloads span { font-size: 0.92rem; opacity: 0.85; }
.kit-shots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kit-shots li { margin: 0; }
.kit-shots img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 7.5% / 3.45%; background: #2B1C3B; }
@media (min-width: 700px) { .kit-shots { grid-template-columns: repeat(6, 1fr); } }