/* Author Identity Unknown: coming-soon page.
   Layout: one left-aligned terminal column, at most 46rem, centred in the window.
   Dark is the default (it's a terminal); light follows prefers-color-scheme.
   Colours come from the game's own palette (design/01-terminal.md §3.10), with
   amber as the accent. No web fonts: a system monospace stack with CJK fallbacks. */

:root {
  --bg: #0b0b10;
  --panel: #111219;
  --fg: #d8dae5;
  --dim: #7b8096;
  --rule: #2c2e3b;
  --accent: #ffb454;
  --mono: "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
    "Noto Sans Mono CJK SC", "PingFang SC", "Microsoft YaHei", monospace;
  --step-small: 0.8125rem;
  --step-alt: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
  --step-title: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f4f7;
    --panel: #e8eaf0;
    --fg: #15161d;
    --dim: #555a6c;
    --rule: #c6c9d4;
    --accent: #8f5200;
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  line-height: 1.65;
  padding-block: 1.25rem 2.5rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.page {
  max-width: 46rem;
  margin-inline: auto;
}

.page,
.stack {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.stack > * {
  min-width: 0;
}

p {
  margin: 0;
  max-width: 62ch;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Top row: the language switch. */
.top {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  font-size: var(--step-small);
  color: var(--dim);
}

.top a[aria-current="page"] {
  color: var(--fg);
  text-decoration: none;
}

/* Title block. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

h1 {
  margin: 0;
  font-size: var(--step-title);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.alt {
  font-size: var(--step-alt);
}

.tagline {
  color: var(--dim);
}

/* The terminal session: git's real refusal at a first commit. */
.term {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  min-width: 0;
}

.ps {
  color: var(--dim);
}

.ps b {
  color: var(--accent);
  font-weight: inherit;
}

.cmd {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 26ch; /* git commit -m "lunch sign" */
}

.caret {
  display: inline-block;
  width: 0.6em;
  height: 1.2em;
  vertical-align: text-bottom;
  background: var(--fg);
}

.c1 {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .cmd {
    animation: type 1.3s steps(26, end) 0.6s both;
  }
  .c1 {
    animation: hold 2.3s backwards;
  }
  .o1 {
    animation: appear 1ms 2.4s both;
  }
  .o2 {
    animation: appear 1ms 2.55s both;
  }
  .o3 {
    animation: appear 1ms 3s both;
  }
  .c2 {
    animation: blink 1s step-end 3.1s 4;
  }
}

@keyframes type {
  from {
    width: 0;
  }
}

@keyframes hold {
  from,
  to {
    visibility: visible;
  }
}

@keyframes appear {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Facts, as label and value pairs. */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  margin: 0;
}

.facts dt {
  color: var(--dim);
}

.facts dd {
  margin: 0;
  min-width: 0;
}

section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

h2::before {
  content: "# ";
  content: "# " / "";
  color: var(--dim);
}

.by .sep {
  color: var(--dim);
}

.by a {
  white-space: nowrap;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  color: var(--dim);
  font-size: var(--step-small);
}

footer p {
  max-width: none;
}

/* 404 */
.term.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}