/* Kotoba's own: the set-up, the board, the keys, and the API reference. Everything shared is in family.css, loaded before this. */
:root { --intro-room: 11.5rem; --intro-room-wide: 6.5rem; }

.setup { display: grid; gap: 10px; margin-bottom: 14px; }
.setup .fam-row { gap: 8px 14px; }
.fam-seg button { min-width: 44px; }

.game { display: grid; padding: 14px; justify-items: center; }
#board { width: 100%; display: grid; justify-items: center; }
/* The game sits on the page's cloth. */
.game .kt-root { padding: 0; }

.credits p { max-width: 72ch; line-height: 1.55; }

/* The API reference: one page, a section for each entry point. */
.api-contents ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 12px; font-size: .9rem; }
.api-contents li a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.api-contents p { margin: 0 0 4px; }
.api-entry { margin-top: 28px; min-width: 0; }
.api-entry h2 { font-size: 1.15rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.api-names { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 12px; font-size: .85rem; }
.api-names a { font-family: var(--mono); display: inline-flex; align-items: center; min-height: 32px; }
.api-entry article { border-top: 1px solid var(--rule); padding: 12px 0; display: grid; gap: 8px; min-width: 0; }
.api-entry article > * { min-width: 0; max-width: 100%; }
.api-entry h3 { margin: 0; font-size: 1rem; font-family: var(--mono); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.api-entry h3 .fam-badge { font-family: var(--font); font-weight: 600; }
.api-entry p { margin: 0; line-height: 1.5; max-width: 72ch; overflow-wrap: anywhere; }
.api-entry p.api-names { max-width: none; }
.api-entry pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Using it: the code that puts the game above on a page. */
.more { display: grid; gap: 10px; margin-top: 24px; min-width: 0; }
.more > * { min-width: 0; max-width: 100%; }
.more h2, .more h3 { margin: 0; }
.more h3 { font-size: .95rem; }
.more p { margin: 0; max-width: 72ch; line-height: 1.55; color: var(--muted); }
.snippet { white-space: pre; }
.more .fam-row { gap: 8px 14px; }
.credits p + p { margin-top: 6px; }

/* Keep navigation width stable across languages. */
header nav a[data-say="pageDocs"] { inline-size: 8rem; justify-content: center; flex: none; }