:root {
  --sg-bg: #05070e;
  --sg-panel: #0c1120;
  --sg-panel-2: #121a2e;
  --sg-line: #24304d;
  --sg-text: #e6ecf8;
  --sg-muted: #8a99b8;
  --sg-accent: #7fb2ff;
  --sg-guess: #ffcf5c;
  --sg-actual: #6ee7a8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.sg-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/*
 * While a round is up the page is pinned to the viewport instead of scrolling.
 * The sky is the thing worth looking at, so it takes every pixel left over and
 * the guess panel slides in over it.
 */
.sg-page.is-playing {
  max-width: none;
  height: 100vh;
  height: 100dvh;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.sg-page.is-playing .sg-header {
  margin-bottom: 0;
}

.sg-page.is-playing .sg-header h1 {
  font-size: 1.3rem;
}

.sg-page.is-playing .sg-header p {
  display: none;
}

.sg-page.is-playing .sg-round-bar {
  margin-bottom: 0;
}

.sg-muted {
  color: var(--sg-muted);
  font-weight: 400;
}

.sg-loading {
  text-align: center;
  color: var(--sg-muted);
  padding: 80px 0;
}

/* ---------------------------------------------------------------- header */

.sg-header {
  position: relative;
  margin-bottom: 24px;
}

.sg-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
}

/* A link back to the start, but it should still read as the masthead. */
.sg-brand {
  color: inherit;
  text-decoration: none;
}

.sg-brand:hover {
  color: var(--sg-accent);
}

.sg-header p {
  margin: 4px 0 0;
  color: var(--sg-muted);
}

.sg-home {
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--sg-muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.sg-home:hover {
  color: var(--sg-accent);
}

/* ----------------------------------------------------------------- intro */

.sg-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/*
 * A container holding two links: one to play, one to the result already played.
 * Real addresses, so either can be copied or opened in a new tab.
 */
.sg-tier-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 18px;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

.sg-tier-card:hover {
  border-color: var(--sg-accent);
  transform: translateY(-2px);
}

/* Takes the rest of the card, so most of it is still a click away from a game. */
.sg-tier-main {
  flex: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sg-tier-card h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.sg-tier-card p {
  margin: 0 0 12px;
  color: var(--sg-muted);
  font-size: 0.9rem;
}

.sg-tier-go {
  color: var(--sg-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.sg-how {
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
}

.sg-how summary {
  cursor: pointer;
  font-weight: 600;
}

/*
 * Two columns of a comfortable measure, rather than one column of a comfortable
 * measure and a lot of empty box beside it. `auto-fit` drops to one column on a
 * narrow screen without needing a breakpoint.
 */
.sg-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 32px;
  align-items: start;
  margin-top: 6px;
}

.sg-how p {
  margin: 8px 0 0;
  color: var(--sg-muted);
  font-size: 0.9rem;
}

.sg-how-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sg-line);
}

.sg-how-link {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--sg-accent);
  text-decoration: underline;
  cursor: pointer;
}

.sg-how strong {
  color: var(--sg-text);
}

/* ------------------------------------------------------------- tutorial */

.sg-learn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-decoration: none;
  text-align: left;
  background: linear-gradient(120deg, rgba(24, 40, 78, 0.85), rgba(14, 20, 38, 0.85));
  border: 1px solid rgba(127, 178, 255, 0.35);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.sg-learn:hover {
  border-color: var(--sg-accent);
  transform: translateY(-2px);
}

.sg-learn-mark {
  font-size: 1.5rem;
  color: var(--sg-accent);
  line-height: 1;
}

.sg-learn span span {
  display: block;
  font-size: 0.86rem;
}

.sg-learn-go {
  margin-left: auto;
  color: var(--sg-accent);
  font-size: 1.2rem;
}

/*
 * The tutorial fills the viewport like a round does: sky on the left, text on
 * the right. The lessons are animations, so they need the room.
 */
.sg-tutorial {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}

.sg-tutorial-stage {
  position: relative;
  min-height: 0;
}

/*
 * Top centre, clear of the horizon. Down at the bottom it sat on top of the
 * altitude measurement, which is the one thing lesson three needs you to read.
 */
.sg-tutorial-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 238, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.sg-tutorial-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.sg-tutorial-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(150, 185, 235, 0.55);
  background: transparent;
  cursor: pointer;
}

.sg-tutorial-dots button.is-current {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
}

/*
 * The inset map, top right: clear of the caption running across the top centre,
 * of the lesson dots along the bottom, and of the horizon and its guides, which
 * all sit low in the frame. Small enough to read as an aside, since it is
 * context for the sky rather than the thing being taught.
 */
.sg-minimap {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 300px;
  margin: 0;
  padding: 8px 8px 6px;
  background: rgba(6, 10, 20, 0.72);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  pointer-events: none;
}

.sg-minimap svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.sg-minimap figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--sg-muted);
}

/* Same blue-grey as the coordinates beside it: one caption, not two readouts. */
.sg-minimap-clock {
  white-space: nowrap;
}

.sg-minimap-sea {
  fill: #0a1226;
}

.sg-minimap-land {
  fill: #23314f;
}

/* The Earth's shadow. Translucent, so the coastlines stay readable through it. */
.sg-minimap-night {
  fill: rgba(2, 4, 10, 0.62);
}

.sg-minimap-parallel {
  stroke: rgba(255, 207, 92, 0.5);
  stroke-width: 3;
  stroke-dasharray: 14 12;
}

.sg-minimap-pin circle {
  fill: var(--sg-guess);
}

.sg-minimap-halo {
  fill: rgba(255, 207, 92, 0.22);
}

.sg-tutorial-text {
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sg-tutorial-step {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sg-muted);
}

.sg-tutorial-text h2 {
  margin: 6px 0 10px;
  font-size: 1.35rem;
  line-height: 1.25;
}

.sg-tutorial-blurb {
  margin: 0;
  color: var(--sg-muted);
  font-size: 0.94rem;
}

/* A lesson may run to several paragraphs; the first keeps the heading's spacing. */
.sg-tutorial-blurb + .sg-tutorial-blurb {
  margin-top: 10px;
}

.sg-tutorial-nav {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}

.sg-tutorial-nav button {
  flex: 1;
}

.sg-tutorial-skip {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--sg-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.sg-tutorial-skip:hover {
  color: var(--sg-accent);
}

@media (max-width: 820px) {
  .sg-tutorial {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
}

/* ------------------------------------------------------------- round bar */

.sg-round-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.sg-round-count {
  font-weight: 600;
}

.sg-given {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.9rem;
}

.sg-given-label {
  color: var(--sg-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sg-unknown {
  color: var(--sg-muted);
  font-style: italic;
  font-weight: 400;
}

.sg-score-so-far {
  margin-left: auto;
  color: var(--sg-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --------------------------------------------------------------- the sky */

/*
 * The round is a fixed-height stage, not a scrolling document. The sky fills
 * whatever is left after the header and the round bar, and the guess panel
 * floats over it, so the page never grows a scrollbar and the sky always gets
 * the room.
 */
.sg-round {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.sg-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sg-line);
  background: #04060d;
}

.sg-sky {
  position: absolute;
  inset: 0;
}

.sg-sky-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.sg-sky-canvas:active {
  cursor: grabbing;
}

.sg-sky-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.75rem;
  color: rgba(200, 215, 245, 0.45);
  pointer-events: none;
}

.sg-sky-keys {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 4px;
}

.sg-sky-keys button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(140, 170, 220, 0.25);
  background: rgba(10, 16, 30, 0.6);
  color: var(--sg-text);
  cursor: pointer;
  font-size: 0.9rem;
}

.sg-sky-keys button:hover {
  border-color: var(--sg-accent);
}

/* ------------------------------------------------------- the label toggles */

.sg-layers {
  position: absolute;
  left: 12px;
  top: 50px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.sg-layers button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(140, 170, 220, 0.25);
  background: rgba(10, 16, 30, 0.68);
  color: var(--sg-muted);
  font: inherit;
  font-size: 0.75rem;
  padding: 4px 10px 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

/* A real checkbox, because a button that only changes shade does not read as
   on or off at a glance. */
.sg-layer-box {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  border: 1px solid rgba(150, 180, 225, 0.5);
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
  color: #06101f;
}

.sg-layers button.is-on .sg-layer-box {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
}

.sg-layers button.is-on {
  color: var(--sg-text);
  border-color: rgba(127, 178, 255, 0.55);
  background: rgba(28, 44, 76, 0.8);
}

.sg-layers button:hover {
  border-color: var(--sg-accent);
}

/* ---------------------------------------------------------- the compass */

/*
 * Bottom left, not bottom right: the guess panel is docked to the right edge and
 * would sit on top of it. The drag hint gives up that corner once the round is
 * revealed, by which point nobody needs telling to drag.
 */
.sg-compass {
  position: absolute;
  left: 12px;
  bottom: 10px;
  width: 86px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.sg-compass svg {
  display: block;
  width: 86px;
  height: 86px;
  overflow: visible;
}

.sg-compass-ring {
  fill: rgba(8, 12, 22, 0.55);
  stroke: rgba(140, 175, 225, 0.3);
  stroke-width: 1.5;
}

.sg-compass-major,
.sg-compass-minor {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: system-ui, sans-serif;
}

.sg-compass-major {
  fill: rgba(214, 230, 255, 0.95);
  font-size: 15px;
  font-weight: 700;
}

.sg-compass-minor {
  fill: rgba(160, 188, 228, 0.6);
  font-size: 9px;
}

.sg-compass-needle {
  fill: var(--sg-accent);
}

.sg-compass-label {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: rgba(190, 210, 240, 0.72);
}

/* ------------------------------------------------------ the star hovercard */

.sg-star-card {
  position: absolute;
  transform: translate(14px, -50%);
  min-width: 190px;
  max-width: 250px;
  background: rgba(9, 13, 24, 0.94);
  border: 1px solid var(--sg-line);
  border-radius: 8px;
  padding: 9px 11px;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.sg-star-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.sg-star-bayer {
  margin: 1px 0 0;
  font-size: 0.78rem;
  color: var(--sg-muted);
}

/* Roomier than the star card, since this one is prose rather than a table. */
.sg-lore-card {
  min-width: 250px;
  max-width: 310px;
}

.sg-lore {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(214, 226, 246, 0.88);
}

.sg-lore-star {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--sg-line);
  font-size: 0.78rem;
}

.sg-star-card dl {
  margin: 7px 0 0;
  display: grid;
  gap: 3px;
  font-size: 0.78rem;
}

.sg-star-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sg-star-card dt {
  color: var(--sg-muted);
  flex: none;
}

.sg-star-card dd {
  margin: 0;
  text-align: right;
}

/* --------------------------------------------------------- the world map */

.sg-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--sg-line);
  background: var(--sg-panel);
  /* The map handles its own drag to pan, so the browser must not also scroll. */
  touch-action: none;
}

.sg-map-active {
  cursor: crosshair;
}

.sg-map-sea {
  fill: #0a1226;
}

.sg-map-land {
  fill: #1d2b47;
  stroke: #33456d;
  stroke-width: 0.8;
}

.sg-map-link {
  stroke: rgba(255, 255, 255, 0.35);
}

.sg-pin circle {
  fill: none;
}

.sg-pin .sg-pin-core {
  stroke: none;
}

.sg-pin-guess circle {
  stroke: var(--sg-guess);
}

.sg-pin-guess .sg-pin-core {
  fill: var(--sg-guess);
}

.sg-pin-actual circle {
  stroke: var(--sg-actual);
}

.sg-pin-actual .sg-pin-core {
  fill: var(--sg-actual);
}

.sg-pin-label {
  fill: var(--sg-actual);
  font-weight: 700;
  text-anchor: middle;
  stroke: none;
}

/* ------------------------------------------------------- the guess panel */

/*
 * Floats over the sky in the top right and can be dragged anywhere by its
 * header. Docking it to the full right edge cost the sky a third of the frame
 * and still left the map small, which is the wrong trade in a game about
 * looking at the sky.
 */
.sg-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: calc(100vw - 24px);
  background: rgba(8, 12, 22, 0.94);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  z-index: 4;
  overflow: hidden;
}

.sg-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: grab;
  user-select: none;
  background: rgba(18, 26, 46, 0.9);
  border-bottom: 1px solid var(--sg-line);
  touch-action: none;
}

.sg-panel-head:active {
  cursor: grabbing;
}

.sg-panel-grip {
  color: var(--sg-muted);
  font-size: 0.9rem;
  letter-spacing: -1px;
}

.sg-panel-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
}

.sg-panel-close {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--sg-line);
  background: transparent;
  color: var(--sg-text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.sg-panel-close:hover {
  border-color: var(--sg-accent);
}

/* Width is set inline, so the corner handle can drive it. */

.sg-panel-resize {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
  touch-action: none;
  background: linear-gradient(
    45deg,
    transparent 0 46%,
    var(--sg-line) 46% 54%,
    transparent 54% 70%,
    var(--sg-line) 70% 78%,
    transparent 78%
  );
}

.sg-panel-resize:hover {
  background: linear-gradient(
    45deg,
    transparent 0 46%,
    var(--sg-accent) 46% 54%,
    transparent 54% 70%,
    var(--sg-accent) 70% 78%,
    transparent 78%
  );
}

.sg-panel-inner {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-guess-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sg-guess-coords {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sg-guess-time {
  margin: 0;
  font-size: 0.84rem;
}

.sg-guess-prompt {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sg-muted);
}

.sg-reveal-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--sg-muted);
}

.sg-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--sg-muted);
}

.sg-date-field input {
  background: var(--sg-panel-2);
  border: 1px solid var(--sg-line);
  border-radius: 8px;
  color: var(--sg-text);
  padding: 8px 10px;
  font: inherit;
  color-scheme: dark;
}

.sg-primary,
.sg-secondary {
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.sg-primary {
  background: var(--sg-accent);
  color: #06101f;
}

.sg-primary:disabled {
  background: var(--sg-panel-2);
  color: var(--sg-muted);
  cursor: not-allowed;
}

.sg-secondary {
  background: transparent;
  border-color: var(--sg-line);
  color: var(--sg-text);
}

.sg-secondary:hover {
  border-color: var(--sg-accent);
}

@media (max-width: 640px) {
  .sg-panel {
    width: calc(100vw - 24px);
  }
}

/* ------------------------------------------------------------- the reveal */

.sg-result-score {
  margin: 0;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.sg-result-score strong {
  color: var(--sg-accent);
}

.sg-result-rows {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
}

.sg-result-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sg-result-rows dt {
  color: var(--sg-muted);
}

.sg-result-rows dd {
  margin: 0;
  text-align: right;
}

.sg-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------- summary */

.sg-summary {
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sg-summary-head {
  text-align: center;
}

.sg-summary-tier {
  margin: 0;
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

.sg-summary-head h2 {
  margin: 4px 0 0;
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--sg-accent);
}

.sg-summary-head h2 .sg-muted {
  font-size: 1.1rem;
}

.sg-summary-rounds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sg-summary-rounds li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sg-panel-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.88rem;
}

.sg-summary-index {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--sg-line);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.sg-summary-detail {
  flex: 1;
}

.sg-summary-points {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sg-accent);
}

.sg-submit {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Stacked on the leaderboard, where the column is too narrow to hold the field
 * and the button side by side without clipping the placeholder.
 */
.sg-board .sg-submit {
  flex-direction: column;
  margin-bottom: 14px;
}

.sg-board .sg-submit input {
  min-width: 0;
}

.sg-submit input {
  flex: 1;
  min-width: 180px;
  background: var(--sg-panel-2);
  border: 1px solid var(--sg-line);
  border-radius: 8px;
  color: var(--sg-text);
  padding: 10px 12px;
  font: inherit;
}

.sg-submitted {
  margin: 0;
  color: var(--sg-actual);
  font-size: 0.9rem;
}

.sg-error {
  margin: 0;
  flex-basis: 100%;
  color: #ff9d9d;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------- leaderboard */

.sg-board {
  margin-top: 22px;
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 16px 18px;
}

.sg-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sg-board-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.sg-tier-toggle {
  display: flex;
  gap: 4px;
  background: var(--sg-panel-2);
  padding: 3px;
  border-radius: 8px;
}

.sg-tier-toggle button {
  border: none;
  background: transparent;
  color: var(--sg-muted);
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.sg-tier-toggle button.is-active {
  background: var(--sg-line);
  color: var(--sg-text);
}

.sg-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.sg-board-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.sg-board-list li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.sg-board-rank {
  width: 20px;
  color: var(--sg-muted);
  font-variant-numeric: tabular-nums;
}

.sg-board-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-board-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sg-accent);
}

/* ------------------------------------------------------- brightness tuner */

/*
 * A development overlay, shown only when the URL asks for it (?brightness).
 * Bottom left: the layer toggles and compass live on the right, and the guess
 * panel opens top right.
 */
.sg-tuner {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 210px;
  padding: 10px 12px 8px;
  background: rgba(6, 10, 20, 0.88);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  z-index: 5;
}

.sg-tuner-head {
  margin: 0 0 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sg-muted);
}

.sg-tuner-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sg-tuner-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--sg-text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.sg-tuner-list button:hover {
  border-color: var(--sg-line);
}

.sg-tuner-list button.is-current {
  background: rgba(127, 178, 255, 0.16);
  border-color: var(--sg-accent);
}

.sg-tuner-key {
  display: inline-block;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sg-muted);
  font-size: 0.7rem;
  text-align: center;
}

.sg-tuner-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--sg-muted);
}

.sg-tuner-numbers {
  margin: 5px 0 0;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: rgba(138, 153, 184, 0.7);
}

/* ---------------------------------------------------------- on this night */

/*
 * The reveal for a round set at a real historical moment. It sits at the top of
 * the result panel, above the score: the score is the same arithmetic as any
 * other round, and this is the thing worth reading first.
 */
.sg-event {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(120deg, rgba(24, 40, 78, 0.85), rgba(14, 20, 38, 0.85));
  border: 1px solid rgba(127, 178, 255, 0.35);
  border-radius: 10px;
}

.sg-event-lead {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sg-muted);
}

.sg-event-name {
  margin: 4px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.sg-event-where {
  margin: 5px 0 0;
  font-size: 0.82rem;
  color: var(--sg-accent);
}

.sg-event-note {
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--sg-muted);
}

.sg-event-link {
  display: inline-block;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--sg-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 178, 255, 0.35);
}

.sg-event-link:hover,
.sg-event-link:focus-visible {
  border-bottom-color: var(--sg-accent);
}

/* --------------------------------------------------------------- explorer */

/*
 * The last tutorial page: a pin you can drag anywhere and two sliders. It sits
 * along the bottom, under the inset map in the top right and clear of the lesson
 * dots, which the explorer page keeps so you can still page back.
 */
.sg-explorer {
  position: absolute;
  left: 14px;
  bottom: 44px;
  width: 300px;
  padding: 12px 14px 10px;
  background: rgba(6, 10, 20, 0.86);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
}

.sg-explorer-row {
  display: grid;
  grid-template-columns: 38px 1fr 62px;
  align-items: center;
  gap: 8px;
}

.sg-explorer-row + .sg-explorer-row {
  margin-top: 8px;
}

.sg-explorer-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sg-muted);
}

.sg-explorer-value {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sg-text);
}

.sg-explorer input[type='range'] {
  width: 100%;
  accent-color: var(--sg-accent);
}

.sg-explorer-daylight {
  margin: 9px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--sg-guess);
}

/* The map becomes a control on the explorer page rather than a readout. */
.sg-minimap.is-pickable {
  pointer-events: auto;
}

.sg-minimap.is-pickable svg {
  cursor: crosshair;
  touch-action: none;
}

/* ---------------------------------------------------------------- results */

/*
 * The results screen is pinned to the viewport like a round is, rather than
 * scrolling the page. Summary on the left, leaderboard on the right; each
 * column scrolls inside itself if it has to, so the page never does.
 */
.sg-page.is-results {
  max-width: none;
  height: 100vh;
  height: 100dvh;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.sg-page.is-results .sg-header {
  margin-bottom: 0;
}

.sg-page.is-results .sg-header h1 {
  font-size: 1.3rem;
}

.sg-page.is-results .sg-header p {
  display: none;
}

.sg-results {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
}

.sg-results > * {
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}

/*
 * The summary is a column whose map takes whatever height is left over, so a
 * short game and a tall window do not leave a hole and a small window does not
 * push the buttons off the bottom.
 */
.sg-page.is-results .sg-summary {
  display: flex;
  flex-direction: column;
}

.sg-page.is-results .sg-summary-map {
  flex: 1;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-page.is-results .sg-summary-map svg {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

/*
 * The share button sits under the score, which is what it copies, centred where
 * the moon row used to be. The moons moved onto the round rows: one beside each
 * distance, rather than a separate row restating all three.
 */
.sg-share-button {
  margin-top: 12px;
  padding: 9px 22px;
  border: 1px solid var(--sg-accent);
  border-radius: 999px;
  background: rgba(127, 178, 255, 0.14);
  color: var(--sg-accent);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sg-share-button:hover {
  background: var(--sg-accent);
  color: #06101f;
}

.sg-summary-moon {
  font-size: 1.05rem;
  line-height: 1;
}

.sg-share-text {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--sg-panel-2);
  color: var(--sg-text);
  border: 1px solid var(--sg-line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  resize: none;
}

@media (max-width: 900px) {
  .sg-results {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
}

/*
 * Today's result on the tier card, when this browser has already had its go.
 * Stated rather than enforced: knowing is useful, being locked out is not.
 */
.sg-tier-played {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 10px;
  background: rgba(127, 178, 255, 0.1);
  border: 1px solid rgba(127, 178, 255, 0.28);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--sg-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sg-tier-played:hover {
  background: rgba(127, 178, 255, 0.2);
  border-color: var(--sg-accent);
}

.sg-tier-played-go {
  margin-left: auto;
  color: var(--sg-accent);
}

.sg-tier-played strong {
  color: var(--sg-text);
  font-variant-numeric: tabular-nums;
}

.sg-tier-played-moons {
  display: flex;
  gap: 3px;
  font-size: 0.95rem;
  line-height: 1;
}


/* A practice game reaches neither the record nor the board, and says so. */
.sg-practice-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--sg-guess);
}