/* Mobile games follow the document flow so answers and navigation remain reachable. */
@media (max-width: 720px) {
  .ng[data-ng="board"], .is-course-embed .ng[data-ng="board"], .isg, .iag, .nn {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .ng[data-ng="board"] [data-ng="work"], .isg .isg-work, .iag .iag-work, .nn .nn-work {
    flex: none;
    min-width: 0;
    overflow: visible;
  }
  .isg .isg-panel, .iag .iag-panel { height: auto; }
  .ng[data-ng="board"] .ng-paper {
    height: auto;
    min-height: 240px;
    max-height: none;
    overflow: auto;
  }
  .ng[data-kind="story"] .ng-paper { min-height: 305px; }
  .ng .ng-toolbar, .nn .nn-toolbar {
    flex-wrap: wrap;
    overflow: visible;
  }
  .ng .ng-toolbar > *, .nn .nn-toolbar > * { max-width: 100%; }
  .ng .ng-actions, .isg .isg-actions, .iag .iag-actions, .nn .nn-actions { padding-bottom: 4px; }
  .ng .ng-actions button, .ng .ng-bank button,
  .isg .isg-actions button, .iag .iag-actions button, .nn .nn-actions button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }
  /* Keep each place label readable; long numbers scroll inside the paper. */
  .ng[data-kind="labels"][data-mode="practice"] .ng-label-grid {
    --ng-digit-w: 68px;
    width: max-content;
    max-width: none;
    justify-content: flex-start;
  }
  .ng[data-kind="labels"][data-mode="practice"] .ng-digit button {
    font-size: 12px;
    min-height: 56px;
  }
  .nn .nn-input-wrap { flex-wrap: wrap; }
  .nn .nn-input-wrap > * { max-width: 100%; }
  .nn .nn-paper, .nn .nn-scene { overflow: visible; }
  .nn .nn-admin-scrub { flex-wrap: wrap; }
}

/* Repeat / skip use compact icons on phones; desktop keeps the text labels. */
@media (max-width: 720px) {
  :is(.ng-toolbar, .isg-toolbar, .iag-toolbar, .nn-toolbar)
  :is([data-action="repeat"], [data-action="skip"], [data-isg="repeatBtn"], [data-isg="skipBtn"], [data-iag="repeatBtn"], [data-iag="skipBtn"], [data-el="repeat"], [data-el="skip"]) {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }
  :is(.isg-toolbar [data-isg="repeatBtn"], .isg-toolbar [data-isg="skipBtn"]) > span { display: none; }
  :is(.ng-toolbar, .isg-toolbar, .iag-toolbar, .nn-toolbar)
  :is([data-action="repeat"], [data-action="skip"], [data-isg="repeatBtn"], [data-isg="skipBtn"], [data-iag="repeatBtn"], [data-iag="skipBtn"], [data-el="repeat"], [data-el="skip"])::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background: currentColor;
    mask: var(--lesson-control-icon) center / contain no-repeat;
  }
  :is([data-action="repeat"], [data-isg="repeatBtn"], [data-iag="repeatBtn"], [data-el="repeat"]) {
    --lesson-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11a9 9 0 1 1 2 7M3 4v7h7'/%3E%3C/svg%3E");
  }
  :is([data-action="skip"], [data-isg="skipBtn"], [data-iag="skipBtn"], [data-el="skip"]) {
    --lesson-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 4 11 8-11 8zM20 4v16'/%3E%3C/svg%3E");
  }
}