/* Backgammon Room website: what every page shares (colours, type, buttons, the top bar, the
   footer) and the document pages (privacy, support, rules, the challenge and friend links).
   The home page adds home.css. Colours come from the app (App/Backgammon/Design/Palette.swift):
   the hub's amber, the board's felt, bone and walnut, the "Nuit" near-black.
   After changing this file, home.css or a script, run tools/site/stamp-assets.sh: the pages
   link them by content, so browsers that kept the old copy fetch the new one. */
:root {
  color-scheme: light;
  --page: #fbf7ef;
  --sheet: #f4ead8;
  --sheet-end: #f8f0e2;
  --sand: #f2dcb4;
  --ink: #1c150e;
  --ink-hi: #2b2219;
  --ink-edge: #000;
  --ink-2: rgba(28, 21, 14, 0.7);
  --ink-3: rgba(28, 21, 14, 0.62);
  --rule: rgba(28, 21, 14, 0.12);
  --amber: #f0a53a;
  --amber-hi: #f5b551;
  --amber-edge: #a9660f;
  --amber-label: #1f1407;
  --amber-text: #8a520b;
  --amber-glow: rgba(240, 165, 58, 0.32);
  --amber-glow-dim: rgba(240, 165, 58, 0.12);
  --night: #100d0a;
  --night-text: #f3ecdf;
  --night-2: rgba(243, 236, 223, 0.68);
  --night-3: rgba(243, 236, 223, 0.5);
  --night-rule: rgba(243, 236, 223, 0.12);
  /* SF Pro on Apple devices; Segoe UI and Roboto, not Arial, where it is missing. */
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --inset: clamp(0.5rem, 1.6vw, 1rem);
  --wide: 72rem;
  --measure: 40rem;
  --radius-sheet: clamp(22px, 3vw, 36px);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: 4.5rem;
}
/* A link to a section scrolls there, Reduce Motion or not (Paul, 2026-10-28): the scroll is the
   visitor's own, as iOS keeps tapping the status bar animated under Reduce Motion. menu.js
   switches it on once the page has loaded: smooth from the start, the jump to an address's own
   #section (a link from another page) stops short while the page settles. */
html.smooth { scroll-behavior: smooth; }

/* The page colour runs under an iPhone's sensor housing in landscape (viewport-fit=cover);
   the content stays clear of it. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--page);
  color: var(--ink);
  font: 17px/1.55 var(--text);
}
body > main { flex: 1; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--amber-label); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--amber-edge); outline-offset: 3px; border-radius: 6px; }

/* No word left alone on a last line: even lines in headings, a fuller last line in text. */
h1, h2, h3 { text-wrap: balance; }
p, li, dt, dd { text-wrap: pretty; }

/* ---------- buttons: the app's amber with its darker edge, pressed in 0.12 s as the app's
   ChunkyButtonStyle */
.btn, .doc a.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.35rem;
  border-radius: 14px;
  font: 600 1.0625rem/1.2 var(--round);
  text-decoration: none;
  white-space: nowrap;
  transition-property: translate, box-shadow, background-color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn-amber, .doc a.store { background: var(--amber); color: var(--amber-label); box-shadow: 0 4px 0 var(--amber-edge); }
.btn-amber:active, .doc a.store:active { translate: 0 3px; box-shadow: 0 1px 0 var(--amber-edge); }
.btn-ink { min-height: 44px; padding: 0.55rem 1rem; border-radius: 12px; font-size: 0.9375rem; background: var(--ink); color: var(--page); box-shadow: 0 3px 0 var(--ink-edge); }
.btn-ink:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink-edge); }
/* Hover only where there is a pointer: a tap on a phone would leave it lit. */
@media (hover: hover) {
  .btn-amber:hover, .doc a.store:hover { background: var(--amber-hi); color: var(--amber-label); }
  .btn-ink:hover { background: var(--ink-hi); }
}
@media (prefers-reduced-motion: reduce) { .btn, .doc a.store { transition: none; } }

/* ---------- top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem max(var(--gutter), calc((100% - var(--wide)) / 2));
  background: rgba(251, 247, 239, 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.brand {
  display: inline-flex;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  font: 700 1.0625rem/1 var(--round);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand span { white-space: nowrap; }
.mark { width: 34px; height: 22px; flex: none; }
/* A narrow phone: the name and the button share one line. */
@media (max-width: 26rem) {
  .top { gap: 0.75rem; }
  .brand { gap: 0.45rem; font-size: 1rem; }
  .mark { width: 30px; height: 19px; }
  .top > .btn-ink { padding-inline: 0.8rem; font-size: 0.875rem; }
}
@media (max-width: 22rem) {
  .top { padding-inline: 0.75rem; }
  .brand { font-size: 0.9375rem; }
  .top > .btn-ink { padding-inline: 0.65rem; font-size: 0.8125rem; }
}
.top-links { display: flex; gap: 1.75rem; }
.top-links a { color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; }
@media (hover: hover) { .top-links a:hover { color: var(--ink); } }

/* ---------- the menu, below 52rem: a button in the top bar opens the sections as a panel
   under it (a popover: a tap outside or Escape closes it, with or without scripts). Where
   popovers aren't supported the links take a second line of the bar instead. */
.menu-btn {
  display: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1), rotate 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; }
.top:has(.menu:popover-open) .menu-btn span:first-child { translate: 0 4px; rotate: 45deg; }
.top:has(.menu:popover-open) .menu-btn span:last-child { translate: 0 -4px; rotate: -45deg; }
.menu-btn:focus-visible { outline: 2px solid var(--amber-edge); outline-offset: 0; }

.menu {
  inset: calc(1.5rem + 48px) calc(var(--inset) + env(safe-area-inset-right)) auto calc(var(--inset) + env(safe-area-inset-left));
  width: auto;
  height: auto;
  max-height: calc(100dvh - 1.5rem - 48px - var(--inset));
  margin: 0;
  padding: 0.25rem 1.25rem 1.25rem;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 22px;
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(40, 25, 10, 0.08), 0 28px 56px -24px rgba(40, 25, 10, 0.4);
  opacity: 0;
  transition: opacity 180ms ease, translate 320ms cubic-bezier(0.16, 1, 0.3, 1), display 320ms allow-discrete, overlay 320ms allow-discrete;
}
.menu:popover-open { opacity: 1; }
@starting-style { .menu:popover-open { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .menu { translate: 0 -10px; }
  .menu:popover-open { translate: 0 0; }
  @starting-style { .menu:popover-open { translate: 0 -10px; } }
}
.menu::backdrop { background: rgba(28, 21, 14, 0.16); }
.menu a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--rule);
  font: 600 1.25rem/1.2 var(--round);
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.menu a:not(.btn):active { color: var(--amber-text); }
.menu .btn { display: flex; width: 100%; margin-top: 1.25rem; }

@media (max-width: 52rem) {
  .top-links { display: none; }
  @supports selector(:popover-open) {
    .menu-btn { display: block; }
  }
  @supports not selector(:popover-open) {
    .top { flex-wrap: wrap; row-gap: 0.25rem; }
    .top-links { display: flex; order: 3; width: 100%; gap: 1.25rem; }
    .top-links a { padding-block: 0.6rem; }
  }
}
/* On a phone the bar keeps the name and the menu; its button moves into the menu. */
@media (max-width: 30rem) {
  @supports selector(:popover-open) {
    .top > .btn-ink { display: none; }
  }
}
@media (min-width: 52.0625rem) { .menu:popover-open { display: none; } }
@supports not selector(:popover-open) { .menu { display: none; } }

/* ---------- footer: its top rule spans the content, not the gutters */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 3rem var(--gutter) 2.5rem;
  background: linear-gradient(var(--rule), var(--rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  font-size: 0.9375rem;
}
.foot-brand p { max-width: 20rem; margin: 0.9rem 0 0; color: var(--ink-3); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.foot-col h2 { margin: 0 0 0.3rem; font: 600 0.875rem/1.4 var(--round); color: var(--amber-text); }
.foot-col a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .foot-col a:hover { color: var(--ink); } }
.foot-legal { grid-column: 1 / -1; margin: 1rem 0 0; color: var(--ink-3); font-size: 0.875rem; }
/* Four columns where a page has them (the English pages' Free tools); narrower, the name and
   its line then take a row of their own above them. */
.foot:has(> nav:nth-of-type(4)) { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .foot:has(> nav:nth-of-type(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot:has(> nav:nth-of-type(4)) .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .foot, .foot:has(> nav:nth-of-type(4)) { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
/* The last line: the copyright, and the language switch on the right (under it on a narrow
   phone). The page's own language is in ink; the other links to the same page in it, or to that
   language's home when there is none. No redirect by the browser's language. */
.foot-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1rem; }
.foot-end .foot-legal { margin: 0; }
.foot-lang { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-3); font-size: 0.875rem; }
.foot-lang a { color: var(--ink-2); text-decoration: none; }
.foot-lang a[aria-current] { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .foot-lang a:hover { color: var(--ink); } }

/* The top bar's and footer's links take taps across 44 px (32 px in the footer's columns, whose
   links are 9.6 px apart), 8 px wider each side. */
.top-links a, .foot-col a, .foot-lang a { position: relative; }
.top-links a::after, .foot-col a::after, .foot-lang a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  right: -8px;
  height: 44px;
  translate: 0 -50%;
}
.foot-col a::after { height: 32px; }
/* A finger needs the full 44 px: the footer's links spread out on a touch screen. */
@media (pointer: coarse) {
  .foot-col { gap: 1.2rem; }
  .foot-col a::after { height: 44px; }
}

/* ---------- documents */
main.doc {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) 5rem;
}
.doc h1 {
  margin: 0 0 0.5rem;
  font: 700 clamp(2.25rem, 6vw, 3.25rem)/1.05 var(--round);
  letter-spacing: -0.035em;
}
.doc .updated { margin: 0 0 2.5rem; color: var(--ink-3); font-size: 0.9375rem; }
.doc .lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ink); }
.doc h2 {
  margin: 3rem 0 0.75rem;
  font: 600 1.375rem/1.25 var(--round);
  letter-spacing: -0.015em;
}
.doc p, .doc li, .doc dd { color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a:not(.store, .btn) { color: var(--amber-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.doc a:not(.store, .btn):hover { color: var(--ink); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.4rem 0; }
.doc li::marker { color: var(--amber-edge); }
.doc dl { margin: 0; border-top: 1px solid var(--rule); }
.doc dt { padding-top: 1.5rem; color: var(--ink); font: 600 1.125rem/1.35 var(--round); }
.doc dd { margin: 0.4rem 0 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
/* Steps (the dice page), its recipe's labels, and the comparison tables (/compare/). */
.doc ol { padding-left: 1.4rem; }
.doc ol li::marker { font-family: var(--round); font-weight: 600; color: var(--amber-text); }
.doc code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--sheet);
  color: var(--ink);
  font: 0.875em/1.4 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.doc .table { margin: 1.5rem calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.doc th, .doc td { padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th:last-child, .doc td:last-child { padding-right: 0; }
.doc thead th { font: 600 0.875rem/1.3 var(--round); color: var(--amber-text); }
.doc tbody th { color: var(--ink); font-weight: 600; }
.doc td { color: var(--ink-2); }

/* The App Store link (a friend's challenge, /c/, and a friend link, /f/): on a phone it takes
   two even, centred lines. */
.doc a.store { margin: 0.5rem 0; line-height: 1.3; text-align: center; text-wrap: balance; white-space: normal; }

/* ---------- the guides' pictures: the board diagrams (/setup/, /fr/placement/), the odds chart,
   the opening boards (drawn by tools/site/boards.py and dice_odds.py). A figure may run wider
   than the text, up to 52rem, where the window allows (.wide); a board diagram runs a little
   wider on a phone so the point numbers stay readable. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc h3 { margin: 0; font: 600 1.125rem/1.3 var(--round); letter-spacing: -0.01em; color: var(--ink); }
.doc figure { margin: 2rem 0; }
.doc figure img { width: 100%; }
.doc figure svg { display: block; width: 100%; height: auto; }
.doc figcaption { margin-top: 0.75rem; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 30rem) { .doc figure.board { margin-inline: calc(-0.5 * var(--gutter)); } }
/* 1rem spare for a scrollbar that takes room (100vw counts it). */
.doc .wide { margin-inline: min(0px, (var(--measure) - min(52rem, 100vw - 2 * var(--gutter) - 1rem)) / 2); }
.doc .board img { border-radius: clamp(8px, 1.4vw, 14px); }

/* The 15 opening rolls: a board each, two to a row on a wide screen, the roll, the play in
   words, why, and the notation for those who read it. */
.doc .openings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2.5rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.doc .openings li { margin: 0; }
.openings figure { margin: 0; }
.openings img { border-radius: 10px; }
.openings .roll { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.9rem 0 0.2rem; }
.openings .roll h3 { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.openings .roll span { color: var(--amber-text); font: 600 0.9375rem/1.3 var(--round); }
.openings p { margin: 0.3rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.openings .play { color: var(--ink); font-weight: 600; }
.doc .notation { color: var(--ink-3); font-size: 0.875rem; }
/* A roll (6-4) never breaks at its dash. */
.doc .rolls tbody th { white-space: nowrap; }
.notation span { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; }

/* Number columns line up; the odds tables' figures read across. */
.doc .num td, .doc .num tbody th { font-variant-numeric: tabular-nums; }
.doc .num td strong { color: var(--ink); }
.doc .num td span { display: block; color: var(--ink-3); font-size: 0.8125rem; }
/* The bear-off grid: farther checker down the side, nearer checker across the top. */
.doc .grid th, .doc .grid td { padding: 0.55rem 0.4rem; text-align: center; }
.doc .grid th:first-child { text-align: left; padding-left: 0; }
.doc .grid td strong { display: block; font: 600 1rem/1.2 var(--round); }
.doc .grid td span { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.doc .grid td.none { background: none; }
.doc .grid tbody tr:first-child th { font: 600 0.875rem/1.3 var(--round); color: var(--amber-text); }

/* The bots' table (/error-rate/): each with its face. */
.doc .bot { display: inline-flex; align-items: center; gap: 0.5rem; }
.doc .bot img { width: 28px; height: 28px; flex: none; }

/* The dice page's calculator: hidden until dice.js runs (the examples table stands in). */
.calc { margin: 1.5rem 0; padding: 1.25rem 1.25rem 1.1rem; border-radius: 20px; background: var(--sheet); }
.calc[hidden] { display: none; }
.calc .ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: 0; color: var(--ink); font: 600 1.0625rem/1.4 var(--round); }
.calc select, .calc input {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(28, 21, 14, 0.22);
  border-radius: 12px;
  background: var(--page);
  color: var(--ink);
  font: 600 1rem/1.2 var(--round);
}
.calc select { max-width: 100%; }
.calc input { width: 5.5rem; font-variant-numeric: tabular-nums; }
.calc select:focus-visible, .calc input:focus-visible { outline: 2px solid var(--amber-edge); outline-offset: 2px; }
.calc output { display: block; margin-top: 1rem; }
.calc output p { margin: 0.35rem 0 0; color: var(--ink-2); }
.calc output strong { font: 700 1.0625rem/1.3 var(--round); font-variant-numeric: tabular-nums; }

/* The rules on one page (/rules-of-backgammon/): on screen a numbered list under the title;
   printed, that list alone, in two columns, on one side of paper. */
.doc .sheet ol { margin-top: 1rem; }
.doc .sheet li { margin: 0.7rem 0; }
.doc .sheet li strong a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .doc .sheet li strong a:hover { color: var(--amber-text); } }

/* The print button (/fr/regles/, /rules-of-backgammon/): printing needs a script, so menu.js
   shows it. */
button.btn { border: 0; cursor: pointer; }
.doc .print-row { margin: 1.5rem 0 0; }
.print-only { display: none; }

/* ---------- print: a document page's text alone, black on white, without the bar, the menu,
   the footer or the print button (the rules pages are meant to be printed); a guide's pictures
   stay, and the setup diagram swaps to its outline version, kinder to ink. */
@media print {
  @page { margin: 1.6cm 1.8cm; }
  body { display: block; padding: 0; background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .top, .menu, .foot, .toc, [data-print], .no-print { display: none !important; }
  main.doc { max-width: none; padding: 0; }
  .doc h1 { font-size: 22pt; }
  .doc .updated { margin-bottom: 1.2em; }
  .doc .lede { font-size: 12pt; }
  .doc h2 { margin: 1.4em 0 0.4em; font-size: 13pt; break-after: avoid; }
  .doc p, .doc li, .doc dd, .doc td, .doc .updated, .doc figcaption { color: #000; }
  .doc a:not(.store, .btn) { color: inherit; text-decoration: none; }
  .doc li, .doc dt, .doc dd, .doc tr, .doc figure, .doc table, .openings li { break-inside: avoid; }
  .doc dt { padding-top: 0.8em; }
  .doc dd { padding-bottom: 0.8em; }
  .print-only { display: block; margin-top: 2em; color: #000; font-size: 9pt; }
  .doc .wide { margin-inline: 0; }
  .doc .board .screen-only { display: none; }
  /* The setup diagram fits on the first sheet, under the title and the opening lines. */
  .doc .board img.print-only { width: auto; max-width: 100%; max-height: 165mm; margin: 0 auto; }
  .doc .board { margin: 1rem 0; }
  .rules-page h1 { margin-bottom: 0.3em; font-size: 20pt; }
  .rules-page .sheet h2 { margin: 0 0 0.5em; font-size: 12pt; }
  .rules-page .sheet ol { columns: 2; column-gap: 9mm; margin: 0; padding-left: 1.2em; font-size: 9.5pt; line-height: 1.38; }
  .rules-page .sheet li { margin: 0 0 0.5em; }
  .rules-page .sheet li strong a { color: #000; }
  .rules-page .print-only { margin-top: 1.2em; }
  .rules-page .sheet-board { width: auto; max-height: 72mm; margin: 0.8em auto 0; }
}