/* Layout groups stay open; games own pieces, artwork and action styling.
   Load before game CSS. Add ui-layout to the game root for shared spacing. */
.ui-layout {
  --ui-space-small: 4px;
  --ui-space-related: 8px;
  --ui-space-region: 16px;
  --ui-surface-padding: 12px;
  --ui-heading-color: var(--muted, #b6c6c6);
  --ui-divider-color: var(--border, #51666b);
  --ui-surface-background: var(--surface, #182c33);
}
.ui-layout :where(.ui-stack, .ui-section-body) {
  display: flex; flex-direction: column; gap: var(--ui-space-related);
}
.ui-layout :where(.ui-row) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-related);
}
.ui-section {
  min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.ui-section-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-related, 8px);
  margin: 0 0 var(--ui-space-related, 8px);
  color: var(--ui-heading-color, var(--muted, #b6c6c6));
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4;
}
.ui-section-title[hidden] { display: none; }
.ui-surface {
  padding: var(--ui-surface-padding, 12px);
  background: var(--ui-surface-background, var(--surface, #182c33));
}
.ui-divider {
  padding-top: var(--ui-space-region, 16px);
  border-top: 1px solid var(--ui-divider-color, var(--border, #51666b));
}