body.canvas-modal-open { overflow: hidden; overscroll-behavior: none; touch-action: none; }
body.canvas-modal-open :is(input, textarea, select, button, a, [role="button"]) { touch-action: manipulation; }

:root body .context-help-button {
  box-sizing: border-box;
  flex: 0 0 44px;
  align-self: center;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  max-inline-size: 44px;
  max-block-size: 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  white-space: nowrap;
}

[role="dialog"][aria-modal="true"].canvas-modal-overlay {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  max-block-size: none;
  margin: 0;
  padding:
    max(var(--canvas-spacing-sm), var(--canvas-safe-top))
    max(var(--canvas-spacing-sm), var(--canvas-safe-right))
    max(var(--canvas-spacing-sm), var(--canvas-safe-bottom))
    max(var(--canvas-spacing-sm), var(--canvas-safe-left));
  overflow: hidden;
  place-items: center;
  translate: none;
}

.canvas-modal-overlay > .canvas-modal-dialog {
  position: relative;
  box-sizing: border-box;
  inline-size: min(100%, var(--canvas-panel-wide));
  block-size: auto;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.canvas-modal-dialog > .canvas-modal-header {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  min-block-size: var(--canvas-control-standard);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--canvas-spacing-sm);
  margin: 0;
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
}
.canvas-modal-dialog > .canvas-modal-header > :first-child:not(.canvas-modal-title):not(.canvas-modal-close) {
  min-inline-size: 0;
}
.canvas-modal-dialog > .canvas-modal-header .canvas-modal-title {
  min-inline-size: 0;
  margin: 0;
  font-size: var(--canvas-typography-title);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.canvas-modal-dialog > .canvas-modal-header .canvas-modal-close {
  position: static;
  inset: auto;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  margin: 0;
  translate: none;
}
.canvas-modal-dialog > .canvas-modal-content {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: var(--canvas-spacing-sm) calc(var(--canvas-control-standard) + var(--canvas-spacing-sm) + var(--keyboard-inset));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.canvas-modal-dialog > .canvas-modal-toolbar {
  flex: 0 0 auto;
  min-inline-size: 0;
}
#shop-modal .shop-dialog {
  block-size: min(100%, 860px);
}
#leaderboard-tab-panel .leaderboard-list {
  overflow: visible;
}
#shop-modal .shop-toolbar {
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-xs);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
#shop-modal .shop-toolbar .shop-balances {
  margin: var(--canvas-spacing-xs) 0;
}
#shop-modal .shop-toolbar .inventory-tabs {
  position: static;
  padding: 0;
  background: transparent;
}
#arena-panel .arena-toolbar {
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
#arena-panel .arena-dialog {
  block-size: min(100%, 860px);
}
#profile-avatar-shop .profile-avatar-picker-card {
  block-size: min(820px, calc(var(--app-viewport-height) - 36px));
}
#arena-panel .arena-toolbar .arena-panel-copy {
  margin-block: var(--canvas-spacing-xs);
}
#arena-panel .arena-list {
  overflow: visible;
  touch-action: auto;
}
.canvas-modal-dialog .canvas-modal-content > .canvas-modal-actions { position: sticky; inset-block-end: 0; z-index: 8; background: inherit; }
.canvas-modal-dialog :is(button, a, input, select, textarea, [role="button"]) { min-block-size: 44px; }
.canvas-modal-dialog :is(h1, h2, h3, h4, p, strong, b, span, small, label, li, button, a) { max-inline-size: 100%; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.canvas-modal-dialog :is(input, textarea, select, button, a, [tabindex]):focus-visible { outline: 3px solid var(--cyan, #78efff); outline-offset: 3px; scroll-margin-block: calc(var(--canvas-control-standard) + var(--canvas-spacing-md)); }

body.is-keyboard-open .canvas-modal-overlay { place-items: stretch center; padding-block: max(var(--canvas-spacing-xs), var(--canvas-safe-top)) max(var(--canvas-spacing-xs), var(--canvas-safe-bottom)); }
body.is-keyboard-open .canvas-modal-overlay > .canvas-modal-dialog { block-size: 100%; max-block-size: 100%; }

@media (max-width: 420px), (max-height: 680px) {
  [role="dialog"][aria-modal="true"].canvas-modal-overlay { padding: max(var(--canvas-spacing-xs), var(--canvas-safe-top)) max(var(--canvas-spacing-xs), var(--canvas-safe-right)) max(var(--canvas-spacing-xs), var(--canvas-safe-bottom)) max(var(--canvas-spacing-xs), var(--canvas-safe-left)); }
}