/* Shared chrome for yknotlabs.com: the nav that links the two games and
 * their rules pages, the footer that carries the copyright, and the
 * prose layout the rules and privacy pages use.
 *
 * ONE COPY, loaded by absolute path (`/gameofy/page.css`) from
 * /mudcrack as well as from /gameofy - the same arrangement the engine
 * already uses (mudcrack.js's header). Two copies of a nav drift, and
 * the drift shows up as a dead link on one page and not the other.
 *
 * Everything outside `.page` is a COMPONENT (.site-nav, .site-foot) so
 * that the two game pages can load this beside their own stylesheet
 * without it touching their layout. `.page` carries the base type and
 * colours for the prose pages, which load nothing else.
 */
:root {
  color-scheme: dark;
  --bg: #1c1a18;
  --panel: #2a2622;
  --text: #f2ebe0;
  --muted: #a99d8c;
  --accent: #d4a574;
  --rule: #3a342c;
}

body.page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.prose {
  max-width: 42rem;
  margin: 0 auto;
  padding: calc(1rem + env(safe-area-inset-top)) 1rem
           calc(1rem + env(safe-area-inset-bottom));
  line-height: 1.6;
}

.prose h1 {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  margin: 0.6rem 0 0.4rem;
}

.prose h2 {
  font-size: 1.08rem;
  margin: 2rem 0 0.5rem;
  color: var(--accent);
}

.prose h3 {
  font-size: 0.98rem;
  margin: 1.3rem 0 0.35rem;
}

.prose p, .prose li { font-size: 0.95rem; }
.prose li { margin-bottom: 0.4rem; }
.prose .lede { font-size: 1.05rem; }
.prose code {
  font-size: 0.88em;
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  background: var(--panel);
}

.prose dl { margin: 0.6rem 0; }
.prose dt { font-weight: 600; margin-top: 0.8rem; }
.prose dd { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.92rem; }

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

/* A figure that explains a rule: an inline SVG and a caption. */
.figure {
  margin: 1.1rem 0;
  padding: 0.9rem;
  background: var(--panel);
  border-radius: 0.5rem;
  text-align: center;
}

.figure svg { width: 100%; max-width: 21rem; height: auto; }

.figure figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: start;
}

/* --- the nav, on every page ------------------------------------- */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  margin: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* The page you are on is named, not linked away from. */
.site-nav [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* --- the footer, on every page ---------------------------------- */

.site-foot {
  margin: 2rem auto 0;
  padding: 0.9rem 0.5rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.6;
}

.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }
.site-foot .site-nav { font-size: 0.8rem; margin-bottom: 0.35rem; }
.site-foot .legal { margin: 0; }

/* --- translations (i18n.js) ------------------------------------- */

/* Hidden until the language table has been applied, so a non-English
   reader never sees the English page flash first. i18n.js removes the
   class on success AND on failure (then with a banner saying why). */
html.i18n-loading body { visibility: hidden; }

/* The language picker: a small globe in the top corner of every page
   (i18n.js adds it). The native <select> sits invisibly over the icon,
   so a click on the globe opens the platform's own list. */
.lang-globe {
  position: fixed;
  top: calc(0.4rem + env(safe-area-inset-top));
  inset-inline-end: calc(0.4rem + env(safe-area-inset-right));
  z-index: 50;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: 0.55;
  border-radius: 50%;
  transition: opacity 0.15s;
}
.lang-globe:hover, .lang-globe:focus-within { opacity: 1; color: var(--accent); }
.lang-globe svg { width: 1.15rem; height: 1.15rem; pointer-events: none; }
.lang-globe select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iOS zooms on focus below 16px */
}

/* Right-to-left pages (Arabic, Hebrew): the layout mirrors, the boards do
   not - a board is geometry, and its SVG labels are positioned for LTR. */
html[dir="rtl"] .board, html[dir="rtl"] svg { direction: ltr; }

.i18n-error {
  margin: 0;
  padding: 0.6rem 1rem;
  background: #7a1f1f;
  color: #fff;
  font-weight: 600;
}