/* Compact open canvas: useful adjacent tasks, with the same phone/desktop
   primitives and one navigation tree. Collection space stays with the games. */
@media (min-width: 900px) and (max-width: 1023px) and (max-height: 720px) {
  .play-wide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .play-now-pane, .play-decide-pane { min-width: 0; }
  .play-pane-title { display: flex; }
  .play-wide-history { margin-top: var(--space-5); }
  .play-wide-grid .ph-duo { gap: var(--space-2); }
  .play-wide-grid .shead h2 { font-size: 20px; }
  .ds-shelf-main { min-width: 0; }
  .ds-shelf-main > .shelf-filterctl[hidden] { display: none; }
  .ds-shelf-main > #lib-grid .grid, .ds-libcol #dc-grid .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); }
  .crew-library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .crew-library-toolbar .shelf-search.lib-search-inline { width: 100%; }
  .crew-library-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .gd-modal .rating-reactions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A native reserved region can narrow an inspector on a larger canvas too.
   Size the opinion labels from their actual dialog, keeping each readable. */
html[data-duo-reserved="true"] #modal-root .gd-modal { container: duo-game-detail / inline-size; }
@container duo-game-detail (max-width: 500px) {
  .rating-reactions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}