/* Night glass: xra1.com's design tokens and shared parts (DESIGN.md). Pages keep their own layout in their own <style>.
   Load: <link rel="stylesheet" href="/styles/night.css"> and, for the wordmark and numerals,
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Doto:wght@700;900&display=swap"> */
:root {
  color-scheme: dark;
  --void: #000000;
  --glass: rgba(28, 30, 36, .58);
  --glass-hi: rgba(44, 47, 56, .72);
  --edge: rgba(255, 255, 255, .14);
  --hair: rgba(255, 255, 255, .08);
  --text: #F5F5F7;
  --text-2: #A1A1A6;
  --iris: #F7FFA8;
  --iris-ink: #121400;
  --data: #A8A8FF;
  --blur: blur(28px) saturate(160%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-dot: "Doto", var(--font);
  --r-window: 28px; --r-card: 20px; --r-inner: 12px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t13: 13px; --t15: 15px; --t17: 17px; --t22: 22px; --t32: 32px; --t-hero: clamp(40px, 7vw, 84px);
  --gutter: 16px; --page: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 var(--t17)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
.n-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* glass: a pane over the world, lit along its top rim */
.n-glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 var(--edge), 0 12px 40px rgba(0, 0, 0, .45); }

/* the wordmark: the Atari spark */
.n-mark { font: 900 24px/1 var(--font-dot); letter-spacing: .02em; text-decoration: none; color: var(--text); }
.n-mark i { font-style: normal; color: var(--iris); }

/* the top bar: one floating capsule */
.n-bar { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 12px auto 0;
  max-width: var(--page); padding: 8px 8px 8px 20px; border-radius: var(--r-pill); }
.n-bar nav { margin-left: auto; display: flex; gap: 2px; }
.n-bar nav a { color: var(--text-2); text-decoration: none; font-size: var(--t15); padding: 8px 14px; border-radius: var(--r-pill); transition: background .2s var(--ease), color .2s var(--ease); }
.n-bar nav a:hover, .n-bar nav a[aria-current] { color: var(--text); background: rgba(255, 255, 255, .08); }
@media (max-width: 420px) { .n-bar { margin: 8px var(--gutter) 0; padding-left: 16px; } .n-bar nav a { padding: 8px 10px; } }

/* controls: capsules */
.n-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill); border: 1px solid var(--hair); background: rgba(255, 255, 255, .08); color: var(--text);
  font: 600 var(--t15)/1 var(--font); text-decoration: none; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.n-btn:hover { background: rgba(255, 255, 255, .14); }
.n-btn:active { transform: scale(.97); }
.n-btn.is-primary { background: var(--iris); color: var(--iris-ink); border-color: transparent; }
.n-btn.is-primary:hover { background: #FBFFD0; }
.n-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--text); font: 500 var(--t13)/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background .2s var(--ease), border-color .2s var(--ease); }
.n-chip:hover { background: var(--glass-hi); border-color: var(--edge); }

/* a world card: its picture, its words, its data strip; MRTK's hover light follows the pointer (--mx/--my, set by JS) */
.n-card { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; text-decoration: none;
  background: #0d0e11; border: 1px solid var(--hair); isolation: isolate; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.n-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 45%); }
.n-card:hover { border-color: var(--edge); }
.n-card:hover::after { opacity: 1; }
.n-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: #15171b; }
.n-card .n-words { margin: 12px 14px 4px; font-size: var(--t15); line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Palantir layer: real numbers, small, quiet, tabular */
.n-strip { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 14px 14px; font: 500 12px/1.4 var(--font);
  font-variant-numeric: tabular-nums; color: var(--text-2); }
.n-strip b { color: var(--data); font-weight: 600; }
.n-rank { position: absolute; top: 10px; left: 10px; z-index: 1; min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center;
  border-radius: var(--r-pill); font: 900 18px/1 var(--font-dot); color: var(--iris); background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); }

.n-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 32px 0 48px; color: var(--text-2); font-size: var(--t13); border-top: 1px solid var(--hair); }
.n-foot a { color: var(--text-2); text-decoration: none; }
.n-foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }