.canvas-section-surface {
  --section-gap: var(--canvas-spacing-sm);
  --section-padding: var(--canvas-spacing-md);
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: 0;
}

.canvas-section-scroll {
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: 0;
  max-block-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: var(--canvas-control-standard) calc(var(--canvas-control-standard) + var(--keyboard-inset));
  -webkit-overflow-scrolling: touch;
}

.canvas-section-surface :is(button, input, select, textarea, [role="button"]) { min-block-size: 44px; }
.canvas-section-surface :is(h1, h2, h3, h4, p, strong, b, span, small, label, dt, dd, li, button, input, select, textarea) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.canvas-section-surface :is(p, strong, b, label, dt, dd, li, button, input, select, textarea) { font-size: max(var(--canvas-typography-main), 15px); }
.canvas-section-surface :is(small, .field-label, [class*="kicker"], [class*="status"], [class*="badge"], [class*="meta"]) { font-size: max(var(--canvas-typography-auxiliary), 10px); }
.canvas-section-surface :is(h2, h3) { font-size: var(--canvas-typography-title); }

.canvas-section-surface .profile-dialog {
  inline-size: min(100%, var(--canvas-panel-wide));
  padding: var(--section-padding);
  border-radius: var(--canvas-radius-lg);
}
.canvas-section-surface :is(.arena-panel-heading, .reward-section-heading, .rings-heading, .section-panel-heading) {
  gap: var(--section-gap);
  min-inline-size: 0;
}
.canvas-section-surface :is(.arena-list, .login-calendar, .reward-inbox, .daily-tasks, .shop-offers, .chest-slots, .rings-grid, .rings-collections, .season-track, .friends-list, .clubs-list, .leaderboard-list) {
  gap: var(--section-gap);
  min-inline-size: 0;
}
.canvas-section-surface :is(.arena-card, .reward-inbox-item, .daily-task-card, .shop-offer, .chest-slot, .ring-card, .season-tier, .friend-card, .club-card, .leaderboard-row) {
  min-inline-size: 0;
  border-radius: var(--canvas-radius-md);
}

#friends-tab-panel.canvas-section-surface,
#clubs-tab-panel.canvas-section-surface {
  min-block-size: 100%;
  padding: var(--section-padding) var(--canvas-spacing-xs) var(--canvas-spacing-lg);
}
#friends-tab-panel.canvas-section-surface {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#friends-tab-panel > .section-panel-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
#friends-tab-panel > .canvas-section-content {
  flex: 1 1 auto;
  min-block-size: 0;
  padding-block-start: var(--canvas-spacing-sm);
}
#friends-tab-panel > .canvas-section-content > #friends-content {
  block-size: auto;
  min-block-size: 100%;
  display: block;
}
#friends-tab-panel #friends-list-view {
  display: block;
}
#friends-tab-panel .friends-list {
  overflow: visible;
}
#events-tab-panel {
  block-size: 100%;
  padding: var(--section-padding) var(--canvas-spacing-xs) var(--canvas-spacing-lg);
  overflow: hidden;
}
#events-tab-panel > .events-screen {
  position: static;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#events-tab-panel .events-screen > .section-panel-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
#events-tab-panel .events-screen > .canvas-section-content {
  flex: 1 1 auto;
  min-block-size: 0;
  padding-block-start: var(--canvas-spacing-sm);
}
#events-tab-panel #events-close {
  position: static;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
}
#events-tab-panel :is(#events-content, #events-locked-view) {
  position: static;
  min-block-size: 100%;
  padding: 0;
  overflow: visible;
}
#rings-modal .rings-scroll { max-block-size: none; overflow: visible; }
#leaderboard-tab-panel .leaderboard-list,
#trophy-road-modal .profile-trophy-road { overflow-wrap: anywhere; }

html[data-canvas-compact-height="true"] .canvas-section-surface {
  --section-gap: var(--canvas-spacing-xs);
  --section-padding: var(--canvas-spacing-sm);
}