/* ==========================================================================
   One Table — site styles

   Two rules run through all of this:

   1. Colour is solid. Fills are solid, text on them is solid and contrasting,
      and depth comes from a HARD offset shadow in a darker shade of the same
      colour — the way the buttons in the app itself are drawn. No pale tints,
      no soft grey blurs, no tinted-background-with-matching-border buttons in
      any state, including hover and focus.

   2. Bands are places. The page runs sky -> grass -> paper -> night, which is
      the app's own world, rather than alternating light and dark greys.

   Edit colours in the token block below; everything reads from it.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Titan One';
  src: url('fonts/TitanOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/Baloo2-Variable.woff2') format('woff2-variations'),
       url('fonts/Baloo2-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Brand, straight from the app */
  --sky: #08a9ee;
  --sky-deep: #0a76a8;
  --ink: #173766;
  --ink-deep: #0b213d;
  --ink-deeper: #061426;
  --gold: #ffd52d;
  --gold-deep: #c99700;
  --cream: #fff6e5;
  --grass: #cbee31;
  --grass-pale: #e8f8ac;
  --green: #43c94f;
  --green-deep: #21862f;

  /* Per-game accents, from lib/app/game_catalog.dart */
  --dominoes: #079bf1;
  --dominoes-deep: #1768b9;
  --trump: #47c925;
  --trump-deep: #25861c;
  --three: #8739cb;
  --three-deep: #57218b;
  --ludo: #ffb218;
  --ludo-deep: #d5790b;

  /* Heading inks. The -deep shades are shadow colours; three of them clear
     4.5:1 as text on white but Ludo's orange only reaches 3.2:1, so the
     headings read from these instead. */
  --dominoes-ink: #1768b9;
  --trump-ink: #25861c;
  --three-ink: #57218b;
  --ludo-ink: #8f5207;

  /* Semantic */
  --page: var(--cream);
  --panel: #ffffff;
  --panel-edge: #e3d9c3;
  --text: var(--ink);
  --text-soft: #4c5c75;
  --shadow-soft: rgba(11, 33, 61, 0.14);

  /* Buttons */
  --btn-fill: var(--ink);
  --btn-fill-hover: var(--ink-deep);
  --btn-text: #ffffff;
  --btn-drop: var(--ink-deep);
  --btn-drop-hover: var(--ink-deeper);

  /* Type scale, a fourth (1.333) above the body size */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);

  --band: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --radius: 20px;
  --wide: 1140px;
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --page: var(--ink-deep);
    --panel: #17345f;
    --panel-edge: #2b4f81;
    --text: var(--cream);
    --text-soft: #b4c6dd;
    --shadow-soft: rgba(0, 0, 0, 0.45);

    /* The fill changes; the solidity does not. */
    --btn-fill: var(--gold);
    --btn-fill-hover: #ffc12e;
    --btn-text: var(--ink-deep);
    --btn-drop: var(--gold-deep);
    --btn-drop-hover: #a87f00;
  }
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.65;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: 'Titan One', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

:focus-visible {
  outline: 4px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: var(--gold); }
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.4rem;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus { transform: translate(-50%, 0); }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

/*
   Solid block of colour, solid contrasting text, hard shadow beneath. Hover
   and active change the FILL and press the button down onto its shadow. There
   is deliberately no pale, bordered, or outlined variant anywhere in this
   file.
*/
.btn {
  --drop: var(--btn-drop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 16px;
  background: var(--btn-fill);
  color: var(--btn-text);
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 5px 0 var(--drop);
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.btn:hover {
  background: var(--btn-fill-hover);
  --drop: var(--btn-drop-hover);
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--drop);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--drop);
}

.btn--gold {
  --drop: var(--gold-deep);
  background: var(--gold);
  color: var(--ink);
}

.btn--gold:hover {
  background: #ffc12e;
  --drop: #a87f00;
}

.btn--green {
  --drop: var(--green-deep);
  background: var(--green);
  color: #fff;
}

.btn--green:hover {
  background: #35bf58;
  --drop: #196a24;
}

/* --------------------------------------------------------- store buttons */

/*
   LAUNCH DAY — how the store buttons go live.

   Each store has two elements side by side: a real <a> whose href is a
   placeholder, and a <span> holding the "coming soon" block. The two rules
   below decide which one is visible, purely from the shape of the href.

     - href starts with "#"  ->  the badge link is hidden, "coming soon" shows
     - href is a real URL    ->  the badge link shows, "coming soon" is hidden

   So to go live: replace the placeholder hrefs with the store URLs (each
   appears twice in index.html), drop the official badge artwork into
   img/badges/, and deploy. Nothing else changes. See README.md.
*/
a.store-badge[href^='#'] {
  display: none;
}

a.store-badge:not([href^='#']) ~ .store-soon {
  display: none;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.6rem 0 0.9rem;
}

.store-slot {
  display: contents;
}

/*
   The live state: official badge artwork, unmodified and never recoloured.

   The artwork is a background-image rather than an <img> on purpose. A hidden
   <img> is still downloaded by the browser, so before launch — when the badge
   files do not exist yet — every visitor would trigger two 404s. A background
   image on a display:none element is never fetched, so the pending page makes
   no failed requests at all. The link's accessible name comes from the
   visually hidden text inside it.

   Sizes follow the official artwork's own proportions: the Play badge is
   646x250, Apple's is 120x40. Both sit at 56px tall, above Apple's 40px
   minimum, with clear space around them from the flex gap and margins.
*/
a.store-badge {
  display: inline-block;
  height: 56px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

a.store-badge--play {
  width: 145px;
  background-image: url('img/badges/google-play-badge.png');
}

a.store-badge--apple {
  width: 168px;
  background-image: url('img/badges/app-store-badge.svg');
}

/* The pending state. Solid navy block, white name, cream subline. No Google
   Play triangle and no Apple logo — that artwork is licensed only for apps
   already listed on those stores. */
.store-soon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 0.6rem 1.6rem;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 5px 0 var(--ink-deeper);
}

.store-soon b {
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
}

.store-soon span {
  color: var(--cream);
  font-size: 0.82rem;
  line-height: 1.3;
}

.stores-note {
  margin: 0;
  font-weight: 600;
  color: var(--text-soft);
}

/* ------------------------------------------------------------------ bands */

.band {
  padding-block: var(--band);
}

/*
   The brand blue is too light to carry white text — that pairing measures
   2.65:1. Navy ink on it reaches 4.46:1, still a hair under AA, so this band
   uses the deepest navy, which clears 6.1:1 and leaves the brand blue itself
   untouched.
*/
.band--sky {
  background: var(--sky);
  --text: var(--ink-deep);
  --text-soft: var(--ink-deep);
  color: var(--ink-deep);
}

/*
   The grass and gradient bands keep their light background in dark mode —
   they are pictures of a place, not chrome. So they re-declare the light text
   tokens locally, and everything inside them inherits the right colours in
   both schemes. Without this the body text flips to pale blue on pale lime
   and disappears.
*/
.band--grass,
.band--gradient {
  --text: var(--ink);
  --text-soft: #4c5c75;
  --panel: #ffffff;
  --panel-edge: #e3d9c3;
  --shadow-soft: rgba(11, 33, 61, 0.14);
  color: var(--ink);
}

.band--grass {
  background: var(--grass-pale);
}

.band--night {
  background: var(--ink);
  color: var(--cream);
}

.band--gradient {
  background: linear-gradient(170deg, var(--sky) 0%, #7fd6f4 55%, var(--grass) 100%);
}

.band-head {
  max-width: 34ch;
  margin: 0 0 2.6rem;
}

.band-head p {
  color: var(--text-soft);
  font-size: var(--step-1);
  margin-bottom: 0;
}

.band--sky .band-head p,
.band--night .band-head p {
  color: inherit;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: 3px solid var(--ink);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.masthead-logo img {
  height: 54px;
  width: auto;
}

/*
   Real navigation between pages, not anchors down one page. It has to work at
   every width without JavaScript, so on narrow screens it scrolls sideways
   rather than collapsing into a menu that would need a script to open.
*/
.mainnav {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mainnav::-webkit-scrollbar { display: none; }

.mainnav a {
  flex: 0 0 auto;
  /* Tall enough to be a comfortable tap target on a phone (44px minimum). */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none;
}

.mainnav a:hover {
  background: var(--panel);
  color: var(--text);
}

/* The page you are on is a solid block, the way every other selected thing on
   this site is. Never a tint of the fill with matching text. */
.mainnav a[aria-current='page'] {
  background: var(--ink);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .mainnav a[aria-current='page'] {
    background: var(--gold);
    color: var(--ink-deep);
  }
}

/* Under about 1080px the nav needs the whole width to itself, so it drops to
   its own row beneath the logo and the button. */
.masthead .wrap {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  padding-block: 0.6rem;
}

@media (max-width: 1079px) {
  .mainnav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background-color: var(--sky);
  background-image: url('img/village.webp');
  background-size: cover;
  background-position: center 30%;
  text-align: center;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) 0;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Strong enough that navy type clears 3:1 even where the headline's ends
     cross the dark foliage at the edges of the village art. Measured, not
     guessed — see the contrast check in README.md. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(203, 238, 49, 0.32) 100%);
}

.hero > * {
  position: relative;
}

.hero-logo {
  width: min(420px, 78vw);
  margin: 0 auto 0.6rem;
}

.hero h1 {
  color: var(--ink);
  margin-bottom: 0.35em;
}

.hero-sub {
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}

/* Paragraphs are capped at a readable measure, which in a centred column
   leaves them hugging the left edge unless they are centred too. */
.hero p {
  margin-inline: auto;
}

.hero .stores {
  justify-content: center;
}

.hero .stores-note {
  color: var(--ink);
}

.hero-shot {
  margin: clamp(2rem, 1rem + 4vw, 3.5rem) auto 0;
  width: min(300px, 68vw);
  transform: translateY(6%);
}

@media (prefers-color-scheme: dark) {
  /* Heavy enough that cream type clears 4.5:1 over the brightest part of the
     sky. The village reads as evening rather than daylight, which is the
     point of a dark mode. */
  .hero::before {
    background: linear-gradient(180deg, rgba(11, 33, 61, 0.62) 0%, rgba(11, 33, 61, 0.76) 55%, rgba(11, 33, 61, 0.93) 100%);
  }

  .hero h1,
  .hero-sub,
  .hero .stores-note {
    color: var(--cream);
  }
}

/* ------------------------------------------------------------ phone frame */

/*
   A plain rounded frame. Deliberately not an iPhone: no notch, no home
   button, no tilt. Apple's marketing guidelines forbid third-party device
   frames, and these captures are from Android phones anyway.
*/
.phone {
  border: 7px solid var(--ink);
  border-radius: 28px;
  background: var(--ink);
  box-shadow: 0 10px 0 var(--ink-deep), 0 22px 40px var(--shadow-soft);
  overflow: hidden;
  line-height: 0;
}

.phone img {
  border-radius: 21px;
  width: 100%;
}

/* ------------------------------------------------------------------ games */

.games {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .games { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .games { grid-template-columns: repeat(4, 1fr); }
}

/*
   The colour is the game's own, from the app. It says which game this is; it
   is not decoration. The shadow is that colour, darkened — the app's button
   language — rather than a soft grey blur.
*/
.game {
  --accent: var(--sky);
  --accent-deep: var(--sky-deep);
  --accent-ink: var(--ink);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 7px 0 var(--accent-deep);
}

.game--dominoes { --accent: var(--dominoes); --accent-deep: var(--dominoes-deep); --accent-ink: var(--dominoes-ink); }
.game--trump    { --accent: var(--trump);    --accent-deep: var(--trump-deep);    --accent-ink: var(--trump-ink); }
.game--three    { --accent: var(--three);    --accent-deep: var(--three-deep);    --accent-ink: var(--three-ink); }
.game--ludo     { --accent: var(--ludo);     --accent-deep: var(--ludo-deep);     --accent-ink: var(--ludo-ink); }

.game-art {
  background: var(--accent);
  padding: 1rem 1rem 0;
}

.game-art img {
  width: 100%;
  border-radius: 12px;
}

.game-body {
  padding: 1.1rem 1.25rem 1.4rem;
}

.game-body h3 {
  margin-bottom: 0.35em;
  color: var(--accent-ink);
}

.game-body p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* Reads from the band it is in. It used to be pinned to navy because it sat
   on the lime band; on its own page that band is the page background, which
   is dark in dark mode. */
.games-note {
  margin: 2.2rem 0 0;
  max-width: none;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: var(--step-2);
  color: var(--text);
}

/* ---------------------------------------------------------------- feature */

.feature {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .feature {
    grid-template-columns: 5fr 6fr;
  }

  .feature--flip .feature-art {
    order: 2;
  }
}

.feature-art {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.feature-art .phone {
  width: min(270px, 62vw);
  flex: 0 1 auto;
}

.feature-art .phone:nth-child(2) {
  display: none;
}

@media (min-width: 560px) {
  .feature-art .phone:nth-child(2) { display: block; }
  .feature-art .phone { width: min(230px, 42vw); }
}

.feature h2 {
  color: inherit;
}

/* Difficulty chips. Solid fills, solid text — they read as a set of four
   settings, which is what they are in the app. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 4px 0 var(--ink-deeper);
}

.band--sky .chips li {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--gold-deep);
}

.band--sky a {
  text-decoration-thickness: 2px;
}

.pull {
  margin: 1.4rem 0 0;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--green-deep);
}

@media (prefers-color-scheme: dark) {
  .pull { color: var(--grass); }
}

/* A plain statement of fact about what is and is not live. Solid block, not a
   tinted "note" box. */
.status {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.95rem;
  max-width: var(--measure);
}

.band--sky .status,
.band--night .status {
  background: var(--ink-deep);
}

/* ----------------------------------------------------------- no nonsense */

.promises {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46ch;
}

.promises li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
}

.promises li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--gold);
  /* A tick, drawn rather than typed, so it never falls back to a box glyph. */
  clip-path: polygon(14% 48%, 38% 72%, 86% 22%, 96% 34%, 38% 92%, 4% 58%);
}

/* -------------------------------------------------------------- gallery */

.gallery {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.gallery figure {
  flex: 0 0 min(250px, 62vw);
  scroll-snap-align: center;
  margin: 0;
}

.gallery figcaption {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
}

@media (min-width: 900px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem 1.2rem;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .gallery figure { flex: none; }
}

/* ---------------------------------------------------------------- rooms */

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.rooms img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink-deep);
}

/* ------------------------------------------------------------------ faq */

.faq {
  display: grid;
  gap: 0.9rem;
  max-width: 52rem;
}

.faq details {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--panel-edge);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  min-height: 56px;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: 1.02rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  clip-path: polygon(43% 12%, 57% 12%, 57% 43%, 88% 43%, 88% 57%, 57% 57%, 57% 88%, 43% 88%, 43% 57%, 12% 57%, 12% 43%, 43% 43%);
  transition: transform 160ms ease;
}

@media (prefers-color-scheme: dark) {
  .faq summary::after { background: var(--gold); }
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  margin: 0;
  padding: 0 1.3rem 1.3rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------- closing */

.closing {
  text-align: center;
}

.closing .stores {
  justify-content: center;
}

.closing .stores-note {
  color: var(--ink);
}

.closing h2 {
  color: var(--ink);
}

.closing p {
  margin-inline: auto;
}

.closing-support {
  margin-top: 1.6rem;
  color: var(--ink);
  font-weight: 600;
}

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

.footer {
  background: var(--ink-deep);
  color: var(--cream);
  padding-block: 3rem 2.5rem;
}

.footer img {
  height: 58px;
  width: auto;
  margin-bottom: 1.4rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.footer a { color: var(--cream); }

.footer-fine {
  max-width: 60ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #b4c6dd;
}

.footer-fine p { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------- privacy */

.doc {
  padding-block: 3rem 4rem;
}

.doc-body {
  max-width: 68ch;
}

.doc-body h2 {
  font-size: var(--step-2);
  margin-top: 2.4rem;
}

.doc-body h3 {
  margin-top: 1.8rem;
}

.doc-body ul {
  padding-left: 1.2rem;
  max-width: var(--measure);
}

.doc-body li { margin-bottom: 0.4rem; }

.doc-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0 1.6rem;
  font-size: 0.95rem;
}

.doc-body caption {
  text-align: left;
  padding-bottom: 0.5rem;
  color: var(--text-soft);
}

.doc-body th,
.doc-body td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--panel-edge);
  vertical-align: top;
}

.doc-body th {
  background: var(--ink);
  color: #fff;
  border-bottom: 0;
}

.doc-body th:first-child { border-top-left-radius: 10px; }
.doc-body th:last-child { border-top-right-radius: 10px; }

.table-scroll {
  overflow-x: auto;
}

/* ------------------------------------------------------- reduced motion */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* ==========================================================================
   Multi-page structure

   The site is one page per subject rather than one long scroll. These are the
   pieces that only exist because of that: the title band each page opens on,
   the strip that sends people back to the download, and the link to the next
   page in the sequence.
   ========================================================================== */

/* The band each page opens with. It carries the page's own colour, so the
   colour tells you where you are. */
.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

.page-head h1 {
  font-size: var(--step-3);
  max-width: 22ch;
}

.page-head > .wrap > p {
  font-size: var(--step-1);
  max-width: 46ch;
  margin-bottom: 0;
}

/* A page whose title band is the whole page — "No nonsense" is just a list. */
.page-head--solo {
  padding-bottom: clamp(3rem, 2rem + 5vw, 5.5rem);
}

.promises-note {
  margin-top: 2.4rem;
  color: var(--cream);
  font-size: 0.98rem;
}

/* The band directly after a page-head should not double up the space. */
.page-head + main > .band:first-child {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* Onward link at the foot of each page's content. Reads as a sentence, not a
   button — the button is the download, and there should only be one of those. */
.next-up {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  max-width: none;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: var(--step-1);
}

.next-up a {
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.next-up a:hover {
  text-decoration-style: wavy;
}

/* Slim closing strip on every page but the home page. */
.closing-strip {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

.closing-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.closing-strip p {
  margin: 0;
  max-width: none;
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: var(--step-2);
  color: var(--ink);
}

/* The home page is now only the welcome and the download, so its hero fills
   the screen rather than being the top of a long scroll. */
.hero--full {
  min-height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 1rem + 6vw, 4.5rem);
}

.hero-more {
  display: inline-block;
  margin-top: clamp(1.8rem, 1rem + 2vw, 2.8rem);
  font-family: 'Titan One', 'Baloo 2', system-ui, sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

@media (prefers-color-scheme: dark) {
  .hero-more { color: var(--cream); }
}

/* Rows of cosmetic art on the "Dress the table" page. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 3rem;
  padding: 0;
  list-style: none;
}

.tiles img {
  width: 100%;
  border-radius: 14px;
}

/* Only the room art is a full-bleed rectangle, so only it gets the hard
   shadow. The table skins, card backs, dominoes and emotes are cut-out art on
   a transparent background, where a shadow renders as a bar floating behind
   nothing. */
.tiles--tall {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.tiles--tall img {
  box-shadow: 0 6px 0 var(--ink-deep);
}

.tiles--small {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.8rem;
}

.tiles--small img {
  box-shadow: none;
  border-radius: 0;
}

.band h2 + p {
  color: var(--text-soft);
}

/* On the home page the store buttons are right there in the hero, so the
   header's "Get the app" would only link back to the page you are reading.
   The home page is the one with the full-height hero. */
body:has(.hero--full) .masthead-cta {
  display: none;
}

/* Signpost list on the "page not found" page. Solid blocks, like everything
   else that can be tapped. */
.tiles-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.tiles-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6rem 1.2rem;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--ink-deeper);
}

.tiles-links a:hover {
  background: var(--ink-deep);
}