/* The site: sheets of parchment with dark ink on a dark ground, a book serif, small-caps headings. No glow or
   gradients. Text sits on parchment or in the dark header; on the ground itself only in parchment's colour. The game
   page's own styles: css/game.css. */
:root { --ground: #1f2430; --head: #161a23; --headline: #4a5468; --gold: #e0c27a;
  --parch: #ece3cc; --parch2: #e2d6b8; --ink: #24201a; --dim: #6a604e; --rule: #9a8a66; --hair: #d4c7a6;
  --accent: #8a3b12; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--parch);
  font: 15px/1.45 "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; }
a { color: var(--accent); }
header.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 16px;
  background: var(--head); color: var(--parch); border-bottom: 2px solid var(--headline); }
header.top a { color: var(--gold); }
header.top .home { font-size: 19px; text-decoration: none; font-variant: small-caps; letter-spacing: .08em; }
/* A sheet of parchment: a thin double rule inside its edge. */
.sheet, main.list { background: var(--parch); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px var(--rule); padding: 10px 14px 12px; }
.sheet h1, .sheet h2, main.list h1, main.list h2 { font-weight: normal; font-variant: small-caps; letter-spacing: .06em;
  color: var(--accent); }
.sheet h1 { font-size: 21px; margin: 0; }
.sheet h2, main.list h2 { font-size: 17px; margin: 0 0 6px; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
main.list { max-width: 1100px; margin: 12px auto; padding: 8px 20px 40px; }
main.list h2 { margin-top: 28px; }
table.games { width: 100%; border-collapse: collapse; }
table.games td { padding: 6px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.games td.players { color: var(--dim); }
.seat { white-space: nowrap; margin-right: 10px; }
/* A phone: a game's row stacked, its name on a line of its own, then the variant and its state, then the seats. */
@media (max-width: 600px) {
  main.list { margin: 0; padding: 6px 12px 30px; }
  table.games, table.games tbody, table.games tr { display: block; }
  table.games tr { padding: 6px 0; border-bottom: 1px solid var(--hair); }
  table.games td { display: inline; padding: 0; border: 0; }
  table.games td:first-child { display: block; font-size: 16px; }
  table.games td:nth-child(2)::after { content: " · "; }
  table.games td.players { display: block; margin-top: 2px; }
  .seat { white-space: normal; display: inline-block; }
}
.newgame { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.newgame .tobots { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.hint { color: var(--dim); }
button, select, input { font: inherit; background: var(--parch2); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 3px; padding: 3px 10px; }
button { cursor: pointer; } button:hover { border-color: var(--ink); }
button:disabled { opacity: .5; cursor: default; }
.you { font-size: 13px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 6px; }