/*
SPDX-FileCopyrightText: 2026 Aidan Tuhoro-Bell
SPDX-License-Identifier: CC-BY-NC-SA-4.0
*/

@font-face {
  font-family: "AidanHand";
  src: url("../fonts/AidanHand-Clean.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-normal-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Day: a pale sky, where stars are harder to find. Night: the dark one. sky.js reads these. */
:root {
  color-scheme: light dark;
  --sky-ground: #F2EEE6;
  --sky-star: #2D2149;
  --sky-line: #A9573F;
  --sky-cross: #D27C02;
  --sky-ring: #3F2F66;
  --sky-way: #FFD500;
  --sky-way-edge: #211D17;
  --sky-name: #454156;
  --sky-label: #3F2F66;
  --sky-label-hover: #1E1632;
  --sky-line-width: 1.25;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-ground: #120D20;
    --sky-star: #F2EEE6;
    --sky-line: #F5B6A2;
    --sky-cross: #F59800;
    --sky-ring: #F2EEE6;
    --sky-way-edge: #FFD500;
    --sky-name: #C4C1D1;
    --sky-label: #C4C1D1;
    --sky-label-hover: #F2EEE6;
  }
}
@media (prefers-contrast: more) {
  :root { --sky-line-width: 2; --sky-name: #211D17; --sky-label: #1E1632; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --sky-name: #F2EEE6; --sky-label: #F2EEE6; }
}
@media (forced-colors: active) {
  :root {
    --sky-ground: Canvas; --sky-star: CanvasText; --sky-line: CanvasText; --sky-cross: Highlight;
    --sky-ring: Highlight; --sky-way: LinkText; --sky-way-edge: LinkText;
    --sky-name: CanvasText; --sky-label: LinkText; --sky-label-hover: LinkText;
  }
}

html, body { margin: 0; height: 100%; }
body {
  background: var(--sky-ground);
  color: var(--sky-name);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--sky-label); }
a:hover { color: var(--sky-label-hover); }

.sky {
  position: fixed; inset: 0;
  display: block; width: 100%; height: 100%;
  touch-action: none;
  outline: none;
}
.sky:focus-visible { outline: 2px solid var(--sky-ring); outline-offset: -6px; }

/* Bottom left, on the dock's centre line. */
.name {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  font: 400 1.375rem/40px "AidanHand", "Segoe Print", "Bradley Hand", cursive;
  color: var(--sky-name);
  user-select: none; -webkit-user-select: none;
  cursor: default;
}

/* The star that turns up once enough lines are drawn. sky.js sets left and top. */
.way {
  position: fixed; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 2px;
  min-height: 44px; padding-right: 8px;
  transform: translate(-22px, -50%);
  font: 400 0.8125rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: var(--sky-label);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  opacity: 0;
}
.way[hidden] { display: none; }
.way.is-shown { opacity: 1; }
.way:hover { color: var(--sky-label-hover); }
.way:focus-visible { outline: 2px solid var(--sky-ring); outline-offset: 2px; border-radius: 4px; }
.way__star { position: relative; flex: none; width: 44px; height: 44px; }
.way__star::before,
.way__star::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.way__star::before { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: var(--sky-way-edge); }
.way__star::after { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--sky-way); }

.live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.noscript {
  position: fixed; left: 50%; top: 50%; margin: 0;
  transform: translate(-50%, -50%);
  font: 400 0.875rem/1.6 "JetBrains Mono", ui-monospace, monospace;
}

@media (prefers-reduced-motion: no-preference) {
  .way { transition: opacity 1.6s ease; }
}