/* Nightshades: one of each faction on a lit plinth, the wordmark and one line above, the links below. */
.ns {
  --ns-sky: radial-gradient(120% 70% at 50% 100%, #15233A 0%, #0B111C 46%, #050609 100%);
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(260px, 1fr) auto;
  background: var(--ns-sky);
}
.ns-stage { position: absolute; inset: 0; }
.ns-stage canvas { display: block; width: 100%; height: 100%; }
.ns-stage.grab { cursor: pointer; }

.ns-top { position: relative; z-index: 1; padding: calc(92px + env(safe-area-inset-top)) var(--gutter) clamp(20px, 5vh, 52px); text-align: center; pointer-events: none; }
.ns-title { margin: 0; line-height: 0; }
.ns-title img { width: min(460px, 70vw); height: auto; }
.ns-top .ns-text { margin: 18px auto 0; }

/* The band the figures are fitted into; JS measures it. */
.ns-band { pointer-events: none; }

.ns-factions { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ns-factions li { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.8s ease; }
.ns-factions.on li { opacity: 1; }
.ns-factions a { pointer-events: auto; position: relative; display: block; padding: 6px 12px; text-decoration: none; color: rgba(237, 234, 228, 0.82); transition: color 0.25s ease; }
/* The name sits in the light: JS centres the link's box on it. */
.ns-factions .name { display: block; font-size: clamp(13px, 1.05vw, 16px); letter-spacing: 0.16em; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.ns-factions li.hot a { color: var(--paper); }

.ns-bottom {
  position: relative; z-index: 1; padding: 8px var(--gutter) calc(44px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.ns-hint { margin: 0 0 4px; color: var(--mute); }
.ns-hint .coarse { display: none; }
@media (pointer: coarse) { .ns-hint .fine { display: none; } .ns-hint .coarse { display: inline; } }
.no-gl .ns-hint { display: none; }
.ns-text { margin: 0; max-width: 780px; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.38; color: #DADDE6; text-wrap: pretty; }
.ns-links { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.ns-links a { text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--line); transition: border-color 0.2s ease; }
.ns-links a:hover { border-color: var(--paper); }
.ns-links a::after { content: " \2197"; }

@media (max-width: 760px) {
  /* The row is as wide as the phone, so the band only needs its height; the page centres the rest. */
  .ns { grid-template-rows: auto calc(42vw + 64px) auto; align-content: center; row-gap: 12px; }
  .ns-top { padding-top: calc(76px + env(safe-area-inset-top)); }
  .ns-factions a { padding: 4px 2px; }
  .ns-factions .name { font-size: 11.5px; letter-spacing: 0.06em; }
  .ns-bottom { gap: 20px; }
}