/*
 * Lanternfish — shared styling for the support and policy pages.
 *
 * Every value here is lifted from the game itself rather than invented: the
 * colours are src/constants.ts (SEA_COLORS, SCREEN_BG), the typefaces are the
 * two the app bundles, and the page furniture — a kicker over a heavy title, a
 * hairline rule under the header, tracked-out uppercase section headings —
 * mirrors the app's own Story and Privacy screens.
 *
 * That is the point. Someone who taps "Privacy" inside the game and someone who
 * follows the App Store link should not be able to tell they have left, and a
 * support page in a different font is the first thing that makes a small studio
 * look like it has stopped caring.
 */

:root {
  /* Straight from SCREEN_BG and SEA_COLORS. */
  --bg: #020c14;
  --water: #0a3a52;
  --water-glow: #10506e;
  --murk: #072736;
  --bubble: #8fe9ff;
  --snow: #bfe9f2;
  --rock-rim: #3fb8a8;
  --hull: #f2a33c;
  --text: #ffffff;
  --rule: rgba(143, 233, 255, 0.12);

  --display: 'Fredoka', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  /* Deep water at the top fading to the trench, so the page reads as somewhere
     rather than as a document. Fixed, so it does not slide away on scroll. */
  background:
    radial-gradient(
      120% 60% at 50% -10%,
      var(--water-glow) 0%,
      var(--water) 28%,
      var(--murk) 58%,
      var(--bg) 100%
    )
    no-repeat fixed;
  background-color: var(--bg);
}

body {
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  max-width: 42rem;
  font: 400 17px/1.6 var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Light raking down through the water, as in game. Purely decorative and
   deliberately faint — it should be felt rather than noticed. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(
    99deg,
    transparent 0 62px,
    rgba(159, 228, 242, 0.045) 62px 78px,
    transparent 78px 150px
  );
}

/* --- header ------------------------------------------------------------- */

header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}

.kicker {
  margin: 0;
  font: 800 11px/1 var(--body);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bubble);
  opacity: 0.7;
}

h1 {
  margin: 0.5rem 0 0;
  font: 700 2.1rem/1.15 var(--display);
  letter-spacing: -0.5px;
  color: var(--text);
}

.tagline {
  margin: 0.4rem 0 0;
  font: 600 1.1rem/1.4 var(--display);
  color: var(--bubble);
  opacity: 0.9;
}

/* --- sections ----------------------------------------------------------- */

h2 {
  margin: 2.5rem 0 0.5rem;
  font: 800 12px/1 var(--body);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bubble);
  opacity: 0.8;
}

p {
  margin: 0.75rem 0;
  color: var(--text);
  opacity: 0.86;
}

strong {
  font-weight: 800;
  opacity: 1;
}

/* The answer to the only question most readers arrive with, given the weight
   the same line has on the app's own Privacy screen. */
.answer {
  margin: 1.5rem 0 0;
  font: 700 2.6rem/1 var(--display);
  letter-spacing: -1px;
  color: var(--bubble);
}

.lead {
  margin-top: 0.4rem;
  font-size: 1.05rem;
  opacity: 0.9;
}

.stamp {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  opacity: 0.5;
}

a {
  color: var(--bubble);
  font-weight: 600;
  text-decoration-color: rgba(143, 233, 255, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--bubble);
}

/* --- cards -------------------------------------------------------------- */

/* A game on the studio page. Same treatment as a mode card in Ways Down: a
   bordered panel that lifts slightly off the water. */
.card {
  display: block;
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  border: 2px solid rgba(143, 233, 255, 0.18);
  border-radius: 18px;
  background: rgba(143, 233, 255, 0.05);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.card:hover {
  border-color: var(--bubble);
  background: rgba(143, 233, 255, 0.1);
}

.card h3 {
  margin: 0;
  font: 700 1.4rem/1.2 var(--display);
  color: var(--text);
}

.card p {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  opacity: 0.7;
}

.card .go {
  display: inline-block;
  margin-top: 0.6rem;
  font: 800 0.8rem/1 var(--body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bubble);
}

/* --- footer ------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  opacity: 0.6;
}

footer a {
  font-weight: 600;
}

/* Light mode is deliberately not offered. The game has one identity and it is
   a deep-sea one; a white version of this page would be a different product's
   website. `color-scheme: dark` stops the browser painting form controls and
   scrollbars for a light page it is not getting. */
:root {
  color-scheme: dark;
}