.sign-checklist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; }
.sign-checklist .cuneiform, .sign-section h3 .cuneiform { font-size: 1.4em; }
/* Setup page glyphs: the @font-face rules come from cuneiform_font.css, whose own selectors
   cover only the play grid's .option-form. Without this, phones fall back to a system font. */
.sign-checklist .cuneiform, .sign-section h3 .cuneiform, .distractor-key {
  font-family: UllikummiA, UllikummiB, UllikummiC, sans-serif;
}
.sign-section { margin-bottom: 1.5em; }
.distractor-keys { display: flex; flex-wrap: wrap; gap: 0.3em; margin-bottom: 0.5em; }
.distractor-key {
  position: relative; font-size: 1.4em; min-width: 2.2em; min-height: 2.2em;
  padding: 0.2em 0.4em; background: var(--surface); border: 1px solid var(--control-line); border-radius: 4px;
}
.distractor-key[aria-pressed="true"] { border: 3px solid var(--focus); }
.distractor-key[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: 0; right: 0.15em; font-size: 0.5em; color: var(--focus);
}
.distractor-key:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Play page: one section per word. Mirrors grid.html's #grid rules for the class-based tables. */
.own-grid-item { margin-bottom: 2em; }
.own-grid-item:focus:not(:focus-visible) { outline: none; }
.own-grid-prompt { font-size: 1.3em; margin-bottom: 0.1em; }
.grid-table th.column-header { font-size: 1.15em; padding-bottom: 0.6em; }
.grid-table th.column-header .syllabic, .grid-table .option-label.syllabic { font-style: italic; }
/* Wrapping rows so a 320px screen never scrolls sideways (WCAG 1.4.10). */
.own-grid-controls, .own-grid-page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
@media (max-width: 700px) {
  .grid-scroll { max-width: 100%; overflow-x: auto; }
  .grid-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}