/* Keep narrow portrait statistics clear of Close / Fullscreen / Sound. */
@media (max-width: 899px) and (orientation: portrait) {
  .np-shell[data-play-mode='on'] {
    grid-template-rows: auto auto auto auto minmax(min-content, 1fr) auto;
    grid-template-areas: 'bar' 'stats' 'top' 'notices' 'board' 'controls';
  }
  .np-shell[data-play-mode='on'] .np-stats {
    grid-area: stats;
    margin-inline: 0;
    justify-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
}
/* Keyboard guidance occupies its own row, including narrow mouse windows. */
@media (hover: hover) and (pointer: fine) {
  .sd[data-play-mode='on'][data-phase='playing'] {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .sd[data-play-mode='on'][data-phase='playing'] .sd-keyhint {
    position: static;
    grid-row: 4;
    margin: 0;
    padding: 0 var(--space-4) var(--space-3);
    text-align: center;
  }
}
/* Text actions use their own rows; labels wrap only between words. */
.sk-color-action { grid-column: 1 / -1; flex-direction: row; gap: 6px; padding: 4px 8px; }
.sk-color-action span { overflow-wrap: normal; word-break: normal; }
@media (max-height: 520px) and (orientation: landscape) {
  .sk-color-action { grid-column: 1 / -1; }
}