.specialist-page .specialist-field { margin-block: 1rem; }
.specialist-page label { display: block; font-weight: 650; margin-block: .75rem .35rem; }
.specialist-page textarea,
.specialist-page input,
.specialist-page select { width: 100%; max-width: 100%; padding: .65rem; border: 1px solid var(--border, #778); border-radius: .4rem; background: var(--bg, #fff); color: var(--text, #172333); font: inherit; }
.specialist-page textarea { font-family: ui-monospace, monospace; letter-spacing: .06em; line-height: 1.6; resize: vertical; }
.specialist-page details { padding: .8rem 0; border-block-end: 1px solid var(--border, #ccd); }
.specialist-page summary { cursor: pointer; padding: .2rem; font-weight: 600; }
.specialist-page summary:focus-visible,
.specialist-page button:focus-visible,
.specialist-page input:focus-visible,
.specialist-page textarea:focus-visible { outline: 3px solid #3975d9; outline-offset: 3px; }
.specialist-hint { font-size: .9rem; line-height: 1.5; opacity: .85; }
.specialist-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: .7rem; }
.specialist-dimensions { display: flex; gap: 1rem; }
.specialist-dimensions > div { flex: 1; }
.specialist-board-preview { display: grid; grid-template-columns: repeat(var(--columns, 6), minmax(1.5rem, 1fr)); gap: .2rem; max-width: 25rem; margin-block: .6rem; }
.specialist-board-preview span { aspect-ratio: 1; display: grid; place-content: center; border: 1px solid var(--border, #bcc); border-radius: .2rem; font: 650 1rem ui-monospace, monospace; }
.specialist-board-preview span[data-empty] { opacity: .5; }
.specialist-path { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding-inline-start: 1.5rem; font-family: ui-monospace, monospace; line-height: 1.8; }
.specialist-answer { font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }
.specialist-solution-grid { border-collapse: collapse; margin-block: .75rem; }
.specialist-solution-grid td { border: 1px solid var(--border, #bcc); padding: .6rem .85rem; text-align: center; }
@media (max-width: 600px) { .specialist-page .game-solver-layout { grid-template-columns: 1fr; } .specialist-page textarea { font-size: 16px; } }
.game-rule-illustration {
  max-width: 700px;
  margin: 2rem auto;
}
.game-rule-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}
.game-rule-illustration figcaption {
  margin-top: .75rem;
  font-size: .9rem;
}
.specialist-actions[hidden] { display: none; }