.canvas-hub-shell {
  --canvas-shell-inline-padding: var(--canvas-spacing-md);
  position: relative;
  inset: auto;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  margin-inline: auto;
  padding: 0;
  border-radius: var(--canvas-radius-lg) var(--canvas-radius-lg) 0 0;
  grid-template-rows: minmax(0, 1fr);
}

.canvas-hub-scroll {
  grid-row: 1;
  block-size: auto;
  max-block-size: none;
  padding: var(--canvas-spacing-md) var(--canvas-spacing-xs) var(--canvas-spacing-lg);
  display: grid;
  align-content: start;
  gap: var(--canvas-spacing-sm);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-padding-block:
    var(--canvas-control-standard)
    calc(var(--canvas-control-standard) + var(--keyboard-inset));
}

.canvas-hub-scroll .context-help-button {
  flex-basis: 44px;
  inline-size: 44px;
  min-inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
}

.canvas-hub-navigation {
  grid-row: 3;
  order: 0;
  margin: 0;
  padding:
    var(--canvas-spacing-xs)
    var(--canvas-spacing-xs)
    max(var(--canvas-spacing-sm), var(--canvas-safe-bottom));
  gap: var(--canvas-spacing-xs);
  background: rgba(5, 8, 48, .94);
}

.canvas-hub-navigation .menu-tab {
  min-block-size: var(--canvas-control-compact);
  padding: var(--canvas-spacing-xs);
  border-radius: var(--canvas-radius-sm);
  font-size: var(--canvas-typography-auxiliary);
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.canvas-hub-scroll :is(button, input, select, [role="button"]) {
  min-block-size: 44px;
}

.canvas-hub-scroll :is(.hub-heading h2, .hub-golden-circle-main strong) {
  font-size: var(--canvas-typography-title);
  overflow-wrap: anywhere;
}

.canvas-hub-scroll :is(.hub-kicker, small, .field-label, .player-account-status) {
  font-size: var(--canvas-typography-auxiliary);
  overflow-wrap: anywhere;
  white-space: normal;
}

.canvas-hub-scroll :is(input, select, button, strong, p) {
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.canvas-hub-scroll .anonymous-player-field {
  scroll-margin-block: calc(var(--canvas-control-standard) + var(--canvas-spacing-lg));
}

.canvas-hub-scroll #player-name {
  min-block-size: var(--canvas-control-standard);
  font-size: var(--canvas-typography-main);
}

.canvas-hub-scroll .hub-progress-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr));
  gap: var(--canvas-spacing-xs);
}

.canvas-hub-scroll .hub-progress-grid button {
  min-block-size: max(76px, var(--canvas-control-large));
  border-radius: var(--canvas-radius-md);
}

.canvas-hub-scroll .hub-progress-grid strong {
  font-size: var(--canvas-typography-auxiliary);
  white-space: normal;
}

.canvas-hub-scroll #start-button {
  min-block-size: var(--canvas-control-large);
  font-size: var(--canvas-typography-main);
}

.canvas-hub-shell .profile-modal {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
}

.canvas-hub-shell .profile-dialog {
  max-block-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-block-end: calc(var(--canvas-control-standard) + var(--keyboard-inset));
}

body.is-keyboard-open .canvas-hub-scroll {
  scroll-padding-block-end: calc(var(--canvas-control-standard) + var(--keyboard-inset));
}

body.is-keyboard-open .canvas-hub-shell .profile-modal {
  padding-block: var(--canvas-spacing-xs);
}

@media (max-width: 380px), (max-height: 680px) {
  .canvas-hub-scroll { padding: var(--canvas-spacing-sm) var(--canvas-spacing-xs); }
  .canvas-hub-scroll .hub-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}