/* Long Haul site: the text pages (how to play, about, changelog) and the legal pages (privacy, terms,
   credits) in the game's own look. Colours, panel and easing come from tokens.css, which each page links
   just before this file and which the game's longhaul.css imports, so these pages follow the game when
   it changes. The fonts are the game's own (Fredoka for display, Nunito for text); no Harbor Lights
   stylesheet is loaded. Unlike the game (one screen, no scroll) these pages scroll: long text, 17px
   body, 1.65 line height. */

@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../assets/fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../assets/fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('../assets/fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../assets/fonts/nunito-latin-800-normal.woff2') format('woff2'); }

:root {
  --site-display: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --site-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  /* The reading panel: the game's panel, made near-opaque so long text never sits on the nebula. */
  --site-sheet: linear-gradient(180deg, rgba(20, 29, 48, 0.96), rgba(10, 16, 30, 0.97));
  --site-gutter: clamp(16px, 4vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lh-site {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-family: var(--site-body); font-size: 1.0625rem; line-height: 1.65;
  color: var(--lh-ink);
  background: var(--lh-space);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The game's space: deep navy under the chapter-1 nebula, behind the cockpit-glass vignette. A fixed
   layer rather than background-attachment: fixed, which phones ignore or repaint badly. */
body.lh-site::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(3, 5, 14, 0.75) 100%),
    linear-gradient(180deg, rgba(255, 170, 90, 0.07), transparent 22%, transparent 80%, rgba(255, 150, 70, 0.08)),
    url('../packs/chapter-ceres-yards/backdrop-far.webp') center / cover no-repeat,
    radial-gradient(80% 60% at 70% 20%, #1b1830, transparent 70%),
    var(--lh-space);
}
.lh-site :focus-visible { outline: 3px solid var(--lh-amber-hot); outline-offset: 3px; border-radius: 6px; }
.lh-site img { max-width: 100%; }

/* ---------- Header: the game's console strip ---------- */
.site-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  padding: max(10px, env(safe-area-inset-top)) var(--site-gutter) 10px;
  background: linear-gradient(180deg, rgba(8, 12, 24, 0.96), rgba(12, 18, 32, 0.9));
  border-bottom: 1px solid rgba(255, 179, 71, 0.22);
  box-shadow: 0 1px 0 rgba(255, 179, 71, 0.08), 0 10px 30px -18px rgba(255, 150, 60, 0.5);
  backdrop-filter: blur(8px);
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--lh-amber); margin-right: auto; }
/* The crew patch from the game's top bar: the Marigold in a stitched roundel. */
.site-insignia {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #1f3d42, #0a141c 72%);
  box-shadow: 0 0 0 2px #2f8f86, 0 0 0 4px #10161f, 0 0 0 5px rgba(255, 179, 71, 0.55), 0 0 16px rgba(255, 150, 60, 0.22);
  margin-inline: 3px 1px;
}
.site-insignia img { position: absolute; inset: -22%; width: 144%; height: 144%; max-width: none; object-fit: cover; display: block; }
.site-insignia::before { content: ''; position: absolute; inset: 3px; z-index: 1; border-radius: 50%; border: 1.5px dashed rgba(255, 196, 130, 0.5); }
/* The wordmark: hull-paint amber over the Marigold's orange, teal and rust stripe (as in the game). */
.site-name {
  position: relative; padding-bottom: 5px;
  font-family: var(--site-display); font-weight: 700; font-size: 1.3rem; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--lh-amber);
  background: linear-gradient(180deg, #ffe4b2 0%, #ffb347 50%, #dc7a22 100%) 0 0 / 100% 1em no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(60, 24, 4, 0.95)) drop-shadow(0 0 10px rgba(255, 160, 60, 0.35));
}
.site-name::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% - 0.14em); height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #e8702a 0 62%, transparent 62% 65%, #2f8f86 65% 86%, transparent 86% 89%, #b8522c 89%);
}
@media (forced-colors: active) { .site-name { -webkit-text-fill-color: currentColor; background: none; filter: none; } }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px;
  font-family: var(--site-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--lh-ink); text-decoration: none;
  transition: background 160ms var(--lh-ease), color 160ms;
}
.site-nav a:hover { background: rgba(255, 179, 71, 0.12); color: var(--lh-amber-hot); }
.site-nav a[aria-current='page'] { color: var(--lh-amber-hot); box-shadow: inset 0 -2px 0 var(--lh-amber); border-radius: 10px 10px 2px 2px; }

/* The game's primary button: amber, lit from above, pressed into a dark keel. */
.site-play {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-family: var(--site-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; white-space: nowrap;
  color: #2a1606; text-decoration: none;
  background: linear-gradient(180deg, #ffd38a 0%, #ffb347 45%, #e88a2a 100%);
  box-shadow: 0 4px 0 #8a4310, 0 12px 26px -10px rgba(255, 140, 50, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 160ms var(--lh-ease), filter 160ms;
}
.site-play:hover { transform: translateY(-2px); filter: brightness(1.06); }
.site-play:active { transform: translateY(2px); }

/* Phones: brand and Play on the first row, the page links below as one row that wraps. */
@media (max-width: 899px) {
  .site-top { position: static; }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-nav ul { justify-content: center; }
  .site-nav a { padding: 0 8px; font-size: 0.9rem; }
}
@media (max-width: 479px) {
  .site-top { gap: 6px 10px; }
  .site-brand { gap: 9px; }
  .site-insignia { width: 36px; height: 36px; }
  .site-name { font-size: 1.05rem; letter-spacing: 0.1em; }
  .site-play { padding: 0 12px; font-size: 0.92rem; }
  .site-nav ul { gap: 0; justify-content: space-between; }
  .site-nav a { padding: 0 5px; font-size: 0.86rem; letter-spacing: 0.02em; }
}

/* ---------- The reading panel: the game's riveted panel with its teal paint stripe ---------- */
.site-main { flex: 1; width: 100%; padding: clamp(16px, 4vw, 40px) var(--site-gutter); }
.site-article {
  position: relative; max-width: 46rem; margin: 0 auto;
  padding: clamp(24px, 5vw, 44px) clamp(18px, 5vw, 48px);
  background:
    radial-gradient(circle at 10px 10px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(255, 220, 170, 0.2) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(255, 220, 170, 0.2) 1.6px, transparent 2.4px),
    var(--site-sheet);
  border: 1px solid var(--lh-edge); border-radius: var(--lh-r);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.07), 0 30px 60px -30px #000;
  overflow-wrap: break-word;
}
.site-article::before {
  content: ''; position: absolute; left: 22px; right: 30%; top: 0; height: 4px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--lh-teal) 0 46%, var(--lh-rust) 46% 52%, var(--lh-teal) 52% 78%, rgba(63, 183, 168, 0.4) 78% 84%, var(--lh-teal) 84%);
  opacity: 0.85;
}
.site-article h1, .site-article h2, .site-article h3 { font-family: var(--site-display); line-height: 1.2; margin: 0; }
.site-article h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 700; color: var(--lh-amber); margin-bottom: 1rem; }
.site-article h2 {
  font-size: clamp(1.2rem, 3.2vw, 1.4rem); font-weight: 600; color: var(--lh-amber-hot);
  margin: 2rem 0 0.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 196, 130, 0.12);
}
.site-article p, .site-article ul, .site-article table { margin: 0 0 1rem; }
.site-article ul { padding-left: 1.3rem; }
.site-article li { margin: 0.35rem 0; }
.site-article li::marker { color: var(--lh-amber); }
.site-article b, .site-article strong { color: #fff3dc; font-weight: 800; }
.site-article a { color: var(--lh-teal-hot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site-article a:hover { color: var(--lh-amber-hot); }

/* Tables (the privacy page's game events): scroll sideways inside their own box on phones, never the page. */
.site-table { overflow-x: auto; margin: 0 0 1rem; }
.site-article table { width: 100%; border-collapse: collapse; font-size: 0.98rem; margin: 0; }
.site-article th, .site-article td { text-align: left; vertical-align: top; padding: 0.6rem 0.6rem; border-bottom: 1px solid rgba(255, 196, 130, 0.14); }
.site-article thead th { font-family: var(--site-display); font-weight: 600; color: var(--lh-amber-hot); border-bottom-color: rgba(255, 179, 71, 0.4); }
.site-article tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

/* ---------- Footer ---------- */
.site-foot {
  padding: 22px var(--site-gutter) max(22px, env(safe-area-inset-bottom));
  text-align: center; font-size: 0.95rem; color: var(--lh-ink-dim);
  background: linear-gradient(0deg, rgba(8, 12, 24, 0.94), rgba(8, 12, 24, 0.6));
  border-top: 1px solid rgba(255, 179, 71, 0.18);
}
.site-foot ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 0 0 6px; padding: 0; list-style: none; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--lh-ink); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--lh-amber-hot); }
.site-foot__copy { margin: 0; color: var(--lh-ink-dim); }

@media (prefers-reduced-motion: reduce) { .site-play, .site-nav a { transition: none; } }