/* ludoroad.com — Candy Pop, mirrored from lib/ui/candy_theme.dart.
   One stylesheet for the landing page and the generated legal pages. */

:root {
  --sky: #1FA9FF;
  --bubblegum: #FF3D8E;
  --sunshine: #FFC400;
  --lime: #4FCB2D;
  --grape: #8A4DFF;
  --ink: #3A2E45;
  --page-bg: #FFE9F4;
}

@font-face {
  font-family: 'Luckiest Guy';
  src: url('/fonts/LuckiestGuy-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Lilita One';
  src: url('/fonts/LilitaOne-Regular.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: 'Lilita One', 'Comic Sans MS', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- landing page ---------- */

body .landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 16px 24px;
  text-align: center;
}

.landing .hero .logo {
  width: min(340px, 78vw);
  height: auto;
}

.landing .hero .tagline {
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15;
  margin: 18px 0 10px;
  color: var(--bubblegum);
  text-shadow: 0 2px 0 #fff;
}

.landing .hero .sub {
  max-width: 560px;
  margin: 0 auto;
  font-size: 20px;
}

/* The invite page's friend code (add.html, 2026-10-01). */
.landing .hero .invite-code { margin: 14px auto; }
.landing .hero .invite-code .code {
  display: block;
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: 34px;
  letter-spacing: 3px;
  color: var(--grape);
}

/* Four pawn dots, the game's seat colors (Candy.seat in candy_theme). */
.landing .hero .pawns { margin: 22px 0 6px; }
.landing .hero .pawns span {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 7px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 6px rgba(58, 46, 69, .25);
}
.landing .hero .pawns .seat-red    { background: #FF3D6E; }
.landing .hero .pawns .seat-green  { background: #4FCB2D; }
.landing .hero .pawns .seat-yellow { background: #FFB800; }
.landing .hero .pawns .seat-blue   { background: #1FA9FF; }

.landing .hero .stores { margin: 26px 0 8px; }
.landing .hero .stores .store-pill {
  display: inline-block;
  margin: 6px 8px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sunshine), var(--bubblegum));
  color: #fff;
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: 17px;
  letter-spacing: .5px;
  box-shadow: 0 4px 0 rgba(58, 46, 69, .28);
}
.landing .hero .stores .store-note {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  opacity: .65;
}

.landing .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 44px 0 10px;
  text-align: left;
}
.landing .features .card {
  background: #fff;
  border-radius: 24px;
  padding: 24px 22px 18px;
  box-shadow: 0 6px 18px rgba(58, 46, 69, .10);
}
.landing .features .card .card-emoji { font-size: 34px; }
.landing .features .card h2 {
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: 21px;
  margin: 10px 0 6px;
  color: var(--grape);
}
.landing .features .card p { margin: 0; font-size: 17px; }

/* ---------- legal / document pages ---------- */

body .doc-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 16px 0;
}
.doc-head a { display: inline-block; }
.doc-head img { width: 150px; height: auto; }

body .doc {
  max-width: 760px;
  margin: 18px auto 24px;
  padding: 34px 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 18px rgba(58, 46, 69, .10);
  text-align: left;
}
.doc h1 {
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.2;
  color: var(--bubblegum);
  margin: 4px 0 18px;
}
.doc h2 {
  font-family: 'Luckiest Guy', 'Lilita One', sans-serif;
  font-size: 20px;
  color: var(--grape);
  margin: 30px 0 8px;
}
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 26px; }
.doc li { margin-bottom: 6px; }
.doc .doc-version {
  font-size: 15px;
  opacity: .65;
  margin-bottom: 2px;
}

/* ---------- footer (both layouts) ---------- */

body footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 16px 42px;
  text-align: center;
  font-size: 15px;
}
body footer .fine { opacity: .6; font-size: 13px; }