/* Shared by the quiz and list pages; the daily game keeps its own style in index.html. */
:root { --brand: #1b6b57; --brand-ink: #fff; --accent: #e9a23b; }
.play-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); font-size: var(--step--1); color: var(--ink-2); }
.hero-compact h1 { font-size: var(--step-2); }
.lede { margin: 0 0 var(--s4); max-width: 62ch; }
.tile { font-size: .68rem; line-height: 1.15; }
.guess-name small { display: block; }
/* Compass arrows for the distance tile; the kit draws only up and down. */
.tile.compass::before { font-size: 1.2rem; line-height: 1; margin-bottom: 1px; }
.tile[data-dir="n"]::before { content: "\2191"; } .tile[data-dir="ne"]::before { content: "\2197"; }
.tile[data-dir="e"]::before { content: "\2192"; } .tile[data-dir="se"]::before { content: "\2198"; }
.tile[data-dir="s"]::before { content: "\2193"; } .tile[data-dir="sw"]::before { content: "\2199"; }
.tile[data-dir="w"]::before { content: "\2190"; } .tile[data-dir="nw"]::before { content: "\2196"; }
.prose { max-width: 66ch; }
.prose h2 { margin-top: var(--s6); }
.worked { background: var(--surface-2); border-radius: var(--radius); padding: var(--s4); }
.related { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; list-style: none; }
.related a { display: inline-block; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--pill); text-decoration: none; }

.filter { max-width: 26rem; margin-bottom: var(--s3); }
.count-note { min-height: 1.4em; }
/* List pages keep a real table at 390 px: few columns, the state set small under the county. */
.ltable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ltable th { text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: var(--s2); border-bottom: 2px solid var(--line); }
.ltable td { padding: var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.ltable td small { display: block; color: var(--ink-2); font-size: 0.8em; }
.ltable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ltable tr:first-child td { font-weight: 700; }
.site-header .container > .btn { margin-left: auto; }