/* ADDED v2026-05-28.4750
   Player-facing unified surface bridge.

   Purpose:
   - Keep player pages on one plain visual contract.
   - Preserve table readability and allow horizontal table scrolling when content
     is wider than the parent container.
   - Move player-facing layout ownership into the player theme instead of mixed.css.
*/

body.app-player,
body.player-surface {
  --app-page-max-width: var(--player-page-max-width, 980px);
  --app-page-pad-inline: var(--player-page-pad-inline, clamp(0.75rem, 2.4vw, 1.4rem));
  --app-page-pad-block: var(--player-page-pad-block, clamp(0.65rem, 1.8vw, 1.15rem));
  --app-gap-xs: var(--player-gap-xs, 0.25rem);
  --app-gap-sm: var(--player-gap-sm, 0.45rem);
  --app-gap-md: var(--player-gap-md, 0.75rem);
  --app-gap-lg: var(--player-gap-lg, 1rem);
  --app-radius-sm: var(--player-radius-sm, 0.45rem);
  --app-radius-md: var(--player-radius-md, 0.7rem);
  --app-radius-lg: var(--player-radius-lg, 1rem);
  --app-border: var(--player-border, #d0d7de);
  --app-border-soft: var(--player-border-soft, #e5e7eb);
  --app-bg: var(--player-bg, #f6f8fa);
  --app-surface: var(--player-surface, #fff);
  --app-surface-muted: var(--player-surface-muted, #f8fafc);
  --app-text: var(--player-text, #111827);
  --app-muted: var(--player-muted, #4b5563);
  --app-link: var(--player-link, #0645d9);
  background: var(--app-bg);
  color: var(--app-text);
  overflow-x: hidden;
}

body.app-player .mainbody,
body.player-surface .mainbody {
  box-sizing: border-box;
  width: min(100%, var(--app-page-max-width));
  margin-inline: auto;
  padding: var(--app-page-pad-block) var(--app-page-pad-inline);
}

body.app-player :where(.player-page-container, .player-normalized-page, .player-card, .player-panel, .ui-player-card, .ui-player-section, details.player-details-card),
body.player-surface :where(.player-page-container, .player-normalized-page, .player-card, .player-panel, .ui-player-card, .ui-player-section, details.player-details-card) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

body.app-player :where(.table-container, .stats-table-container, .matches-pool-table-wrap, .ui-table-container, .ui-player-table-wrap, .component-player-table-scroll, .component-player-scroll-x, .component-player-report-scroll, .ui-table-scroll, .table-scroll, .scroll-x),
body.player-surface :where(.table-container, .stats-table-container, .matches-pool-table-wrap, .ui-table-container, .ui-player-table-wrap, .component-player-table-scroll, .component-player-scroll-x, .component-player-report-scroll, .ui-table-scroll, .table-scroll, .scroll-x) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

body.app-player :where(table, .ui-responsive-data-table),
body.player-surface :where(table, .ui-responsive-data-table) {
  border-collapse: collapse;
  table-layout: auto;
}

body.app-player :where(th, td),
body.player-surface :where(th, td) {
  vertical-align: top;
}

body.app-player :where(input, select, textarea, button),
body.player-surface :where(input, select, textarea, button) {
  box-sizing: border-box;
  max-width: 100%;
}