.word-map [hidden] { display: none; }
.word-map-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #181818;
  overflow: hidden;
}
.word-map-viewport canvas { display: block; cursor: grab; }
.word-map-viewport canvas:active { cursor: grabbing; }
.word-map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.word-map button {
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--accent-text);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.word-map button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.word-map button:disabled { cursor: wait; }
.word-map [data-word-map-start] { margin-top: 1rem; }
.word-map-status:empty { display: none; }
.word-map .word-map-status { color: var(--ink); font-size: .9rem; }
.word-map figcaption { margin-top: 1rem; }
.word-map figcaption p { margin: 0; }