/* The glossary (templates/glossary.html, docs/glossary.md). Phone first: the games as
   chips, a search, the A-Z bar, then the terms, each a line that opens. */

.glossary {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-8);
    display: grid;
    gap: var(--space-3);
}

.glossary-eyebrow {
    margin: 0;
    font-size: var(--font-size-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.glossary-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: var(--font-size-2xl); }

.glossary-games { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.glossary-game {
    padding: 6px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}
.glossary-game.is-on { background: var(--brand); border-color: var(--brand); color: var(--white); }

.glossary-search { position: relative; display: block; }
.glossary-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.glossary-search .input { width: 100%; min-height: 44px; padding-left: 40px; }

/* The letters: one row that scrolls sideways on a phone, kept in view. */
.glossary-letters {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-1) 0;
    background: var(--bg-page);
}
.glossary-letters::-webkit-scrollbar { display: none; }
.glossary-letter {
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--brand-strong);
    text-decoration: none;
}
.glossary-letter.is-empty { color: var(--text-muted); opacity: 0.45; }
a.glossary-letter:hover { background: var(--brand-dim); }

.glossary-none { color: var(--text-secondary); }

.glossary-letter-head {
    margin: var(--space-3) 0 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    scroll-margin-top: 48px;
}

.glossary-terms { list-style: none; margin: 0; padding: 0; display: grid; }
.glossary-term { border-top: 1px solid var(--border); scroll-margin-top: 48px; }
.glossary-term[hidden] { display: none; }

.glossary-term summary {
    display: grid;
    gap: 2px;
    padding: var(--space-2) 28px var(--space-2) 0;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.glossary-term summary::-webkit-details-marker { display: none; }
.glossary-term summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.15s;
}
.glossary-term details[open] summary::after { transform: rotate(-135deg); top: 20px; }
.glossary-term:target summary .glossary-name { color: var(--brand-strong); }

.glossary-name { font-weight: 700; }
.glossary-short { color: var(--text-secondary); font-size: var(--font-size-sm); }

.glossary-more {
    display: grid;
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
}
.glossary-more p { margin: 0; }
.glossary-aka, .glossary-see, .glossary-games-of { color: var(--text-secondary); }
.glossary-more a { color: var(--brand-strong); }

/* Cards, inline, as the Library's bodies draw them (library.css, .prose-card; readout.css
   has the same): an explanation's [Ah Kd]. Suits are SVG, never the Unicode characters. */
.prose-cards { white-space: nowrap; }

.prose-card {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin: 0 1px;
    padding: 0 0.28em;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-face);
    font-family: var(--font-card);
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1.35;
    vertical-align: 0.06em;
    box-shadow: var(--shadow-sm);
}

.prose-card .suit-icon { width: 0.8em; height: 0.8em; }
.prose-card.suit-spade   { color: var(--suit-spade); }
.prose-card.suit-heart   { color: var(--suit-heart); }
.prose-card.suit-diamond { color: var(--suit-diamond); }
.prose-card.suit-club    { color: var(--suit-club); }

/* How to play (templates/rules/): the same column, read top to bottom. */
.rules-lede { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.rules-contents { margin: 0; padding-left: var(--space-5); display: grid; gap: 2px; font-size: var(--font-size-sm); }
.rules-contents a, .rules-body a, .rules-foot a, .rules-index a { color: var(--brand-strong); }
.rules-body { display: grid; gap: var(--space-2); line-height: 1.6; }
.rules-body h2 {
    margin: var(--space-4) 0 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: var(--font-size-xl);
    scroll-margin-top: 16px;
}
.rules-body h3 { margin: var(--space-2) 0 0; font-size: var(--font-size-md); font-weight: 700; }
.rules-body p, .rules-body ul, .rules-body ol { margin: 0; }
.rules-body ul, .rules-body ol { padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.rules-body .term-link { color: inherit; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; }
.rules-table-wrap { overflow-x: auto; }
.rules-body table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.rules-body th, .rules-body td { text-align: left; padding: 6px var(--space-2); border-top: 1px solid var(--border); vertical-align: top; }
.rules-body th { color: var(--text-muted); font-weight: 600; }
.rules-note {
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--brand);
    background: var(--brand-dim);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.rules-foot { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); }
.rules-index { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rules-index a {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    text-decoration: none;
}
.rules-index strong { color: var(--text-primary); }
.rules-index span { color: var(--text-secondary); font-size: var(--font-size-sm); }