:root {
  --background: #1C1A17;
  --text: #E6DAC2;
  --muted: #8C826F;
  --accent: #E0A040;
  --in: #9CC08A;
  --out: #D9826A;
  --hairline: #2C2924;
}

body {
  background: var(--background);
  color: var(--text);
  font: 16px/1.6 ui-monospace, Menlo, Consolas, monospace;
  max-width: 40em;
  margin: 0 auto;
  padding: 2em 16px;
}

h1 { font-size: 1em; font-weight: normal; margin: 1.5em 0 0; color: var(--accent); }
ul { list-style: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 1.5em 0; }
p { overflow-wrap: anywhere; }

a, .link { color: var(--accent); }
header { margin-bottom: 2em; }
header a { color: var(--muted); text-decoration: none; }
header .link { float: right; }

.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

input {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--muted);
  color: var(--text);
  font: inherit;
  width: 12em;
}
input:focus { outline: none; border-bottom-color: var(--accent); }
.wide { width: 100%; }

[hidden] { display: none !important; }

.muted { color: var(--muted); }
.accent { color: var(--accent); }
.in { color: var(--in); }
.out { color: var(--out); }

.top, .games li { display: flex; justify-content: space-between; gap: 1em; }
.top { margin-bottom: 1em; }

.row { display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap; margin: 0 0 1em; }
.row input { flex: 1; min-width: 8em; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; }
.columns ul { margin: 0.5em 0; }

.tabs { margin-bottom: 0.8em; }
.tab { margin-right: 1.2em; color: var(--muted); text-decoration: none; }
.tab.on { color: var(--accent); text-decoration: underline; }

dialog {
  background: var(--background);
  color: var(--text);
  border: 1px solid var(--muted);
  width: calc(100% - 32px);
  max-width: 32em;
  padding: 0 1.5em;
}
dialog::backdrop { background: rgb(0 0 0 / 0.6); }