:root {
  --text: #111;
  --muted: #444;
  --border: #222;
  --bg: #fff;
  --head-bg: #f3f3f3;
  /* One layout at every size: spacing, text and card images scale with the viewport. */
  --pad: clamp(6px, min(1.6vw, 1.3vh), 14px);
  --card-h: clamp(44px, calc((100dvh - 120px) / 6 - 2.2em), 138px); /* app.js refines this to fit the screen */
  --card-col: clamp(104px, 30vw, 230px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #eee;
    --muted: #bbb;
    --border: #666;
    --bg: #121212;
    --head-bg: #1e1e1e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(8px, min(2vw, 2vh), 24px) clamp(8px, 2vw, 16px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(13px, min(3.2vw, 2.1vh), 17px);
  line-height: 1.25;
  color: var(--text);
  background: var(--bg);
}

main {
  max-width: 760px;
  margin: 0 auto;
}

.table {
  border: 1px solid var(--border);
}

.row {
  display: grid;
  grid-template-columns: 1fr var(--card-col);
  border-top: 1px solid var(--border);
}

.row.head {
  border-top: none;
  background: var(--head-bg);
  font-weight: 700;
}

.row > div {
  min-width: 0;
  padding: var(--pad);
  overflow-wrap: break-word;
}

.row > div + div {
  border-left: 1px solid var(--border);
}

.category-group + .category-group {
  margin-top: calc(var(--pad) * 0.8);
}

.category-name,
.category-detail {
  font-weight: 700;
}

.category-note,
.card-note {
  color: var(--muted);
}

.reward {
  margin-top: 2px;
}

.card {
  overflow-wrap: normal;
}

.card-name,
.card-note {
  font-size: 0.85em;
}

.card-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--card-h);
  margin-top: 4px;
  border-radius: 6px;
}

.error {
  color: #c62828;
}