/*
 * The front door.
 *
 * Its own sheet rather than borrowing one of the games', because the moment it
 * borrows dial.css it inherits a --unit that the board sets from the viewport
 * and this page has no use for, and every later change to that sheet has to be
 * checked against a page it was not written for. Two games, one door, one very
 * small stylesheet. The palette is deliberately the shared one so the door and
 * the rooms behind it look like the same building.
 */

:root {
  --bg: #0b1020;
  --panel: #151c33;
  --ink: #f2f5ff;
  --dim: #97a3c4;
  --line: #2a3556;
  --cold: #3aa0ff;
  --warm: #ff7a3d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.1; font-weight: 800; }
p { margin: 0 0 0.6em; line-height: 1.45; }
a { color: var(--cold); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

/* The two game cards are links wrapping a panel, so the whole card is the
   target rather than the words inside it -- this page gets opened on phones. */
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }
a.card:hover .panel { border-color: var(--cold); }
a.card .panel { transition: border-color 120ms ease; }

.hint { color: var(--dim); font-size: 14px; }
.go { color: var(--cold); font-weight: 800; font-size: 18px; margin-bottom: 0.4em; }
.tag { color: var(--warm); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }