9. Level Scene: Bottom Panel in Portrait, Left Panel in Landscape

The gameplay scene is the most important part.

In LevelPanelComponent, the panel uses:

• portrait: full width and 33% height;
• landscape: 33% width and full height.

const panelHeight = orientation === 'port'
  ? Math.max(1, Math.round(screen.height * LevelPanelLayoutMetrics.PANEL_HEIGHT_RATIO))
  : Math.max(1, Math.round(screen.height));

const panelWidth = orientation === 'port'
  ? Math.max(1, Math.round(screen.width))
  : Math.max(1, Math.round(screen.width * LevelPanelLayoutMetrics.PANEL_WIDTH_RATIO));

This is not only responsive. It changes the layout model.

Why:

• on mobile portrait, a bottom album panel is easier to read and tap around;
• on desktop and wide landscape, a left vertical panel uses screen width better;
• the playfield gets more useful space;
• the album preview stays large enough.

Metrics are stored separately:

export class LevelPanelLayoutMetrics {
  static readonly PANEL_HEIGHT_RATIO = 0.33;
  static readonly PANEL_WIDTH_RATIO = 0.33;
  static readonly ARTWORK_HEIGHT_RATIO = 0.9;
  static readonly ARTWORK_WIDTH_RATIO = 0.9;
}

This makes UX proportions easy to tune.

10. Artwork Inside the Panel Has Its Own Rules

LevelPanelArtworkComponent fits the album artwork inside the panel.

In portrait, size depends on panel height:

const artworkWidth = orientation === 'port'
  ? Math.max(
      1,
      Math.round(textureWidth * ((panelHeight * LevelPanelLayoutMetrics.ARTWORK_HEIGHT_RATIO) / textureHeight)),
    )
  : Math.max(1, Math.round(panelWidth * LevelPanelLayoutMetrics.ARTWORK_WIDTH_RATIO));

In landscape, size depends on panel width.

This is why “just scale by screen width” is not enough. The artwork lives inside a UI container, and that container changes shape.