/* The Codex games' pages. The night palette's values, borrowed from
   d12ball/box_art.py's NIGHT_COVER rather than built from it: this site is
   not the landing build's (docs/design/pbd-site.md, "The page"). */

:root {
  --ground: #080e15;
  --ink: #ffffff;
  --muted: #9aa5b1;
  --accent: #f0b429;
  --edge: #2b3a49;
  --surface: color-mix(in srgb, var(--ground) 82%, var(--edge));
  --raised: color-mix(in srgb, var(--ground) 60%, var(--edge));
  --gutter: 16px;
  --top: 52px;
  --log-width: 380px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: inherit; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button:focus-visible, .viewer:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--top);
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--edge);
  background: var(--surface);
}
.top h1 { margin: 0; font-size: 18px; white-space: nowrap; }
.top h1 a { text-decoration: none; color: var(--accent); }
.game-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.game-title .number { color: var(--ink); font-weight: 600; }

.status { margin: 12px var(--gutter); color: var(--muted); }
.status:empty { display: none; }
.empty { color: var(--muted); margin: 4px 0 0; }

.player { font-weight: 600; }
.team, .kind, .updated { color: var(--muted); }
.versus { color: var(--accent); }

/* -- The lists ------------------------------------------------------------ */

.lists main {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px var(--gutter) 40px;
}
.lists h2 { font-size: 20px; margin: 28px 0 10px; color: var(--accent); }
.lists h3 { font-size: 15px; margin: 18px 0 8px; color: var(--muted); font-weight: 600; }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.entry a {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
}
.entry a:hover { border-color: var(--accent); }
.entry-head, .entry-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}
.entry-head .number { font-weight: 600; }
.entry .sides { overflow-wrap: anywhere; }

/* -- One game --------------------------------------------------------------- */

.game-main {
  display: flex;
  height: calc(100vh - var(--top));
  height: calc(100dvh - var(--top));
}

.viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  background: #02060a;
}
.viewer:active { cursor: grabbing; }
.viewer img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  -webkit-user-drag: none;
}
.viewer-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 4px;
}
.viewer-controls button { min-width: 36px; min-height: 32px; opacity: 0.9; }
.viewer-caption {
  position: absolute;
  left: 10px;
  top: 10px;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ground) 85%, transparent);
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.viewer-caption[hidden] { display: none; }

/* The divider between the board and the log, dragged to resize the log
   (codex.js, GamePage.splitter). The log keeps at least 240px and leaves
   the board at least 240px, however wide it was dragged. */
.splitter {
  flex: none;
  width: 7px;
  margin-right: -6px;
  position: relative;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
  border-left: 1px solid var(--edge);
}
.splitter:hover, .splitter:focus-visible, .splitter.dragging {
  outline: none;
  border-left: 3px solid var(--accent);
}
/* A finger needs more to hold than a mouse: the grip reaches into the
   log's padding, which is wider. */
@media (any-pointer: coarse) {
  .splitter { width: 16px; margin-right: -15px; }
}
.log-hidden .splitter { display: none; }
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }

.log {
  width: var(--log-width);
  min-width: 240px;
  max-width: calc(100vw - 240px);
  flex: none;
  overflow-y: auto;
  background: var(--surface);
  padding: 12px var(--gutter) 32px;
}
.log[hidden] { display: none; }
.log h2 { font-size: 15px; margin: 0 0 8px; }
.log .heading { font-weight: 400; }
.log .history h2 { margin-top: 24px; color: var(--accent); }
.over {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.over[hidden] { display: none; }

.lines { list-style: none; margin: 0; padding: 0; }
.lines .line { padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--edge) 50%, transparent); }
.lines .line:last-child { border-bottom: 0; }
.card { color: #f6d27a; }
.card.hero { color: var(--accent); font-weight: 600; }
.glyph { white-space: nowrap; }
.glyph img { height: 1.25em; width: auto; vertical-align: -0.28em; }
.glyph-n { font-weight: 600; }

.turns { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.turn { padding-top: 10px; border-top: 1px solid var(--edge); }
.turn-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.turn-head h3 { margin: 0; font-size: 14px; font-weight: 400; }
.thumb { padding: 0; flex: none; line-height: 0; overflow: hidden; }
.thumb img { width: 96px; height: 64px; object-fit: cover; object-position: top; display: block; }
.turn .lines { font-size: 14px; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }

/* The phone, and a tablet held upright: the board on top, the log under it,
   the page scrolling. The board keeps most of the screen's height. */
@media (max-width: 960px) {
  .game-main { flex-direction: column; height: auto; }
  /* As tall as the board is at the screen's width, and never more than
     the screen: the viewer sets --board-aspect when a board loads. */
  .viewer {
    flex: none;
    height: auto;
    aspect-ratio: var(--board-aspect, 1.4);
    max-height: calc(100vh - var(--top) - 64px);
    max-height: calc(100svh - var(--top) - 64px);
    min-height: 220px;
  }
  .splitter { display: none; }
  .log { width: auto; min-width: 0; max-width: none; border-left: 0; border-top: 1px solid var(--edge); overflow: visible; }
  .top { flex-wrap: wrap; }
  .game-title { order: 3; flex-basis: 100%; white-space: normal; }
}