/* Styles for the Meyonder holding page. System fonts only, so no font files are fetched from anyone. */
/* Two themes: "paper map" (light) and "night map" (dark), each with faint wavy contour lines in the background. */

/* Light theme colours, used by default and whenever the visitor or device chooses light. */
:root {
  --paper: #f4f1e8;                 /* page background: warm map paper */
  --ink: #1d2b2a;                   /* main text: deep green-black */
  --muted: #56625f;                 /* secondary text */
  --river: #2c7a86;                 /* the meander line and tagline */
  --button-bg: #fbf9f3;             /* background of the light/dark switch */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232c7a86' stroke-opacity='0.13' stroke-width='1.2'%3E%3Cpath d='M0 20 C 40 0, 120 40, 160 20'/%3E%3Cpath d='M0 60 C 40 40, 120 80, 160 60'/%3E%3Cpath d='M0 100 C 40 80, 120 120, 160 100'/%3E%3Cpath d='M0 140 C 40 120, 120 160, 160 140'/%3E%3C/g%3E%3C/svg%3E"); /* faint wavy lines, drawn inline so nothing is fetched */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* the device's own interface font */
  color-scheme: light;              /* tell the browser to draw its own controls in light style */
}

/* Dark theme colours when the device prefers dark and the visitor hasn't chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1a1f;               /* deep night blue-green */
    --ink: #e8efec;                 /* light text */
    --muted: #9fb2ad;               /* softer secondary text */
    --river: #6fc7d1;               /* brighter river colour so it stays visible on dark */
    --button-bg: #16252b;           /* switch background */
    --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%236fc7d1' stroke-opacity='0.09' stroke-width='1.2'%3E%3Cpath d='M0 20 C 40 0, 120 40, 160 20'/%3E%3Cpath d='M0 60 C 40 40, 120 80, 160 60'/%3E%3Cpath d='M0 100 C 40 80, 120 120, 160 100'/%3E%3Cpath d='M0 140 C 40 120, 120 160, 160 140'/%3E%3C/g%3E%3C/svg%3E"); /* the same lines in the dark theme's colour */
    color-scheme: dark;             /* browser controls in dark style */
  }
}

/* The same dark colours when the visitor chose dark with the switch, whatever the device prefers. */
:root[data-theme="dark"] {
  --paper: #0f1a1f;                 /* deep night blue-green */
  --ink: #e8efec;                   /* light text */
  --muted: #9fb2ad;                 /* softer secondary text */
  --river: #6fc7d1;                 /* brighter river colour */
  --button-bg: #16252b;             /* switch background */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%236fc7d1' stroke-opacity='0.09' stroke-width='1.2'%3E%3Cpath d='M0 20 C 40 0, 120 40, 160 20'/%3E%3Cpath d='M0 60 C 40 40, 120 80, 160 60'/%3E%3Cpath d='M0 100 C 40 80, 120 120, 160 100'/%3E%3Cpath d='M0 140 C 40 120, 120 160, 160 140'/%3E%3C/g%3E%3C/svg%3E"); /* the same lines in the dark theme's colour */
  color-scheme: dark;               /* browser controls in dark style */
}

/* Count padding inside each box's width, so sizes are predictable. */
* {
  box-sizing: border-box;           /* width includes padding and border */
}

/* The whole page. */
body {
  margin: 0;                        /* remove the browser's default margin */
  min-height: 100vh;                /* fill at least the full screen height */
  display: grid;                    /* use grid layout to centre the content */
  place-items: center;              /* centre the content horizontally and vertically */
  padding: 24px 16px;               /* keep content clear of the screen edges */
  background-color: var(--paper);   /* page background colour */
  background-image: var(--contours); /* faint wavy contour lines over it */
  background-size: 160px 160px;     /* size of one repeating tile of lines */
  color: var(--ink);                /* default text colour */
  font-family: var(--font);         /* default font */
  line-height: 1.5;                 /* comfortable spacing between lines */
  transition: background-color 0.3s ease, color 0.3s ease; /* fade gently when switching themes */
}

/* The block holding all the text. */
.card {
  max-width: 34rem;                 /* keep lines short enough to read easily */
  text-align: center;               /* centre the text */
}

/* The meander line above the name. */
.meander {
  width: 160px;                     /* display width of the drawing */
  max-width: 100%;                  /* never wider than the screen */
  height: auto;                     /* keep its proportions */
  color: var(--river);              /* the line takes this colour via currentColor */
}

/* The name of the game. */
h1 {
  margin: 0.5rem 0 0.25rem;         /* small gaps above and below */
  font-size: clamp(2.5rem, 8vw, 4rem); /* large, scaling with screen width within limits */
  font-weight: 700;                 /* bold */
  letter-spacing: -0.02em;          /* slightly tighter letters at large size */
}

/* The tagline under the name. */
.tagline {
  margin: 0 0 1.5rem;               /* space below before the status label */
  font-size: 1.25rem;               /* a bit larger than body text */
  color: var(--river);              /* same colour as the meander */
}

/* The "Coming soon" label. */
.status {
  display: inline-block;            /* size the label to its text */
  margin: 0;                        /* no extra space around it */
  padding: 0.35rem 0.9rem;          /* room inside the outline */
  border: 1px solid currentColor;   /* thin outline in the text colour */
  border-radius: 999px;             /* fully rounded ends */
  font-size: 0.85rem;               /* small text */
  letter-spacing: 0.08em;           /* slightly spaced letters for a label */
  text-transform: uppercase;        /* capital letters */
  color: var(--muted);              /* softer colour */
}

/* The light/dark switch in the top-right corner. */
.theme-toggle {
  position: fixed;                  /* stays in the corner, independent of the content */
  top: max(16px, env(safe-area-inset-top, 0px));     /* clear of the top edge and any phone notch */
  right: max(16px, env(safe-area-inset-right, 0px)); /* clear of the right edge and any phone notch */
  width: 44px;                      /* large enough to tap comfortably */
  height: 44px;                     /* square */
  display: grid;                    /* centre the icon inside */
  place-items: center;              /* centre horizontally and vertically */
  padding: 0;                       /* the icon sets its own size */
  border: 1px solid var(--muted);   /* thin outline */
  border-radius: 50%;               /* round button */
  background: var(--button-bg);     /* filled, so the contour lines don't show through */
  color: var(--ink);                /* icon colour */
  cursor: pointer;                  /* show a hand pointer on hover */
}

/* The switch stays hidden until theme.js shows it (with scripts off, it would do nothing). */
.theme-toggle[hidden] {
  display: none;                    /* fully hidden */
}

/* A clear outline when the switch is reached with the keyboard. */
.theme-toggle:focus-visible {
  outline: 2px solid var(--river);  /* visible focus ring */
  outline-offset: 3px;              /* a small gap between button and ring */
}

/* Size of the sun and moon icons. */
.theme-toggle .icon {
  width: 20px;                      /* icon width */
  height: 20px;                     /* icon height */
}

/* In light mode, show only the moon ("switch to dark"). */
:root:not([data-theme="dark"]) .icon-sun {
  display: none;                    /* hide the sun */
}

/* In dark mode, show only the sun ("switch to light"). */
:root[data-theme="dark"] .icon-moon {
  display: none;                    /* hide the moon */
}

/* No fading for visitors who ask their device for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;               /* switch instantly */
  }
}