/* GaterGrid shared base: tokens, type, shell. Line map world, see DESIGN.md. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/barlow-400.woff2?v=b0a8ad37ac") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/barlow-600.woff2?v=4b52ddd483") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/barlow-condensed-600.woff2?v=215a93c696") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  /* enamel ground and porcelain type */
  --ground: #0a1230;
  --ground-raise: #0f1a44;
  --rule: #2e3c78;
  --track-dim: #27336b;
  --porcelain: #f3f1ea;
  --text-2: #c3c8dd;
  --text-3: #9aa2c4;
  --text-4: #7d85aa;      /* quiet footer text, 5.08:1 */
  /* one ink per line; each hue has one job */
  --ink-mc: #d9691f;      /* Minecraft line, GaterGrid orange */
  --ink-tekkit: #4a74ff;  /* Tekkit 2 line */
  --ink-civ: #f2b51c;     /* Civilization V line */
  --ink-web: #b7bedb;     /* websites and machines */
  --orange: #d9691f;      /* brand: wordmark, gater */
  --scarlet: #ff5a4a;     /* a real outage, nothing else */
  /* stroke system */
  --track: 6px;
  --ring: 3px;
  --hair: 1px;
  --stop: 22px;
  /* type */
  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --page: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html {
  background: var(--ground);
  scrollbar-color: #2b3870 var(--ground);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--porcelain);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--orange); color: var(--ground); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--porcelain); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
p { margin: 0; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 20;
  background: var(--porcelain); color: var(--ground); padding: 10px 16px;
  font-weight: 600; text-decoration: none; border-radius: 6px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* top bar: lockup of the gater and the wordmark, then navigation */
.bar { border-bottom: var(--hair) solid var(--rule); }
.bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--orange); }
.lockup .wordmark { font-family: var(--cond); font-weight: 600; font-size: 3rem; line-height: 1; color: var(--orange); }
.nav { display: flex; gap: 4px 28px; flex-wrap: wrap; }
.nav a {
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--text-2);
  padding: 10px 0; border-bottom: var(--ring) solid transparent;
}
.nav a:hover { color: var(--porcelain); border-bottom-color: var(--text-3); }
.nav a[aria-current="page"] { color: var(--porcelain); border-bottom-color: var(--orange); }

main { flex: 1; }
.summary { padding-top: 40px; padding-bottom: 8px; }
.summary h1 { font-size: 3.25rem; }
.checked { color: var(--text-4); font-size: 0.8125rem; }
.checked.stale { color: var(--ink-civ); }
.checked.failed { color: var(--scarlet); }

.section { padding-top: 48px; }
.section > h2 {
  font-size: 2.25rem; display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.badge { width: 24px; height: 24px; flex: none; image-rendering: pixelated; display: inline-block; }
.badge svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

.foot { margin-top: 72px; border-top: var(--hair) solid var(--rule); color: var(--text-3); font-size: 0.9375rem; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 28px; }
.sound {
  font: inherit; font-weight: 600; color: var(--text-2); background: none; cursor: pointer;
  border: var(--hair) solid var(--rule); border-radius: 6px; min-height: 44px; padding: 0 16px;
}
.sound:hover { color: var(--porcelain); border-color: var(--text-3); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .lockup .wordmark { font-size: 2rem; }
  .nav { gap: 0 22px; }
  .summary { padding-top: 28px; }
  .summary h1 { font-size: 2.5rem; }
  .section { padding-top: 40px; }
  .section > h2 { font-size: 1.75rem; margin-bottom: 18px; }
}

/* Lines and stations: each game or site is a transit line leaving a shared
   trunk (the GaterGrid interchange). Stops light in order when the line's
   checks pass (the signature move). Stroke system: track 6, ring 3, hair 1. */
.lines {
  --head: 14rem;
  --term: 20rem;
  --gap: 20px;
  --stop-y: 33px;               /* first stop centre from a line's top */
  --trunk-x: calc(var(--head) + var(--gap) + (var(--stop) - var(--track)) / 2);
  list-style: none; margin: 0; padding: 0; display: grid;
}

.line {
  --ink: var(--ink-web);
  position: relative;
  display: grid;
  grid-template-columns: var(--head) minmax(0, 1fr) var(--term);
  grid-template-areas: "head track terminal" "head history history";
  align-items: start;
  column-gap: var(--gap);
  row-gap: 10px;
  padding: 22px 0 24px;
  border-top: var(--hair) solid var(--rule);
}
.line:last-child { border-bottom: var(--hair) solid var(--rule); }
.line[data-ink="mc"] { --ink: var(--ink-mc); }
.line[data-ink="tekkit"] { --ink: var(--ink-tekkit); }
.line[data-ink="civ"] { --ink: var(--ink-civ); }

/* the trunk: one porcelain line through every first stop in the list */
.lines > .line::after {
  content: ""; position: absolute; left: var(--trunk-x); width: var(--track);
  top: 0; bottom: 0; background: var(--porcelain); z-index: 0;
}
.lines > .line:last-child::after { bottom: auto; height: var(--stop-y); }
.lines.sites { --term: 13rem; }

/* the interchange every line in the section leaves from */
.interchange { position: relative; height: 52px; }
.interchange::after {
  content: ""; position: absolute; left: var(--trunk-x); width: var(--track);
  top: 26px; bottom: 0; background: var(--porcelain);
}
.ix-ring {
  position: absolute; z-index: 1; top: 8px; width: 36px; height: 36px; border-radius: 50%;
  left: calc(var(--trunk-x) + var(--track) / 2 - 18px);
  background: var(--porcelain); box-shadow: inset 0 0 0 7px var(--porcelain), inset 0 0 0 12px var(--ground);
}
.ix-name {
  position: absolute; top: 12px; left: calc(var(--trunk-x) + var(--track) / 2 + 30px);
  font-family: var(--cond); font-weight: 600; font-size: 1.25rem; line-height: 28px; color: var(--porcelain);
}

.line-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; }
.line-head .badge { width: 28px; height: 28px; }
.line-name { font-size: 1.625rem; overflow-wrap: anywhere; }

/* the track: stops sit on one 6px line; segments fill left to right */
.track {
  grid-area: track; list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start; min-width: 0; position: relative; z-index: 1;
}
.stop { position: relative; flex: 1 1 0; min-width: 0; padding-top: calc(var(--stop) + 10px); padding-right: 12px; }
.stop.end { flex: 0 0 26px; padding-right: 0; }
.stop::before {
  /* segment from this stop's centre to the next stop's centre */
  content: ""; position: absolute; top: calc((var(--stop) - var(--track)) / 2);
  left: calc(var(--stop) / 2); width: 100%; height: var(--track);
  background: linear-gradient(to right, var(--ink) 50%, var(--track-dim) 50%);
  background-size: 200% 100%; background-position: 100% 0;
  transition: background-position 420ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 260ms + var(--j, 0) * 140ms);
}
.stop.end::before { display: none; }
.dot {
  position: absolute; top: 0; left: 0; width: var(--stop); height: var(--stop); border-radius: 50%;
  background: var(--ground); border: var(--ring) solid var(--text-3); z-index: 1;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
  transition-delay: calc(var(--i, 0) * 260ms + var(--j, 0) * 140ms);
}
.stop:first-child .dot { border-color: var(--porcelain); }
.stop.end .dot {
  /* terminus ring at the end of the line, before the address */
  width: 30px; height: 30px; top: -4px; left: -4px;
  box-shadow: inset 0 0 0 4px var(--ground), inset 0 0 0 9px var(--track-dim);
}
.stop-label {
  display: block; font-family: var(--cond); font-weight: 600; font-size: 1.125rem;
  line-height: 1.2; overflow-wrap: anywhere;
}
/* labels hang from the right of their stop's centre, clear of the trunk */
.stop-label { padding-left: calc(var(--stop) / 2 + var(--track)); }

.line.lit .stop::before { background-position: 0 0; }
.line.lit .dot { background: var(--ink); border-color: var(--porcelain); }
.line.lit .stop.end .dot { background: var(--ground); box-shadow: inset 0 0 0 4px var(--ground), inset 0 0 0 9px var(--ink); }
/* stale feed: lines go unlit until fresh data arrives */
.stale .line.lit .stop::before { background-position: 100% 0; }
.stale .line.lit .dot { background: var(--ground); border-color: var(--text-3); }
.stale .line.lit .stop.end .dot { box-shadow: inset 0 0 0 4px var(--ground), inset 0 0 0 9px var(--track-dim); }

/* states carried by form and words, never hue alone: dashed track, hollow
   stops, the state as a word; the line keeps its own ink while parked */
.line[data-state="parked"] .stop::before,
.line[data-state="closed"] .stop::before {
  background: repeating-linear-gradient(to right, var(--ink) 0 12px, transparent 12px 22px);
}
.line[data-state="parked"] .dot,
.line[data-state="closed"] .dot { border-color: var(--ink); background: var(--ground); }
.line[data-state="parked"] .stop.end .dot,
.line[data-state="closed"] .stop.end .dot { box-shadow: inset 0 0 0 4px var(--ground), inset 0 0 0 9px var(--ink); }
.line[data-state="unknown"] .stop::before {
  background: repeating-linear-gradient(to right, var(--track-dim) 0 4px, transparent 4px 10px);
}
.line[data-state="down"] .stop::before {
  background: repeating-linear-gradient(to right, var(--scarlet) 0 12px, transparent 12px 22px);
}
.line[data-state="down"] .stop:first-child .dot { background: var(--scarlet); border-color: var(--porcelain); }
.line[data-state="down"] .stop:first-child .stop-label { color: var(--scarlet); }

/* terminal: the address and its Copy button, or a link */
.terminal {
  grid-area: terminal; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 14px; row-gap: 8px; min-width: 0; margin-top: -9px;
}
.address { font-weight: 600; font-size: 1.25rem; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.copy {
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--porcelain); background: transparent;
  border: 2px solid var(--porcelain); border-radius: 6px; min-height: 44px; min-width: 6.5rem; padding: 0 18px;
  cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out;
}
.copy:hover { background: var(--porcelain); color: var(--ground); }
.copy.done { background: var(--porcelain); color: var(--ground); }
.copy.failed { border-color: var(--scarlet); }
.terminal .lobby { color: var(--text-2); font-size: 1rem; max-width: 24ch; }
.terminal a.go { font-weight: 600; font-size: 1.125rem; padding: 10px 0; overflow-wrap: anywhere; }
.terminal a.go:hover { color: var(--ink-mc); }
.line[data-state="parked"] .address,
.line[data-state="closed"] .address { color: var(--text-3); }

/* last 30 checks drawn as ticks along the track (status page only) */
.history { grid-area: history; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--text-2); font-size: 0.9375rem; position: relative; z-index: 1; padding-left: calc(var(--stop) / 2 + var(--track)); }
.ticks { display: flex; gap: 3px; height: 14px; align-items: stretch; }
.ticks i { width: 5px; background: var(--ink); border-radius: 1px; }
.ticks i.miss { background: var(--scarlet); height: 50%; align-self: flex-end; }
.ticks i.none { background: var(--track-dim); }

/* branch line of linked stations (homepage websites, status machines) */
.branch { list-style: none; margin: 0; padding: 0 0 4px; display: flex; position: relative; }
.branch > li { position: relative; flex: 1 1 0; min-width: 0; padding-top: calc(var(--stop) + 12px); padding-right: 20px; }
.branch > li::before {
  content: ""; position: absolute; top: calc((var(--stop) - var(--track)) / 2); left: calc(var(--stop) / 2);
  width: 100%; height: var(--track); background: var(--ink-web);
}
.branch > li:last-child::before { display: none; }
.branch .dot { border-color: var(--porcelain); background: var(--porcelain); }
.branch a.station { font-family: var(--cond); font-weight: 600; font-size: 1.5rem; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.branch a.station:hover { color: var(--ink-mc); text-decoration: underline; }
.branch a.station .badge { width: 22px; height: 22px; }
.branch .about { color: var(--text-2); font-size: 0.9375rem; max-width: 30ch; }
.branch .state-word { font-family: var(--cond); font-weight: 600; font-size: 1.0625rem; }

/* machine stops on the status page */
.branch.machines > li[data-state="parked"] .dot { border-color: var(--text-3); background: var(--ground); }
.branch.machines > li[data-state="unknown"] .dot { border-color: var(--text-3); background: var(--ground); }
.branch.machines > li[data-state="down"] .dot { background: var(--scarlet); }
.branch.machines > li[data-state="down"] .state-word { color: var(--scarlet); }
.branch.machines .name { font-family: var(--cond); font-weight: 600; font-size: 1.1875rem; display: block; }

@media (max-width: 56em) {
  /* the trunk runs down the left edge; heads and terminals sit beside it */
  .lines { --stop-y: 77px; --trunk-x: calc((var(--stop) - var(--track)) / 2); }
  .line {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "track" "terminal" "history";
    row-gap: 16px;
  }
  .line-head, .terminal, .history { margin-left: calc(var(--stop) + 14px); }
  .history { padding-left: 0; }
  .line-head { min-height: 28px; }
  .terminal { margin-top: 0; grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .terminal .copy { width: 100%; }
  .address { font-size: 1.125rem; }
  .terminal .lobby, .terminal a.go { grid-column: 1 / -1; }
  .line-name { font-size: 1.375rem; }
}

/* vertical strip map on phones for branch lines */
@media (max-width: 40em) {
  .branch { flex-direction: column; }
  .branch > li { flex: none; padding: 0 0 22px calc(var(--stop) + 16px); min-height: 44px; }
  .branch > li::before { top: calc(var(--stop) / 2); left: calc((var(--stop) - var(--track)) / 2); width: var(--track); height: 100%; }
  .branch a.station { min-height: 0; margin-top: -6px; }
  .stop-label { font-size: 1.0625rem; }
}

/* very narrow phones: the address gets its own row, Copy goes full width */
@media (max-width: 23.5em) {
  .terminal { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .stop::before, .dot { transition: none; }
}

/* The gater and its easter eggs. Triggers and timings match the 2026-07 eggs. */
.gater { width: 150px; flex: none; position: relative; }
.gater svg { width: 100%; height: auto; display: block; overflow: visible; }
.gater path, .gater polygon { pointer-events: visiblePainted; }
.gater-eye { transform-box: fill-box; transform-origin: center; }
.gater-eye.blink { transform: scaleY(0.08); }
.gater-cap, .gater-sky, .gater-phones { display: none; }
.gater-cap.on, .gater-sky.on, .gater-phones.on { display: inline; }

.gater svg.bob { animation: gater-bob 0.45s ease-in-out infinite alternate; transform-origin: 35% 45%; }
@keyframes gater-bob {
  from { transform: rotate(0deg) translateY(0); }
  to { transform: rotate(1.6deg) translateY(6px); }
}
.gater svg.bang { animation: gater-bang 0.33333s linear infinite; transform-origin: 35% 45%; }
@keyframes gater-bang {
  0% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(4.5deg) translateY(12px); }
  70% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(0deg) translateY(0); }
}
.gater svg.growl { animation: gater-growl-shake 0.12s linear infinite; transform-origin: 35% 45%; }
@keyframes gater-growl-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, 2px); }
  100% { transform: translate(0, 0); }
}

.chilly-letter.lit { color: var(--orange); }

.gater-jam {
  position: fixed; width: min(150px, 24vw); z-index: 6; pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gater-jam-inner { position: relative; }
.gater-jam svg { width: 100%; height: auto; display: block; }
.gater-jam-guitar {
  position: absolute; width: 60%; left: 26%; top: 34%;
  transform: rotate(-20deg); transform-origin: 50% 78%;
}
.gater-jam.on .gater-jam-inner { animation: gater-jam-rock 0.45s ease-in-out infinite alternate; }
@keyframes gater-jam-rock {
  from { transform: rotate(-4deg) translateY(0); }
  to { transform: rotate(3deg) translateY(6px); }
}
.gater-jam.on .gater-jam-guitar { animation: gater-strum 0.225s ease-in-out infinite alternate; }
@keyframes gater-strum {
  from { transform: rotate(-26deg); }
  to { transform: rotate(-14deg); }
}
.gater-jam-tl { top: 0; left: 0; transform: translate(-108%, -108%) rotate(45deg); }
.gater-jam-tl.on { transform: translate(-14%, -14%) rotate(45deg); }
.gater-jam-tr { top: 0; right: 0; transform: translate(108%, -108%) scaleX(-1) rotate(45deg); transition-delay: 0.08s; }
.gater-jam-tr.on { transform: translate(14%, -14%) scaleX(-1) rotate(45deg); }
.gater-jam-bl { bottom: 0; left: 0; transform: translate(-108%, 108%) rotate(-45deg); transition-delay: 0.16s; }
.gater-jam-bl.on { transform: translate(-14%, 14%) rotate(-45deg); }
.gater-jam-br { bottom: 0; right: 0; transform: translate(108%, 108%) scaleX(-1) rotate(-45deg); transition-delay: 0.24s; }
.gater-jam-br.on { transform: translate(14%, 14%) scaleX(-1) rotate(-45deg); }

.gater-swim {
  position: fixed; top: 32vh; left: 0; width: 240px;
  z-index: 5; pointer-events: none;
  animation: gater-swim 7s linear forwards;
}
.gater-swim svg { width: 100%; height: auto; display: block; }
@keyframes gater-swim {
  from { transform: translateX(-260px) translateY(0); }
  25%  { transform: translateX(24vw) translateY(-3vh); }
  50%  { transform: translateX(49vw) translateY(0); }
  75%  { transform: translateX(74vw) translateY(-3vh); }
  to   { transform: translateX(100vw) translateY(0); }
}

.badge { transition: transform 120ms ease-out; }
.badge.hop { transform: translateY(-4px); }

#dirt-block { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; position: relative; }
#dirt-block.mining { animation: dirt-shake 0.2s linear infinite; }
@keyframes dirt-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, 0); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}
.ice-shard {
  position: absolute; width: 6px; height: 6px; z-index: 1;
  pointer-events: none; animation: ice-shard 0.9s ease-in forwards;
}
@keyframes ice-shard {
  45% { transform: translate(calc(var(--dx) * 0.6), var(--dy)) rotate(var(--r1)); }
  100% { transform: translate(var(--dx), var(--gy)) rotate(var(--r2)); }
}

@media (max-width: 640px) {
  .gater { width: 104px; }
}

/* Reduced motion: the jokes and sounds stay, the large movement goes. */
@media (prefers-reduced-motion: reduce) {
  .gater svg.bob, .gater svg.bang, .gater svg.growl,
  .gater-jam.on .gater-jam-inner, .gater-jam.on .gater-jam-guitar,
  #dirt-block.mining { animation: none; }
  .gater-jam { transition: opacity 0.3s linear; opacity: 0; }
  .gater-jam.on { opacity: 1; }
  .gater-jam-tl, .gater-jam-tl.on { transform: translate(-14%, -14%) rotate(45deg); }
  .gater-jam-tr, .gater-jam-tr.on { transform: translate(14%, -14%) scaleX(-1) rotate(45deg); }
  .gater-jam-bl, .gater-jam-bl.on { transform: translate(-14%, 14%) rotate(-45deg); }
  .gater-jam-br, .gater-jam-br.on { transform: translate(14%, 14%) scaleX(-1) rotate(-45deg); }
  .gater-swim { left: 50%; margin-left: -120px; animation: gater-swim-still 7s linear forwards; }
  @keyframes gater-swim-still {
    0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }
  }
  .ice-shard { animation: none; opacity: 0; }
  .badge { transition: none; }
}