/* WordsApp — the site wears what the app wears.
   Every colour here is lifted from src/WordsApp.Android/Resources/values/colors.xml,
   and both faces are the app's own, self-hosted: a German privacy page that
   fetches fonts from Google would hand every visitor's address to Google on the
   very page that promises it does not. */

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Three hues, and no more: the felt, the tile, the brass. */
  --felt: #2e3b2e;
  --felt-deep: #253022;
  --tile: #f5ebd0;
  --tile-edge: #c9b98f;
  --tile-text: #3a2c1a;
  --brass: #c9a24b;
  --text: #f2ead8;
  --muted: #bfb49a;

  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Poppins", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--felt);
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The felt, given depth. A radial lift above the middle reads as a lamp over
   the table; the grain keeps the flat colour from looking like a CSS swatch. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 32%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
}

/* ── Chrome ─────────────────────────────────────────────────────────── */

.shell { position: relative; z-index: 10; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem clamp(1.25rem, 5vw, 4rem);
  /* Lifted above the hero on purpose. The hero is pulled up under this bar so
     its content reads as centred, and being positioned it would otherwise paint
     over the bar and swallow every click on these links — which is exactly what
     it did, on the front page only, because no other page pulls anything up. */
  position: relative;
  z-index: 20;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav a:hover { color: var(--text); }

.nav__mark {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.nav__links { display: flex; gap: clamp(1rem, 3vw, 2rem); }

/* ── Hero: the wordmark is the picture ──────────────────────────────── */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
  margin-top: -4.5rem;
}

/* The board, suggested rather than drawn: the 15×15 grid the game is played on,
   faint enough to read as texture in the felt and not as a diagram. It fades out
   before the edges so nothing about it has a border. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(242, 234, 216, 0.055) 0 1px, transparent 1px calc(100% / 15)),
    repeating-linear-gradient(to bottom, rgba(242, 234, 216, 0.055) 0 1px, transparent 1px calc(100% / 15));
  background-size: min(78vmin, 46rem) min(78vmin, 46rem);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 52% 46% at 50% 50%, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero > * { position: relative; }

.hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* The wordmark, laid exactly as LogoView lays it in the app: "WordsApp" in
   mixed case, capitals on full tiles and the rest at 76%, the row bowing in a
   bow over a flat crest — the middle four stand level, the ends drop away and
   lean outward — and everything standing on a baseline rather than floating on
   a centre line. The numbers below are that view's constants run through its
   own arithmetic — Overlap 0.94, ArcRise 0.50, ArcTilt 8 applied to the cube of
   the position, SmallScale 0.76 — not eyeballed. Here the mark only ever
   stands over the page, so it wears the full bow throughout. (The app shallows
   its bow to a 4° one as it docks in the header bar; there is no such bar
   here.) */
.wordmark {
  --tile-size: clamp(3.4rem, 12vw, 12rem);
  display: flex;
  justify-content: center;
  align-items: flex-end;          /* the baseline the app anchors to */
  gap: 0;
  padding-top: calc(var(--tile-size) * 0.55);   /* room for the arc's crest */
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* Hidden from the eye, kept for screen readers and crawlers. A class and not an
   inline style: the Content-Security-Policy forbids inline styles, so the one
   that used to sit here was dropped by the browser and the word appeared in the
   open beside the tiles. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.tile {
  --scale: 0.76;
  --lift: 0deg;
  --rise: 0;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--tile-size) * var(--scale));
  height: calc(var(--tile-size) * var(--scale));
  background: linear-gradient(168deg, #fdf6e4 0%, var(--tile) 55%, #ece0c0 100%);
  border-radius: calc(var(--tile-size) * var(--scale) * 0.16);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 clamp(3px, 0.7vw, 9px) clamp(8px, 1.6vw, 22px) rgba(0, 0, 0, 0.34);
  transform: translateY(calc(var(--tile-size) * var(--rise) * -1)) rotate(var(--lift));
  font-family: var(--display);
  font-size: calc(var(--tile-size) * var(--scale) * 0.66);
  line-height: 1;
  color: var(--tile-text);
  user-select: none;
}

/* Capitals stand on full tiles — that is what keeps the two words apart. */
.tile--cap { --scale: 1; }

/* Arc, lean and overlap, per position. The right margin is negative because
   neighbours step by 94% of their mean width, so a small tile tucks in closer
   to a big one than to another small one. */
.tile:nth-child(1) { --rise: 0.000; --lift: -6.6deg; margin-right: calc(var(--tile-size) * -0.0528); }
.tile:nth-child(2) { --rise: 0.387; --lift: -3.7deg; margin-right: calc(var(--tile-size) * -0.0456); }
.tile:nth-child(3) { --rise: 0.484; --lift:  2.0deg; margin-right: calc(var(--tile-size) * -0.0456); }
.tile:nth-child(4) { --rise: 0.500; --lift: -1.8deg; margin-right: calc(var(--tile-size) * -0.0456); }
.tile:nth-child(5) { --rise: 0.500; --lift:  1.5deg; margin-right: calc(var(--tile-size) * -0.0528); }
.tile:nth-child(6) { --rise: 0.484; --lift: -1.6deg; margin-right: calc(var(--tile-size) * -0.0528); }
.tile:nth-child(7) { --rise: 0.356; --lift:  5.0deg; margin-right: calc(var(--tile-size) * -0.0456); }
.tile:nth-child(8) { --rise: 0.000; --lift:  6.5deg; }

.hero__line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.hero__line em {
  font-style: normal;
  color: var(--brass);
}

.hero__sub {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

/* ── The one button ─────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background: var(--brass);
  color: #241f19;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
}
.cta:active { transform: translateY(0) scale(0.98); }
.cta svg { width: 1.05rem; height: 1.05rem; }

/* Google's own badge, when it is on disk. It is a trademarked asset with its
   own clear-space rules, so it is used as delivered and never redrawn — the
   link is the button, and nothing is painted behind it. */
.badge {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.badge img {
  display: block;
  height: clamp(3.1rem, 4.6vw, 3.9rem);
  width: auto;
}
.badge:hover { transform: translateY(-2px); }
.badge:active { transform: translateY(0) scale(0.98); }

/* ── Entry: the tiles are laid down, one after another ──────────────── */

/* The tiles tumble in from above, as they do on the app's start screen. */
@keyframes lay {
  from { opacity: 0; transform: translateY(-140%) rotate(-24deg); }
  to   { opacity: 1; transform: translateY(calc(var(--tile-size) * var(--rise) * -1)) rotate(var(--lift)); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.tile,
.hero__eyebrow,
.hero__line,
.hero__sub,
.hero__cta { opacity: 0; }

.tile { animation: lay 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tile:nth-child(1) { animation-delay: 0.10s; }
.tile:nth-child(2) { animation-delay: 0.16s; }
.tile:nth-child(3) { animation-delay: 0.22s; }
.tile:nth-child(4) { animation-delay: 0.28s; }
.tile:nth-child(5) { animation-delay: 0.34s; }
.tile:nth-child(6) { animation-delay: 0.40s; }
.tile:nth-child(7) { animation-delay: 0.46s; }
.tile:nth-child(8) { animation-delay: 0.52s; }

.hero__eyebrow { animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.02s forwards; }
.hero__line    { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.44s forwards; }
.hero__sub     { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.54s forwards; }
.hero__cta     { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards; }

@media (prefers-reduced-motion: reduce) {
  .tile, .hero__eyebrow, .hero__line, .hero__sub, .hero__cta {
    animation: none;
    opacity: 1;
    transform: translateY(calc(var(--tile-size) * var(--rise) * -1)) rotate(var(--lift));
  }
}

/* ── Prose: the legal pages and anything else that is mostly words ──── */

.page { padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 4rem) 6rem; }
.prose { max-width: 44rem; margin: 0 auto; }

.prose h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.prose h2 {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--brass);
  margin: 2.6rem 0 0.7rem;
}
.prose h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--brass); }
.prose strong { font-weight: 600; color: #fff; }
.prose .lede { color: var(--muted); margin-bottom: 2.2rem; }

.prose .box {
  background: rgba(0, 0, 0, 0.17);
  border: 1px solid rgba(201, 185, 143, 0.22);
  border-radius: 0.7rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.3rem;
}

.prose .table-wrap { overflow-x: auto; margin-bottom: 1.3rem; }
.prose table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(201, 185, 143, 0.2);
}
.prose th { color: var(--muted); font-weight: 600; }

/* ── Foot ───────────────────────────────────────────────────────────── */

/* No rule above it: a line across the felt reads as a frame around the page,
   and the whole point of the felt is that it has no edge. */
.foot {
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 3rem;
  color: var(--muted);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot__spacer { margin-left: auto; }

@media (max-width: 640px) {
  .foot__spacer { margin-left: 0; }
  .nav__links { gap: 1rem; font-size: 0.85rem; }
}

/* ── Numbers ────────────────────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 2.5rem;
}

/* A counter should read like a tile on the table, not like a table cell. */
.tile-stat {
  background: linear-gradient(168deg, #fdf6e4 0%, var(--tile) 55%, #ece0c0 100%);
  border-radius: 0.7rem;
  padding: 1.1rem 1rem 0.9rem;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.13),
              inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 4px 14px rgba(0, 0, 0, 0.24);
}
.tile-stat__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--tile-text);
}
.tile-stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(58, 44, 26, 0.66);
}

.player {
  border-top: 1px solid rgba(201, 185, 143, 0.18);
  padding-top: 1.2rem;
  margin-bottom: 1.6rem;
}
.player__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.player__head strong { font-family: var(--display); font-size: 1.15rem; color: #fff; }
.player__meta { color: var(--muted); font-size: 0.86rem; }
.player__devices { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0.9rem; }

/* The build a device last spoke from. Amber when it never said — that is a
   client from before the version header, and the one you cannot steer. */
.chip {
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(201, 162, 75, 0.16);
  border: 1px solid rgba(201, 162, 75, 0.42);
  color: var(--text);
}
.chip--warn { background: rgba(214, 84, 48, 0.16); border-color: rgba(214, 84, 48, 0.5); }
.chip--muted { background: rgba(191, 180, 154, 0.12); border-color: rgba(191, 180, 154, 0.3); color: var(--muted); }