/* Mobile result screens: scroll results independently from the action rail. */
[data-result-content] { min-width: 0; }
.board-note:has(#boardNote:empty) { display: none; }
#resultDialog [data-result-content] > p:not(.kicker) { font-size: 12px; color: var(--muted); line-height: 1.8; }
#resultModal [data-result-actions] > button { width: 100%; }
[data-result-actions] [role="status"] { font-size: 12px; line-height: 1.5; }
@media (pointer: coarse), (max-width: 920px) {
  [data-result-shell] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(140px, 24%, 210px);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    width: 100%; height: 100%; max-width: none; max-height: none;
    min-height: 0; padding: 12px; overflow: hidden; box-sizing: border-box;
  }
  [data-result-content] { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
  [data-result-actions] {
    display: flex; flex-direction: column; align-items: stretch;
    align-self: stretch; justify-content: flex-start; gap: 8px;
    min-width: 0; min-height: 0; margin: 0; padding: 0;
    overflow: auto; overscroll-behavior: contain;
  }
  [data-result-actions] button {
    flex: 0 0 auto; width: 100%; min-height: 44px; margin: 0;
    padding: 8px; font-size: 12px; line-height: 1.4; white-space: normal;
  }
  /* Fit both games' complete action list into the available landscape height. */
  #winModal [data-result-actions], #resultDialog [data-result-actions] {
    height: 100%; box-sizing: border-box; gap: 6px; overflow: hidden;
  }
  #winModal [data-result-actions] > button,
  #resultDialog [data-result-actions] > button {
    flex: 1 1 0; min-height: 0; max-height: 56px;
    box-sizing: border-box; padding: 4px 6px;
    font-size: clamp(10px, 3.4vmin, 13px); line-height: 1.2;
    letter-spacing: normal;
  }
  #winModal [data-result-actions] [role="status"],
  #resultDialog [data-result-actions] [role="status"] {
    flex: 0 1 auto; min-height: 0; margin: 0;
    font-size: 10px; line-height: 1.2;
  }
  #winModal, #resultModal { padding: 8px; }
  #winModal > [data-result-shell], #resultModal > [data-result-shell] {
    width: 100%; height: 100%; max-height: none; overflow: hidden;
  }
  #resultDialog[open] {
    width: calc(100dvw - 16px); height: calc(100dvh - 16px);
    max-width: none; max-height: none; padding: 0; overflow: hidden;
  }
  #resultDialog > [data-result-shell] { padding: 12px; }
  #result:not(.hidden)[data-result-shell] {
    position: fixed; inset: 0; z-index: 20;
    width: 100dvw; height: 100dvh; background: var(--page);
  }
  body:has(#result:not(.hidden)[data-result-shell]) { overflow: hidden; }
  #result [data-result-actions].panel { background: transparent; border: 0; box-shadow: none; }
  [data-result-content] .stats-comparison { overflow: visible; max-height: none; }
  [data-result-content] h2, [data-result-content] .resultTitle { margin: 4px 0 10px; font-size: 24px; }
  #resultDialog [data-result-content] table { width: 100%; }
  #resultModal [data-result-content] .result-stats { margin: 10px 0; padding: 10px; }
}
@media (orientation: portrait) and (max-width: 920px), (orientation: portrait) and (pointer: coarse) {
  /* 01 and PRO TEST already rotate their viewport. Cricket uses a top-layer
     dialog; COUNT-UP has a standalone result section, so rotate those here. */
  body:not(:has(#setupDialog[open])) #resultDialog[open] {
    position: fixed; inset: auto; top: 50%; left: 50%; margin: 0;
    width: calc(100dvh - 16px); height: calc(100dvw - 16px);
    max-width: none; max-height: none; transform: translate(-50%, -50%) rotate(90deg);
  }
  #result:not(.hidden)[data-result-shell] {
    inset: auto; top: 50%; left: 50%; width: 100dvh; height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}