/* Soforth hub. Night terrain; the day's theme hue arrives via the shared
   custom properties exactly as in the games. */

/* THE HUB SCROLLS; THE GAMES DO NOT.
   `shared/ui.css` hard-locks the body — `position: fixed; overflow: hidden` —
   because a game is one screen and iOS rubber-banding under a drag ruins it.
   The hub is not one screen: it is a LIST that grows every time a game joins
   the collection. At five games it already ran 868px tall on an 844px phone,
   which put the last tile permanently below the fold with no way to reach it.
   So the hub opts out of the lock here rather than the games opting into it —
   the lock is right for four pages out of five, and this is the exception. */
body.hub-page {
  position: static;
  height: auto;
  min-height: 100dvh;
  /* `visible`, not `auto`: the BODY is not the scroller here, the viewport is.
     Making the body its own scroll container would leave `html { height: 100% }`
     clipping it, and iOS would scroll an inner box rather than the page — which
     is what breaks momentum and the URL-bar collapse. */
  overflow: visible;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

.hub {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
}

/* A sheet is modal, so the page behind it must not scroll away underneath. */
body.hub-page.sheet-open {
  overflow: hidden;
}

.hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.mark {
  width: 66px;
  height: 22px;
}

.mark-stone {
  fill: var(--bone);
}

.mark-trail {
  fill: none;
  stroke: var(--moss);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  color: var(--bone);
}

.hub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.streak-chip svg {
  color: var(--moss);
}

.tonight-line {
  color: var(--faint);
  font-size: 0.88rem;
  padding: 14px 4px 4px;
}

#tonight-date {
  color: var(--muted);
  font-weight: 600;
}

.tiles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
  min-height: 0;
}

.game-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  background: var(--surface);
  border-radius: var(--radius-l);
  padding: 18px;
  transition: background 150ms ease, transform 120ms ease;
}

.game-tile:hover {
  background: var(--surface-raised);
}

.game-tile:active {
  transform: scale(0.985);
}

.game-tile .mini {
  flex: 0 0 96px;
}

.game-tile .mini svg {
  width: 96px;
  height: 96px;
  display: block;
}

.mb-tile {
  fill: var(--tile);
}

.mb-wall {
  stroke: var(--wall);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.mb-beam {
  stroke: var(--bone);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

.mb-string {
  stroke: var(--wall);
  stroke-width: 1;
}

.mb-stone {
  fill: var(--bone);
}

.mb-start {
  fill: var(--moss);
}

/* Waymark's signpost silhouette: a post per letter, with the rail each one is
   carved above. A rail the day gives away for free wears the accent. */
.mb-post {
  stroke: var(--wall);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.55;
}

.mb-rail {
  stroke: var(--bone);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.8;
}

.mb-rail-set {
  stroke: var(--moss);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* Drift's tray: pegs are blocks, stones are filled discs, and a hollow ring
   marks where each stone owes — solid is where things are, hollow where they
   must get to. */
.mb-peg {
  fill: var(--wall);
  fill-opacity: 0.45;
}

.mb-ghost {
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.2;
  stroke-dasharray: 2.4 2.4;
  opacity: 0.65;
}

/* Vesperlude's pool. This rule was MISSING, so every hex fell back to SVG's
   default fill — black. On the dark hub that read as a plausibly-empty pool
   and nobody caught it; the moment a light ground existed the tile became a
   solid black honeycomb. A mini class with no rule is not a small omission. */
.mb-hex {
  fill: var(--tile);
  stroke: var(--bg);
  stroke-width: 0.5;
}

.tile-body {
  flex: 1;
  min-width: 0;
}

.tile-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.2;
}

.tile-meta {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2px;
}

.tile-state {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--moss);
}

.tile-state.done {
  color: var(--muted);
}

.tile-state.done b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hub-foot {
  text-align: center;
  color: var(--faint);
  font-size: 0.85rem;
  padding-top: 12px;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
}

.foot-dots {
  letter-spacing: 0.2em;
  color: var(--moss);
}

.board-rows,
.game-stat-rows {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.board-row,
.game-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-raised);
  border-radius: var(--radius-m);
  padding: 12px 14px;
}

.board-row .who,
.game-stat-row .g {
  font-weight: 600;
}

.board-row .t,
.game-stat-row .v {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- tonight's board ---------- */

/* One section per game, each with its own rows. The list scrolls inside the
   sheet so two full boards can never push the Back button off a small phone. */
#sheet-board .board-rows {
  gap: 16px;
  max-height: min(52dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.board-game-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--muted);
  padding-left: 2px;
  margin-bottom: 6px;
}

.board-list {
  display: grid;
  gap: 6px;
}

.board-row .r {
  flex: 0 0 auto;
  min-width: 1.6ch;
  text-align: right;
  color: var(--faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.board-row .who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Your own row: the day's accent, worn lightly — a hairline and a tag, not a
   flood of colour. */
.board-row.me {
  position: relative;
  overflow: hidden;
}

.board-row.me::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--moss);
}

.board-row.me .r,
.board-row.me .t {
  color: var(--moss);
}

.board-row.me .t {
  font-weight: 650;
}

.board-row .you {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

/* the elision between the top rows and a lower-ranked "you" row */
.board-more {
  color: var(--faint);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 2px 0;
}

/* empty / offline / loading whispers inside a game's section */
.board-note {
  color: var(--faint);
  font-size: 0.85rem;
  padding: 4px 2px 0;
}

.sheet-note {
  color: var(--faint);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.92rem;
}

.name-input {
  background: var(--surface-raised);
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
  width: 12ch;
  text-align: right;
}

.name-input:focus-visible {
  outline: 2px solid var(--moss);
}