/* ============================================================
   site.css - the shared chrome for flytunl.ch
   ============================================================
   Loaded by every page EXCEPT /play/, which is deliberately
   full-bleed and carries no bar (see CLAUDE.md: the play area
   stays as it is).

   Scope: the sticky top bar, the sitemap footer and the page
   backdrop (the day-tinted well), nothing else. Each page keeps
   its own <style> block for its own content, and that block is loaded AFTER this file, so a page
   can still override anything here.

   Fonts are deliberately NOT set: `font-family: inherit` makes
   the bar adopt whatever face the page it sits on already uses,
   so the homepage (Space Grotesk) and the guide pages (system
   sans) each stay internally consistent.

   The bar's MARKUP lives literally in all 14 pages, between
   <!-- site-chrome:nav --> ... <!-- /site-chrome:nav --> markers
   (same for the footer). A structural change to it is a scripted
   sweep over those markers; a change to how it LOOKS is this file
   alone.
   ============================================================ */

:root {
  --sc-bg:        #04040a;
  --sc-panel:     #0c0c15;
  --sc-line:      #20202e;
  --sc-line-soft: #191924;
  --sc-text:      #d7d7e0;
  --sc-dim:       #9a9aab;
  --sc-faint:     #6a6a78;
  /* The site has ONE accent and it is today's rock colour: /day.js sets
     --day-c on <html> from the UTC date before the first paint. The literal
     is only the fallback for a browser that never ran it. */
  --sc-accent:    var(--day-c, #4dd9ff);

  /* One page width for the whole site: nav, content and footer line up with
     the homepage. Running text is capped separately (below) so lines stay
     readable at this width. */
  --page-w:       1120px;

  /* The game's own two faces (src/fonts.js). Every page loads them, so the
     site and the game read as one product. */
  --tunl-ui:      "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tunl-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- page backdrop ----------
   The same background on every page: a soft well of the day's rock at the
   top of the viewport, a violet glow off to the right, a brighter well at
   the top of the page itself (it scrolls away with the header, lit at the
   cave mouth), and a body colour that /day.js steps darker as you scroll
   (the "descent"). A page's own <style> must not set a body background, or
   it hides this. */

body {
  background-color: var(--depth-bg, var(--sc-bg));
  background-image:
    radial-gradient(900px 520px at 50% -120px, rgba(var(--day-rgb, 77,217,255), 0.13), transparent 70%),
    radial-gradient(700px 480px at 85% 4%, rgba(157,123,255,0.09), transparent 70%),
    radial-gradient(110% 480px at 50% 0, rgba(var(--day-rgb, 77,217,255), 0.10), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, scroll;
  transition: background-color .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }          /* the depth STEPS stay; only the ease goes */
}

/* ---------- sticky top bar ---------- */

.sitenav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  /* full-bleed across the body's side padding */
  margin: 0 -20px 30px;
  /* content centred on wide screens without an extra wrapper element */
  padding: 10px max(18px, calc((100% - var(--page-w)) / 2));
  /* Modern aero glass (see the @supports block after .sn-sheet): the
     day-tinted backdrop shows through, blurred and saturated, with a
     specular top edge and a lit hairline. Without backdrop-filter the bar
     stays near-opaque so the links keep their contrast. */
  background: rgba(7, 7, 14, 0.9);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: inherit;
  line-height: 1.4;
}

.sn-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  padding: 2px 4px;
}
.sn-brand img { height: 21px; width: auto; display: block; }

.sn-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  min-width: 0;
}
.sn-links a {
  color: var(--sc-dim);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.sn-links a:hover { color: #fff; background: rgba(255,255,255,0.05); text-decoration: none; }
.sn-links a[aria-current="page"] { color: #fff; }
.sn-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin: 4px 10px -8px;
  background: var(--sc-accent);
  border-radius: 2px;
}

.sn-gap { flex: 1 1 auto; }

/* version pill - stamped from TUNL_VERSION at build time, so it can
   never go stale the way the old hand-written "New in X" badge did */
.sn-ver {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sc-accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--sc-accent) 40%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.sn-ver:hover { border-color: var(--sc-accent); text-decoration: none; }

.sn-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sc-accent);
  color: #05050c;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px;
  white-space: nowrap;
}
.sn-cta:hover { background: color-mix(in srgb, var(--sc-accent) 75%, #fff); text-decoration: none; }
.sn-cta svg { width: 13px; height: 13px; fill: currentColor; }

/* mobile overflow menu - <details>, so it works with JS disabled */
.sn-more { position: relative; flex: none; display: none; }
.sn-more > summary {
  list-style: none;
  cursor: pointer;
  color: var(--sc-dim);
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 15px;
  line-height: 1;
}
.sn-more > summary::-webkit-details-marker { display: none; }
.sn-more[open] > summary { color: #fff; border-color: var(--sc-accent); }
.sn-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  min-width: 190px;
  display: flex;
  flex-direction: column;
  background: #0a0a13;
  border: 1px solid var(--sc-line);
  border-radius: 11px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sitenav {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.015) 55%, rgba(255,255,255,0) 100%),
      linear-gradient(90deg, rgba(var(--day-rgb, 77,217,255), 0.06), rgba(157,123,255,0.05)),
      rgba(12, 12, 24, 0.38);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    backdrop-filter: blur(24px) saturate(185%);
    border-bottom-color: rgba(255,255,255,0.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 10px 30px -12px rgba(0,0,0,0.55);
  }
  .sn-sheet {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01) 40%),
      rgba(14, 14, 26, 0.6);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    backdrop-filter: blur(24px) saturate(185%);
    border-color: rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 40px rgba(0,0,0,0.55);
  }
}
.sn-sheet a {
  color: var(--sc-text);
  text-decoration: none;
  font-size: 14.5px;
  padding: 9px 12px;
  border-radius: 7px;
}
.sn-sheet a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }

@media (max-width: 820px) {
  .sitenav { margin-bottom: 22px; gap: 6px; padding: 9px 14px; }
  .sn-links { display: none; }
  .sn-more { display: block; }
  .sn-ver { display: none; }
}
@media (max-width: 380px) {
  .sn-cta { padding: 8px 12px; font-size: 13.5px; }
}

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

.sitefoot {
  margin: 72px 0 0;
  padding: 34px 0 8px;
  border-top: 1px solid var(--sc-line-soft);
  font-family: inherit;
}
.sf-inner { max-width: var(--page-w); margin: 0 auto; }

.sf-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 32px;
}
@media (max-width: 620px) { .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sf-col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.sf-col h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-faint);
  font-weight: 600;
  margin: 0 0 3px;
}
.sf-col a {
  color: var(--sc-dim);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
}
.sf-col a:hover { color: var(--sc-accent); text-decoration: underline; }

.sf-legal {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sc-line-soft);
  color: var(--sc-faint);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}
.sf-legal a { color: var(--sc-faint); }
.sf-legal a:hover { color: var(--sc-dim); }

/* the homepage's language switcher lives in this block too */
.sf-legal .langsw { margin-left: 4px; display: inline-flex; align-items: center; gap: 6px; }
.langsw label { color: var(--sc-faint); }
.langsw select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--sc-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aab' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 9px;
  color: var(--sc-dim);
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  margin: 0;
  padding: 5px 26px 5px 12px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.langsw select:hover { border-color: var(--sc-accent); }
.langsw select:focus-visible {
  outline: none;
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-accent) 25%, transparent);
}
[dir="rtl"] .langsw select {
  background-position: left 10px center;
  padding: 5px 12px 5px 26px;
}

@media (prefers-reduced-motion: reduce) {
  .sitenav, .sn-sheet { transition: none !important; }
}

/* ---------- right-to-left (Arabic) ----------
   Layout is flex/grid, which mirrors by itself. What does not mirror is anything
   spelled with a physical side: the nav's gap and sheet, list indents, table
   alignment and the accent edge on a note box. Code stays left-to-right inside
   right-to-left prose, isolated so its punctuation does not jump around. */
[dir="rtl"] .sn-links { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .sn-sheet { right: auto; left: 0; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .note {
  border-left-width: 1px;
  border-right: 3px solid var(--sc-accent);
  border-radius: 10px 0 0 10px;
}
[dir="rtl"] code, [dir="rtl"] pre { direction: ltr; unicode-bidi: isolate; }

/* Letter-spacing is a Latin/mono label habit. In Arabic it pulls the joined
   letterforms apart (the script is cursive), and Devanagari conjuncts break the
   same way, so those two get none anywhere on the site. */
:lang(ar), :lang(ar) *, :lang(hi), :lang(hi) * { letter-spacing: normal !important; }

/* ---------- page width ----------
   The guide pages' own <style> sets `main { max-width: var(--page-w) }`. Tables,
   figures and cards use all of it; running text stops at a readable measure. */
main :is(p, ul, ol, blockquote) { max-width: 104ch; }