/* The stream look for every page of natuutuu.com: sky with grid, landscape around the edges, dark red windows
   with paper inside, pill buttons like "follow me". Colours = the "day" theme of stream-overlays and, in dark mode,
   its night theme ("dusk" in templates/shared/colours/colour-themes.js); fonts and images = copies from stream-overlays
   (tools/copy_brand_assets.py).

   Page skeleton (see index.html):
     <div class="scenery">…</div>                 the landscape behind everything (fixed, does not scroll; scenery.js)
     <header class="site-bar"></header>          bar at the top: name, page links, ☀/☾, DE | EN (site-bar.js)
     <main class="page"> <section class="window">…</section> … </main>
                                                  the buttons in each window title work (windows.js)
     <footer class="page-footer">…</footer>
   Texts in two languages: <span lang="de">…</span><span lang="en">…</span>, only the chosen one is shown. */

@font-face {
  font-family: "Fredoka";
  src: url("../assets/fonts/Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

/* ---------- colours: day (normal) ---------- */

:root {
  color-scheme: light;
  --page-background: #8fc3ec;                   /* shows while the sky loads and when pages are pulled past their edge */
  /* sky */
  --sky: linear-gradient(to bottom, #5fa6df 0%, #8fc3ec 35%, #c4e0f4 62%, #eef1ee 82%, #f6e5c8 100%);
  --sky-grid-line: rgba(235, 123, 36, 0.12);    /* the orange grid over the sky (Grid.png at 30 %) */
  --sky-grid-size: 41px;
  --mountain-filter: hue-rotate(190deg) saturate(0.35) brightness(1.15);
  --scenery-filter: none;                       /* clouds, sakura, bamboo, pine */
  /* windows */
  --window-title-bar-color: #5c0d07;            /* dark body and title bar of the big windows */
  --window-title-text-color: #ffffff;
  --window-rim-color: #fff3ec;                  /* thin light rim around a big window */
  --window-paper-color: #fff3ec;                /* the paper inside */
  --window-paper-grid-color: rgba(240, 160, 140, 0.5);
  --window-bar-color: #a51f16;                  /* the red bar ("follow me" bar), used for buttons/links */
  --window-bar-text-color: #fff3ec;
  --window-label-color: #a51f16;                /* labels and headings on the paper */
  --text-color: #4a1410;                        /* normal text on the paper */
  --card-background: rgba(255, 255, 255, 0.7);  /* small boxes on the paper (help cards on mental-health) */
  --footer-background: rgba(255, 243, 236, 0.9);
  --footer-text-color: #5c0d07;
  --highlight-color: #ee9a3f;                   /* orange of the window buttons: hover, focus ring */
  /* window buttons (minimize / maximize orange, close red), drawn by windows.js */
  --button-ring-color: #e0821c;
  --button-top-color: #ee9a3f;
  --button-bottom-color: #e9a03c;
  --button-glow-color: #f6c04a;
  --close-button-ring-color: #d2463a;
  --close-button-top-color: #b0241a;
  --close-button-bottom-color: #a31d14;
  --close-button-glow-color: #c8392b;
}

/* ---------- colours: dark mode = the night look of the stream (theme.js sets <html data-theme="dark">) ---------- */

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-background: #121836;
  --sky: linear-gradient(to bottom, #121836 0%, #232a5c 35%, #4a3a78 65%, #8a5583 85%, #b56d7f 100%);
  --sky-grid-line: rgba(235, 123, 36, 0.08);
  --mountain-filter: hue-rotate(235deg) saturate(0.45) brightness(0.35);
  --scenery-filter: brightness(0.7) saturate(0.8);
  --window-title-bar-color: #89130c;
  --window-title-text-color: #ffe9e1;
  --window-rim-color: #b0241a;
  --window-paper-color: #1c1514;                /* almost black with a hint of red, like the stream at night */
  --window-paper-grid-color: rgba(176, 36, 26, 0.25);
  --window-bar-color: #5a0a06;
  --window-bar-text-color: #ffe9e1;
  --window-label-color: #ff8f6b;
  --text-color: #f3e3dc;
  --card-background: rgba(255, 255, 255, 0.04);
  --footer-background: rgba(28, 21, 20, 0.9);
  --footer-text-color: #f3e3dc;
  /* the night look keeps the original button colours */
  --button-ring-color: #d97c1f;
  --button-top-color: #e08e3a;
  --button-bottom-color: #dc9438;
  --button-glow-color: #e8b23c;
  --close-button-ring-color: #c0362a;
  --close-button-top-color: #9c1d15;
  --close-button-bottom-color: #8f160f;
  --close-button-glow-color: #b02e22;
}
/* the red pills are very dark at night: a thin rim keeps them visible on the dark paper */
:root[data-theme="dark"] .pill-link { box-shadow: inset 0 0 0 2px #b0241a; }

/* ---------- basics ---------- */

* { box-sizing: border-box; }

[hidden] { display: none !important; } /* hidden windows stay hidden even where a layout rule sets "display" */

html { background: var(--page-background); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--text-color);
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--highlight-color); outline-offset: 3px; }

/* only show the texts of the chosen language (language.js sets <html lang="…">) */
html[lang="de"] [lang="en"],
html[lang="en"] [lang="de"] { display: none !important; }

/* text only for screen readers (labels of icon buttons) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the landscape behind the page ---------- */

.scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--sky);
}
.scenery::before { /* grid over the sky */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--sky-grid-line) 2px, transparent 2px),
    linear-gradient(to bottom, var(--sky-grid-line) 2px, transparent 2px);
  background-size: var(--sky-grid-size) var(--sky-grid-size);
}
.scenery img { position: absolute; display: block; user-select: none; filter: var(--scenery-filter); }

.scenery .mountain {
  bottom: 0;
  left: 50%;
  width: max(100vw, 900px);
  transform: translateX(-50%);
  filter: var(--mountain-filter);
}
/* pine bottom right, mirrored. The end of the trunk is pushed below the bottom edge (like on stream), so the tree
   grows out of the picture instead of floating. It is an SVG, so it stays sharp at any size; on low screens it is
   kept smaller (65vh), so it does not reach up to the top bar */
.scenery .pine { bottom: 0; right: -1vw; width: clamp(240px, min(34vw, 65vh), 560px); transform: scaleX(-1) translateY(14%); }
/* sakura top left, starting just below the top bar (site-bar, 65 px) so the bar does not hide it */
.scenery .sakura { top: 55px; left: -40px; width: clamp(240px, 36vw, 620px); transform: rotate(180deg); }
/* bamboo bottom left, mirrored so it leans towards the middle. Its two right stalks end ~20 % higher than the
   others, so it is pushed 30 % down: the ends of all stalks are below the bottom edge instead of floating */
.scenery .bamboo { bottom: 0; left: -40px; height: min(70vh, 720px); transform: scaleX(-1) translateY(30%); }
.scenery .sparkle { width: 22px; opacity: 0.9; filter: none; } /* stay bright: at night they are the stars */

/* clouds drift slowly from left to right like on stream */
.scenery .cloud { left: 0; animation: cloud-drift linear infinite; }
.scenery .cloud-1 { top: 6vh;  width: clamp(160px, 22vw, 441px); animation-duration: 140s; animation-delay: -40s; }
.scenery .cloud-2 { top: 20vh; width: clamp(120px, 16vw, 300px); animation-duration: 180s; animation-delay: -120s; }
.scenery .cloud-3 { top: 34vh; width: clamp(100px, 12vw, 235px); animation-duration: 220s; animation-delay: -15s; }
@keyframes cloud-drift {
  from { transform: translateX(-40vw); }
  to   { transform: translateX(110vw); }
}
@media (prefers-reduced-motion: reduce) {
  .scenery .cloud { animation: none; }
  .scenery .cloud-1 { left: 55vw; }
  .scenery .cloud-2 { left: 8vw; }
  .scenery .cloud-3 { left: 75vw; }
}

/* ---------- page layout ---------- */

.page {
  width: min(680px, 100% - 32px);
  margin: 0 auto;
  padding: 32px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.page-footer {
  width: min(680px, 100% - 32px);
  margin: 0 auto;
  padding: 0 0 40px;
  text-align: center;
  font-size: 14px;
  color: var(--footer-text-color);
}
.page-footer > * { /* box behind the text, so it stays readable on the mountain */
  display: inline-block;
  padding: 8px 18px;
  border-radius: 16px;
  background: var(--footer-background);
}
.page-footer p { margin: 4px 0; }
.page-footer a { font-weight: 600; }

/* ---------- big window ("offline.exe" style) ---------- */

.window {
  background: var(--window-title-bar-color);
  border: 3px solid var(--window-rim-color);
  border-radius: 28px;
  padding: 0 12px 12px;
  box-shadow: 0 10px 28px rgba(60, 10, 5, 0.25);
}
.window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 8px 0 18px;
  margin: 0;
  color: var(--window-title-text-color);
  font-size: 20px;
  font-weight: 600;
}
.window-paper {
  border-radius: 16px;
  padding: 24px;
  background-color: var(--window-paper-color);
  background-image:
    linear-gradient(to right, var(--window-paper-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--window-paper-grid-color) 1px, transparent 1px);
  background-size: 28px 28px;
}
.window-paper h2 {
  margin: 0 0 12px;
  color: var(--window-label-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.window-paper p { margin: 0 0 12px; }
.window-paper p:last-child { margin-bottom: 0; }

/* ---------- window buttons and what they do (windows.js) ---------- */

.window-buttons { display: flex; flex: none; gap: 3px; }
.window-button {
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.window-button:hover { transform: scale(1.12); }
.window-button svg { display: block; width: 100%; height: 100%; }

/* minimized: only the title bar is left; clicking the title bar opens the window again */
.window.minimized { padding-bottom: 0; align-self: start; }
.window.minimized > .window-paper { display: none; }
.window.minimized > .window-title { cursor: pointer; }

/* maximized: the window lies big in the middle of the page, the rest is darkened. As tall as its content, at most
   the screen; longer content scrolls inside the window */
.window.maximized {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: min(1100px, 100% - 32px);
  max-height: 92vh;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.window.maximized > .window-paper { flex: 0 1 auto; min-height: 0; overflow: auto; }
.window-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(20, 5, 3, 0.55); }
html.window-is-maximized { overflow: hidden; } /* the page behind does not scroll */

/* closing and opening again: shrink away / pop in, like the "Noot!" windows on stream */
.window.closing { animation: window-pop-out 0.22s ease-in forwards; }
.window.opening { animation: window-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes window-pop-out { to { transform: scale(0.2); opacity: 0; } }
@keyframes window-pop-in { from { transform: scale(0.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .window.closing, .window.opening { animation: none; }
}

/* taskbar at the bottom of the screen: one button per closed window, a click opens it again. Always visible,
   wherever you scroll */
.taskbar {
  position: fixed;
  z-index: 50;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: calc(100% - 32px);
  padding: 4px;
  border-radius: 24px;
  background: var(--window-title-bar-color);
  border: 3px solid var(--window-rim-color);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.taskbar button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
  font: 600 15px "Fredoka", system-ui, sans-serif;
  cursor: pointer;
}
.taskbar button:hover { box-shadow: 0 0 0 2px var(--highlight-color); }
.taskbar button svg { width: 16px; height: 16px; }

/* ---------- pill buttons (the red "follow me" bar) ---------- */

.pill-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* name and handle never break in the middle; if both don't fit, the handle moves to its own line */
  white-space: nowrap;
  flex-wrap: wrap;
  row-gap: 0;
}
.pill-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--highlight-color);
}
.pill-link .handle { margin-left: auto; font-weight: 400; opacity: 0.85; font-size: 16px; }

/* several pill links: two columns where there is room, one on phones */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* short links (one or two words): up to three in a row, text in the middle */
.link-grid.short { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.link-grid.short .pill-link { justify-content: center; }

/* a platform logo in the text colour: <span class="icon" style="--icon: url(shared/icons/twitch.svg)"></span> */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* ---------- bar at the top (site-bar.js): like a window title bar, stays visible while scrolling ---------- */

.site-bar {
  position: sticky;
  top: 0;
  z-index: 40; /* above the page, below a maximized window (100) */
  background: var(--window-title-bar-color);
  border-bottom: 3px solid var(--window-rim-color);
  box-shadow: 0 6px 18px rgba(30, 5, 3, 0.25);
}
.site-bar-inner {
  width: min(1180px, 100% - 32px);
  margin: 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-bar-home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--window-title-text-color);
  font-size: 21px;
  font-weight: 700;
  text-decoration: none;
}
.site-bar-home img { width: 40px; height: auto; }
.site-bar-links { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.site-bar-links a {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-bar-links a:hover { box-shadow: 0 0 0 2px var(--highlight-color); }
.site-bar-links a[aria-current="page"] { background: var(--window-paper-color); color: var(--window-bar-color); }
:root[data-theme="dark"] .site-bar-links a[aria-current="page"] { color: var(--window-label-color); }
.site-bar-controls { display: flex; align-items: center; gap: 8px; }

.language-switch,
.theme-switch {
  border-radius: 999px;
  background: var(--window-bar-color);
  border: 3px solid var(--window-rim-color);
}
.language-switch { display: flex; padding: 4px; gap: 2px; }
.language-switch button {
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: transparent;
  color: var(--window-bar-text-color);
  font: 600 15px "Fredoka", system-ui, sans-serif;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] {
  background: var(--window-paper-color);
  color: var(--window-bar-color);
}
:root[data-theme="dark"] .language-switch button[aria-pressed="true"] { color: var(--window-label-color); }

/* one round button: shows the moon by day (click = night) and the sun at night (click = day) */
.theme-switch {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--window-bar-text-color);
  cursor: pointer;
}
.theme-switch svg { width: 20px; height: 20px; }
.theme-switch .sun { display: none; }
:root[data-theme="dark"] .theme-switch .sun { display: block; }
:root[data-theme="dark"] .theme-switch .moon { display: none; }

/* ---------- big screens: windows side by side, so there is less to scroll ----------
   Opt in per page with <main class="page columns">: two columns, every window takes one, a window with the class
   "full-width" takes the whole row. "dense" lets a later window fill a free spot next to an earlier one, so the
   order on phones (= order in the HTML) can differ from the order on big screens. Windows in one row get the same
   height. Pages without "columns" (like 404) stay one narrow column. */
@media (min-width: 1000px) {
  .page.columns {
    width: min(1180px, 100% - 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    align-items: stretch;
  }
  .page.columns > .window { display: flex; flex-direction: column; }
  .page.columns > .window > .window-paper { flex: 1; }
  .page.columns > .window.full-width { grid-column: 1 / -1; }
  .page.columns ~ .page-footer { width: min(1180px, 100% - 64px); }
}

/* ---------- narrow screens: the page links of the top bar move to a second row ---------- */

@media (max-width: 760px) {
  .site-bar-inner { flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; }
  .site-bar-home { font-size: 18px; }
  .site-bar-home img { width: 32px; }
  .site-bar-controls { margin-left: auto; }
  .site-bar-links { order: 3; flex-basis: 100%; }
  .site-bar-links a { padding: 5px 12px; font-size: 15px; }
  .scenery .sakura { top: 95px; } /* the bar is two rows high here */
}

/* ---------- small screens: smaller landscape, less padding ---------- */

@media (max-width: 600px) {
  body { font-size: 17px; }
  .page { padding-top: 22px; gap: 22px; }
  .window { padding: 0 8px 8px; border-radius: 24px; }
  .window-title { padding-left: 12px; font-size: 18px; }
  .window-buttons { gap: 6px; }  /* a bit more room between the buttons for fingers */
  .window-paper { padding: 18px; }
  .window.maximized { max-height: 96vh; width: calc(100% - 16px); }
  .scenery .bamboo { height: 40vh; left: -60px; }
}