/* Tidewords marketing site — palette + tile look lifted from the game
   (scripts/art.gd, scripts/game.gd, icon.svg) so the web reads as the app. */

:root {
  /* core ink + accents */
  --ink: #0c4a73;
  --muted: #5a93b8;
  --blue: #2f9ddd;
  --orange: #f08a2c;

  /* sky / sea / sand gradients */
  --sky-top: #8fe3ff;
  --sky-mid: #bff0ff;
  --sky-low: #eafbff;
  --water-top: #3aaee6;
  --water-bot: #1d7fc4;
  --sand-top: #f7e3b0;
  --sand-bot: #eccd86;

  /* tile faces */
  --cream-top: #fffdf6;
  --cream-bot: #fdeccb;
  --cream-side: #cf7f1f;
  --gold-top: #fff3cf;
  --gold-bot: #ffd98a;
  --gold-side: #d98f1c;

  /* buttons */
  --btn-orange: #ff9a3d;
  --btn-orange-side: #d96a14;
  --btn-blue: #63b7e8;
  --btn-blue-side: #2f7fb8;

  --coral: #ff5d7a;

  --maxw: 960px;
  --radius: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  /* sky fading into sea fading into sand, the way the game stacks them */
  background:
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 16%,
      var(--sky-low) 30%,
      var(--sand-top) 48%,
      var(--sand-bot) 100%
    )
    no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--blue); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---- foam shoreline divider: a gentle repeating wave crest, like the
   foam line where the sea meets the sand in the game ---- */
.shore {
  height: 30px;
  margin: -6px 0 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='30' viewBox='0 0 480 30' preserveAspectRatio='none'%3E%3Cpath d='M0 19 C80 27 160 27 240 19 C320 11 400 11 480 19' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")
    repeat-x center / 480px 30px;
  opacity: 0.9;
}

/* ===================================================================== *
 * hero
 * ===================================================================== */
header.hero {
  text-align: center;
  padding: 56px 0 30px;
}

/* tile-built wordmark — TIDE in cream tiles (blue letters),
   WORDS in gold tiles (orange letters), like the in-game logo */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.tile-row {
  display: flex;
  gap: 7px;
  justify-content: center;
}
.tile {
  --top: var(--cream-top);
  --bot: var(--cream-bot);
  --side: var(--cream-side);
  --ltr: var(--blue);
  width: 1.55em;
  height: 1.6em;
  display: grid;
  place-items: center;
  font-size: clamp(34px, 9vw, 72px);
  font-weight: 800;
  color: var(--ltr);
  background: linear-gradient(180deg, var(--top), var(--bot));
  border-radius: 0.3em;
  border-bottom: 0.13em solid var(--side);
  box-shadow: 0 0.12em 0.0em var(--side), 0 0.34em 0.4em rgba(12, 74, 115, 0.28);
  line-height: 1;
}
.tile.gold {
  --top: var(--gold-top);
  --bot: var(--gold-bot);
  --side: var(--gold-side);
  --ltr: var(--orange);
}

.tagline {
  margin: 22px 0 4px;
  font-size: clamp(20px, 4.5vw, 30px);
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.subtag {
  margin: 0;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===================================================================== *
 * download buttons
 * ===================================================================== */
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 36px 0 10px;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  min-width: 220px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(180deg, var(--btn-blue), #4aa6df);
  border-bottom: 5px solid var(--btn-blue-side);
  box-shadow: 0 6px 14px rgba(12, 74, 115, 0.25);
  transition: transform 0.08s ease, filter 0.12s ease;
}
.store-btn.alt {
  background: linear-gradient(180deg, var(--btn-orange), #f5871f);
  border-bottom-color: var(--btn-orange-side);
}
.store-btn:hover { filter: brightness(1.05); }
.store-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.store-btn svg { width: 30px; height: 30px; flex: none; fill: #fff; }
.store-btn .meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .meta small { font-size: 11px; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
.store-btn .meta b { font-size: 19px; font-weight: 800; }

/* ===================================================================== *
 * social
 * ===================================================================== */
.social {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 30px 0 8px;
}
.social a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 3px solid rgba(12, 74, 115, 0.18);
  box-shadow: 0 4px 10px rgba(12, 74, 115, 0.15);
  transition: transform 0.08s ease, background 0.12s ease;
}
.social a:hover { background: #fff; }
.social a:active { transform: translateY(2px); border-bottom-width: 1px; }
.social svg { width: 24px; height: 24px; fill: var(--ink); }

/* ===================================================================== *
 * feature cards
 * ===================================================================== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 44px 0;
}
.card {
  background: rgba(255, 255, 255, 0.62);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 6px 16px rgba(12, 74, 115, 0.12);
  backdrop-filter: blur(2px);
}
.card h3 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.card p { margin: 0; color: #2c5e80; font-weight: 500; }
.card .emoji { font-size: 30px; line-height: 1; }

/* ===================================================================== *
 * footer
 * ===================================================================== */
footer {
  text-align: center;
  padding: 30px 0 48px;
  color: #2c5e80;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin-bottom: 14px;
}
.footer-links a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }

/* pill button used for the privacy link */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 4px solid rgba(12, 74, 115, 0.2);
  box-shadow: 0 4px 10px rgba(12, 74, 115, 0.14);
  transition: transform 0.08s ease, background 0.12s ease;
}
.pill-link:hover { background: #fff; }
.pill-link:active { transform: translateY(2px); border-bottom-width: 2px; }

.copyright { font-size: 14px; opacity: 0.85; }

/* ===================================================================== *
 * legal page
 * ===================================================================== */
.legal {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  padding: 30px 28px;
  margin: 30px auto 50px;
  box-shadow: 0 6px 16px rgba(12, 74, 115, 0.12);
}
.legal h1 { margin-top: 0; }
.legal h2 { color: var(--ink); margin-top: 28px; font-size: 22px; }
.legal p, .legal li { color: #234c66; font-weight: 500; }
.legal a.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-weight: 700;
  text-decoration: none;
}

/* small logo used on the legal page header */
.mini-logo {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}
.mini-logo span {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  color: var(--blue);
  background: linear-gradient(180deg, var(--cream-top), var(--cream-bot));
  border-radius: 6px;
  border-bottom: 3px solid var(--cream-side);
}
.mini-logo span.gold { color: var(--orange); background: linear-gradient(180deg, var(--gold-top), var(--gold-bot)); border-bottom-color: var(--gold-side); }

@media (max-width: 480px) {
  .store-btn { min-width: 0; flex: 1 1 100%; justify-content: center; }
  .tile-row { gap: 5px; }
}