.outperform-share-panel {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #497762;
  border-radius: 8px;
  background: #07110f;
  color: #dbeae3;
  font: calc(14px * var(--outperform-text-scale, 1))/1.45 ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
  box-shadow: 0 18px 80px #000b;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
}

.outperform-share-panel[open] { display: flex; flex-direction: column; }
/* Run setup: the build roster and its details sit side by side, so the panel takes more of a wide screen.
   It also keeps one size while choices change; the body scrolls instead of the panel resizing, and the
   reserved scrollbar gutter stops the content reflowing when a scrollbar appears. */
.outperform-share-panel.is-wide { width: min(1060px, calc(100vw - 24px)); height: min(820px, calc(100vh - 24px)); height: min(820px, calc(100dvh - 24px)); }
.outperform-share-panel.is-wide .outperform-share-body { flex: 1 1 auto; scrollbar-gutter: stable; padding-top: 14px; padding-bottom: 14px; }
.outperform-share-panel.is-wide .outperform-share-body > * + * { margin-top: 14px; }
.outperform-share-panel::backdrop { background: #000a07db; }
/* Docked: a lesson about the cards on screen sits under them, and the backdrop stays clear so the cards read above it. */
.outperform-share-panel.is-docked { margin: auto auto 12px; max-height: min(42vh, calc(100dvh - 24px)); }
.outperform-share-panel.is-docked::backdrop { background: transparent; }
/* Lessons (model.lesson): 16px body and 14px subtitle; the reference panels keep their compact 12px help text. */
.outperform-share-panel.is-lesson .outperform-share-help { font-size: calc(16px * var(--outperform-text-scale, 1)); line-height: 1.4; }
.outperform-share-panel.is-lesson .outperform-share-subtitle { font-size: calc(14px * var(--outperform-text-scale, 1)); }
.outperform-share-panel *, .outperform-share-panel *::before, .outperform-share-panel *::after { box-sizing: border-box; }
.outperform-share-panel [hidden] { display: none !important; }
.outperform-share-panel button, .outperform-share-panel input, .outperform-share-panel select, .outperform-share-panel textarea { font: inherit; }
.outperform-share-panel p { margin: 0; }

.outperform-share-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-shrink: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #284439;
}
.outperform-share-heading-block { flex: 1; min-width: 0; }
.outperform-share-title { margin: 0; color: #6cf4b0; font-size: calc(22px * var(--outperform-text-scale, 1)); line-height: 1.2; overflow-wrap: anywhere; }
.outperform-share-title:focus { outline: none; }
.outperform-share-subtitle { padding-top: 8px; color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); overflow-wrap: anywhere; }
.outperform-share-close { flex-shrink: 0; }

.outperform-share-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 18px 20px;
  scrollbar-color: #497762 #10231b;
}
.outperform-share-body > * + * { margin-top: 18px; }
.outperform-share-notice, .outperform-share-status { color: #e8d985; overflow-wrap: anywhere; white-space: pre-wrap; }
.outperform-share-notice {
  flex-shrink: 0;
  max-height: 25vh;
  overflow: auto;
  padding: 10px 20px;
  border-bottom: 1px solid #284439;
}
.outperform-share-status:empty { display: none; }
.outperform-share-inputs { display: grid; gap: 14px; }
.outperform-share-input-row { display: grid; gap: 6px; }
.outperform-share-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.outperform-share-gallery-item { display: grid; justify-items: center; gap: 4px; padding: 6px 4px 7px; border: 1px solid #284439; border-radius: 4px; background: #0b1714; color: #e2eee8; font: inherit; font-size: calc(11px * var(--outperform-text-scale, 1)); cursor: pointer; }
.outperform-share-gallery-item:hover:not(:disabled) { border-color: #4f8a72; }
.outperform-share-gallery-item.is-selected { border-color: #6cf4b0; background: #12291f; box-shadow: inset 0 0 0 1px #6cf4b0; }
.outperform-share-gallery-item:disabled { cursor: default; color: #6e8479; }
.outperform-share-gallery-item:disabled .outperform-share-gallery-icon { opacity: .35; filter: grayscale(1); }
.outperform-share-gallery-icon { width: 100%; max-width: 88px; aspect-ratio: 11 / 8; border-radius: 3px; image-rendering: auto; }
.outperform-share-gallery-label { text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.outperform-share-gallery-note { color: #8aa197; font-size: calc(10px * var(--outperform-text-scale, 1)); }
/* Only the Run setup starting-build cards opt in; arena and other galleries keep their layout. */
.outperform-share-builds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.outperform-share-builds .outperform-share-gallery-item { min-width: 0; grid-template-rows: auto 1fr auto; justify-items: stretch; align-content: start; gap: 10px; padding: 11px; text-align: left; font-size: calc(12px * var(--outperform-text-scale, 1)); }
.outperform-share-build-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.outperform-share-builds .outperform-share-gallery-icon { width: 44px; max-width: none; flex: 0 0 44px; }
.outperform-share-build-names { display: grid; gap: 4px; min-width: 0; }
.outperform-share-builds .outperform-share-gallery-label { text-align: left; font-weight: 600; font-size: calc(13px * var(--outperform-text-scale, 1)); }
.outperform-share-builds .outperform-share-gallery-note { font-size: calc(11px * var(--outperform-text-scale, 1)); overflow-wrap: anywhere; }
.outperform-share-build-attack { line-height: 1.45; overflow-wrap: anywhere; }
.outperform-share-build-stats { display: grid; gap: 3px; border-top: 1px solid #284439; padding-top: 8px; color: #b0c3b9; font-size: calc(11px * var(--outperform-text-scale, 1)); overflow-wrap: anywhere; }
.outperform-share-build-stats > :first-child { color: #e2eee8; font-weight: 600; }
.outperform-share-build-status { color: #e8d985; font-size: calc(11px * var(--outperform-text-scale, 1)); }
.outperform-share-builds .outperform-share-gallery-item:disabled { color: #b0c3b9; }
@media (max-width: 640px) { .outperform-share-builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .outperform-share-builds { grid-template-columns: minmax(0, 1fr); } }
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-builds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.outperform-share-label { color: #dbeae3; font-weight: 600; overflow-wrap: anywhere; }
.outperform-share-input-description { color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); white-space: pre-line; overflow-wrap: anywhere; }
.outperform-share-input, .outperform-share-payload {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #608471;
  border-radius: 3px;
  padding: 9px 10px;
  color: #edf8f2;
  background: #10231b;
  -webkit-user-select: text;
  user-select: text;
}
.outperform-share-check-row { grid-template-columns: 22px minmax(0, 1fr); align-items: center; min-height: 40px; }
.outperform-share-input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: #6cf4b0; }
.outperform-share-input[type="range"] { padding: 0; accent-color: #6cf4b0; }
.outperform-share-range-value { color: #6cf4b0; }
.outperform-share-payload { margin-top: 8px; min-height: 108px; max-height: 260px; resize: vertical; overflow-wrap: anywhere; font-size: calc(12px * var(--outperform-text-scale, 1)) !important; }
.outperform-share-help { padding-top: 8px; font-size: calc(12px * var(--outperform-text-scale, 1)); color: #b0c3b9; }
.outperform-share-payload-summary { padding: 12px; margin-bottom: 10px !important; border: 1px solid #497762; border-radius: 3px; color: #b0c3b9; overflow-wrap: anywhere; }
.outperform-share-help { display: grid; gap: 10px; }
.outperform-share-help-toggle { justify-self: start; padding: 6px 12px; border: 1px solid #284439; border-radius: 4px; background: transparent; color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); cursor: pointer; }
.outperform-share-help-toggle::before { content: '▸ '; }
.outperform-share-help-toggle.outperform-share-help-open::before { content: '▾ '; }
.outperform-share-help-toggle:hover, .outperform-share-help-toggle:focus-visible { color: #6cf4b0; border-color: #6cf4b0; outline: none; }
.outperform-share-details { display: grid; grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr); gap: 8px 18px; margin-bottom: 0; }
.outperform-share-details dt { color: #b0c3b9; overflow-wrap: anywhere; }
.outperform-share-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.outperform-share-entries { display: grid; gap: 8px; padding: 0; list-style: none; }
.outperform-share-highlights { display: grid; gap: 12px; margin: 0; }
.outperform-share-highlight { padding: 12px 14px; border-left: 3px solid #6cf4b0; background: #10231b; }
.outperform-share-highlight dt { color: #b0c3b9; font-size: .85em; margin-bottom: 5px; }
.outperform-share-highlight dd { margin: 0; color: #edf8f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.outperform-share-highlight:first-child dd { font-size: 1.12em; }
.outperform-share-advanced { display: grid; gap: 12px; }
.outperform-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A row of short entries side by side, wrapping on narrow screens. */
.outperform-share-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.outperform-share-group { grid-column: 1 / -1; margin-top: 10px; }
.outperform-share-group h3 { margin: 0 0 4px; font-size: 1em; color: #edf8f2; }
.outperform-share-entry { min-width: 0; }
.outperform-share-grid .outperform-share-entry-button, .outperform-share-row :is(.outperform-share-entry-button, .outperform-share-record) { height: 100%; }
/* Two pickers side by side (arena and difficulty); a plain selector spans both columns. */
.outperform-share-inputs.is-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 20px; }
.outperform-share-inputs.is-columns > .outperform-share-input-row:not(:has(.outperform-share-picker)) { grid-column: 1 / -1; }
.outperform-share-record { padding: 12px; border: 1px solid #284439; border-radius: 3px; background: #10231b; }
.outperform-share-badge { display: inline-block; margin-top: 7px; padding: 2px 7px; border: 1px solid #608471; border-radius: 3px; color: #e8d985; font-size: .85em; }
.outperform-share-entry-button { width: 100%; text-align: left; }
.outperform-share-entry-title { display: block; color: #6cf4b0; }
.outperform-share-entry-subtitle { display: block; margin-top: 4px; color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); white-space: pre-wrap; }
.outperform-share-entry-button.is-previewed { border-color: #6cf4b0; background: #183027; }
.outperform-share-choice-preview { padding: 10px 12px; border: 1px solid #67404a; border-left: 3px solid #ff8a96; background: #201317; }
.outperform-share-panel.has-choice-preview > .outperform-share-body { flex: 1 1 auto; min-height: 100px; }
.outperform-share-panel.has-choice-preview[open] > .outperform-share-header { max-height: 22dvh; overflow: auto; }
.outperform-share-panel.has-choice-preview > .outperform-share-choice-preview { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; max-height: 25dvh; min-height: 0; margin: 0; overflow: auto; }
.outperform-share-choice-heading { flex-shrink: 0; color: #edf8f2; font-size: calc(11px * var(--outperform-text-scale, 1)); line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.outperform-share-choice-hint { flex-shrink: 0; color: #e8d985; font-size: calc(11px * var(--outperform-text-scale, 1)); line-height: 1.25; }
.outperform-share-entry-button.is-touch-armed { border-color: #e8d985; box-shadow: inset 0 0 0 1px #e8d985; }
.outperform-share-choice-rows { margin: 0; display: grid; gap: 6px; min-height: 24px; overflow: auto; overscroll-behavior: contain; }
.outperform-share-choice-row { display: grid; grid-template-columns: minmax(74px, .25fr) minmax(0, 1fr); gap: 5px 10px; font-size: calc(12px * var(--outperform-text-scale, 1)); line-height: 1.3; }
.outperform-share-choice-row dt { color: #ffadb6; overflow-wrap: anywhere; }
.outperform-share-choice-row dd { margin: 0; color: #edf8f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.outperform-share-choice-row[data-tone="you"] dt { color: #6cf4b0; }
.outperform-share-choice-caption { margin: 8px 0 0; color: #b9cfc4; font-size: calc(12px * var(--outperform-text-scale, 1)); overflow-wrap: anywhere; }
.outperform-share-entry-button.has-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-content: start; }
.outperform-share-entry-button.has-icon > :not(.outperform-share-entry-icon) { grid-column: 2; }
.outperform-share-entry-button.has-icon > .outperform-share-badge { justify-self: start; }
.outperform-share-entry-icon { grid-row: 1 / span 3; width: 44px; height: 32px; border-radius: 3px; object-fit: contain; }
.outperform-share-entry-button.is-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.outperform-share-entry-button.is-toggle > :not(.outperform-share-switch) { grid-column: 1; }
.outperform-share-entry-button[aria-pressed="true"] { border-color: #6cf4b0; background: #173a29; }
.outperform-share-switch { grid-column: 2; grid-row: 1 / span 2; min-width: 52px; padding: 3px 10px; border: 1px solid #608471; border-radius: 999px; color: #b0c3b9; font-size: .82em; text-align: center; }
.outperform-share-entry-button[aria-pressed="true"] > .outperform-share-switch { border-color: #6cf4b0; background: #6cf4b0; color: #07110f; font-weight: 700; }
.outperform-share-details dt.has-icon { display: flex; align-items: center; gap: 8px; }
.outperform-share-detail-icon { flex: none; width: 52px; height: 39px; border-radius: 3px; object-fit: contain; }

.outperform-share-button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #608471;
  border-radius: 3px;
  color: #dbeae3;
  background: #15291f;
  cursor: pointer;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.outperform-share-button:hover:not(:disabled) { background: #233e2f; border-color: #6cf4b0; }
.outperform-share-primary { background: #6cf4b0; color: #07110f; border-color: #6cf4b0; font-weight: 700; }
.outperform-share-primary:hover:not(:disabled) { background: #a0ffd0; color: #07110f; }
.outperform-share-button:disabled { opacity: 0.45; cursor: default; }
.outperform-share-panel :is(button, input, select, textarea):focus-visible,
.outperform-share-panel[data-controller-focus] :is(button, input, select, textarea):focus { outline: 3px solid #f3df88; outline-offset: 2px; }
.outperform-share-transport-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.outperform-share-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; padding: 14px 20px; border-top: 1px solid #284439; max-height: 35vh; overflow: auto; }
.outperform-share-actions > button { flex: 1 1 150px; }
.outperform-share-panel.has-choice-preview > .outperform-share-actions { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px; padding: 8px 12px; max-height: 20dvh; }
.outperform-share-panel.has-choice-preview > .outperform-share-actions > button { min-width: 0; padding: 7px 5px; font-size: calc(12px * var(--outperform-text-scale, 1)); line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; }
.outperform-share-panel.has-choice-preview > .outperform-share-actions > :is(button:first-child, [data-focus-key="action:read-pause"]) { white-space: nowrap; }
.outperform-share-panel.has-choice-preview > .outperform-share-actions:has(> button:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outperform-share-actions.has-summary > button { flex: 1 1 0; min-width: 0; }
.outperform-share-footer-summary { flex: 1 0 100%; color: #b0c3b9; font-size: .85em; overflow-wrap: anywhere; }
.outperform-share-footer-summary:has(.outperform-share-footer-part) { display: flex; flex-wrap: wrap; gap: 2px 16px; color: #dbeae3; }
.outperform-share-footer-label { color: #8aa197; font-size: .86em; text-transform: uppercase; letter-spacing: .06em; }
.outperform-share-picker { display: grid; gap: 14px; min-width: 0; }
.outperform-share-picker-roster { display: grid; gap: 10px; min-width: 0; }
.outperform-share-picker:not(.has-details) .outperform-share-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outperform-share-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.outperform-share-picker-tile { display: grid; align-content: start; justify-items: start; gap: 5px; text-align: left; min-width: 0; }
.outperform-share-picker-tile.is-selected { border-color: #6cf4b0; box-shadow: inset 0 0 0 1px #6cf4b0; background: #173a29; }
.outperform-share-picker-tile.is-locked { color: #b0c3b9; background: #101b17; }
.outperform-share-picker-tile.is-locked .outperform-share-picker-icon { opacity: .55; filter: grayscale(1); }
.outperform-share-picker-tile.is-inspected:not(.is-selected) { border-color: #e8d985; }
.outperform-share-picker-icon { width: 58px; height: 42px; object-fit: contain; flex: none; border-radius: 3px; }
.outperform-share-picker-name { color: #edf8f2; font-weight: 700; }
.outperform-share-picker-note { color: #cfe0d7; font-size: .86em; }
.outperform-share-picker-tag { color: #b0c3b9; font-size: .82em; }
.outperform-share-picker-meta { color: #8fd8b3; font-size: .8em; }
.outperform-share-picker-badge { padding: 0 6px; border: 1px solid #e8d985; border-radius: 3px; color: #e8d985; font-size: .74em; letter-spacing: .05em; text-transform: uppercase; }
.outperform-share-picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.outperform-share-picker-detail { display: grid; gap: 12px; padding: 14px; border: 1px solid #497762; border-radius: 5px; background: #10231b; min-width: 0; overflow-wrap: anywhere; }
.outperform-share-picker-detail h3 { margin: 0; color: #6cf4b0; font-size: 1.1em; }
.outperform-share-picker-tip strong { color: #6cf4b0; font-weight: 600; }
.outperform-share-picker-caption { margin-bottom: -6px !important; color: #8aa197; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }
.outperform-share-picker-quote { color: #b0c3b9; font-style: italic; }
.outperform-share-picker-hint { color: #b0c3b9; font-size: .86em; }
.outperform-share-picker-stats { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.outperform-share-picker-stats li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 8px; border-left: 2px solid #497762; background: #07110f; }
.outperform-share-picker-stats li.is-bonus { border-left-color: #6cf4b0; }
.outperform-share-picker-stats li.is-cost { border-left-color: #ff9c80; }
.outperform-share-picker-stats li.is-new { border-left-color: #e8d985; }
.outperform-share-picker-stat-note { color: #8aa197; font-size: .86em; }
.outperform-share-picker-stats li.is-new .outperform-share-picker-stat-note { color: #e8d985; }
/* Build roster: compact tiles with the icon beside three short lines, details alongside. */
.outperform-share-picker.is-roster.has-details { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
.outperform-share-picker.is-roster.has-details > .outperform-share-picker-detail { position: sticky; top: 0; }
.outperform-share-picker.is-roster > .outperform-share-picker-roster > .outperform-share-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 6px 10px; line-height: 1.3; }
.outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile > :not(img) { grid-column: 2; }
/* Build emblems are the character portrait (or the classic ring): square and unframed. */
.outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile > .outperform-share-picker-icon { grid-row: 1 / span 3; width: 44px; height: 44px; }
.outperform-share-picker.is-roster > .outperform-share-picker-detail .outperform-share-picker-icon { width: 64px; height: 64px; }
/* Difficulty is one joined meter from Escalation 0 to Escalation 5, each step tinted from calm green to danger red,
   so it reads as a scale rather than another set of cards. The level's name sits beside its details heading. */
.outperform-share-picker.is-ladder > .outperform-share-picker-roster > .outperform-share-picker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile { justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 4px; text-align: center; border-radius: 0; border-top: 4px solid var(--picker-accent, #608471); }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile:not(:first-child) { border-left-width: 0; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile:first-child { border-radius: 5px 0 0 5px; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile:last-child { border-radius: 0 5px 5px 0; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile.is-selected { background: color-mix(in srgb, var(--picker-accent, #6cf4b0) 26%, #0b1714); border-color: #608471; border-top-color: var(--picker-accent, #6cf4b0); box-shadow: inset 0 0 0 2px var(--picker-accent, #6cf4b0); }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile.is-inspected:not(.is-selected) { border-color: #608471; border-top-color: var(--picker-accent, #608471); box-shadow: inset 0 0 0 2px #e8d985; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked { border-top-color: #34463e; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-name { font-size: 1.05em; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-foot { justify-content: center; white-space: nowrap; overflow-wrap: normal; }
.outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile > .outperform-share-picker-tag { display: none; }
.outperform-share-picker.is-ladder > .outperform-share-picker-detail .outperform-share-build-names { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.outperform-share-picker.is-ladder > .outperform-share-picker-detail { gap: 10px; padding: 12px; }
.outperform-share-picker.is-ladder > .outperform-share-picker-detail .outperform-share-picker-stats { gap: 6px; }
.outperform-share-picker.is-ladder > .outperform-share-picker-detail .outperform-share-picker-stats li { padding: 5px 8px; }
/* Arenas are picture cards: a floor-plan thumbnail beside the name, two per row, with the description as a plain caption. */
.outperform-share-picker.is-compact .outperform-share-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outperform-share-picker.is-compact .outperform-share-picker-tile { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 8px 10px 8px 8px; }
.outperform-share-picker.is-compact .outperform-share-picker-tile > :not(img) { grid-column: 2; }
.outperform-share-picker.is-compact .outperform-share-picker-tile > .outperform-share-picker-icon { grid-row: 1 / span 3; align-self: center; width: 72px; height: 52px; }
.outperform-share-picker.is-compact .outperform-share-picker-detail { gap: 6px; padding: 2px 2px 0; border: 0; background: transparent; color: #b0c3b9; }
/* A companion input sits under its host's tiles. Beside a roster the host's details span both rows, and the flexible
   second row takes their extra height, so the companion starts right below the tiles. */
.outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) { grid-template-rows: auto 1fr; }
.outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) > .outperform-share-picker-detail { grid-row: 1 / span 2; grid-column: 2; }
.outperform-share-picker.is-roster.has-details > .outperform-share-companion { grid-column: 1; }
/* A swatch row (a build's highlight) shares the skin strip's cell, at the right end of its label line, so it adds no
   height. It needs the first companion's label to be short, as "Skin · cosmetic only" is. */
.outperform-share-picker.is-roster.has-details:has(> .outperform-share-swatch-row) > .outperform-share-companion { grid-row: 2; }
.outperform-share-picker.is-roster.has-details > .outperform-share-companion.outperform-share-swatch-row { justify-self: end; align-self: start; z-index: 1; }
/* An inline row: its label sits beside a short picker. */
.outperform-share-input-row.is-inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
/* Swatches: a row of small color dots. A dot's name and lock state are its tooltip and accessible name, and the row's
   label names the current choice, so there is no details line. A locked dot is a dim shade of its color with a padlock
   on it; only the color dims, so the padlock stays readable. */
.outperform-share-picker.is-swatches { gap: 0; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster > .outperform-share-picker-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile { position: relative; width: 20px; height: 20px; min-height: 0; padding: 0; border: 2px solid #0b1714; border-radius: 50%; background: var(--picker-accent, #6cf4b0); box-shadow: 0 0 0 1px #608471; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile.is-selected { background: var(--picker-accent, #6cf4b0); box-shadow: 0 0 0 2px #e4fff0; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile.is-inspected:not(.is-selected) { box-shadow: 0 0 0 2px #e8d985; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked { background: color-mix(in srgb, var(--picker-accent, #6cf4b0) 32%, #0b1714); box-shadow: 0 0 0 1px #34463e; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 12px; background: #e4fff0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='1' y='5.3' width='8' height='6.4' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='1' y='5.3' width='8' height='6.4' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked.is-inspected { box-shadow: 0 0 0 2px #e8d985; }
.outperform-share-picker.is-swatches > .outperform-share-picker-roster .outperform-share-picker-tile > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.outperform-share-picker.is-swatches > .outperform-share-picker-detail { display: none; }
/* Locked build and skin tiles: the greyed portrait carries a padlock on its lower right corner, and the tile's "Locked"
   line is for screen readers only, so a locked tile is no taller than an open one. The padlock takes the tile's accent
   (gold for the next build to unlock); inspecting the tile says how to unlock it. --lock-x/--lock-y place the padlock's
   centre on the portrait's corner. */
.outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile { --lock-x: 51px; --lock-y: 46px; }
.outperform-share-picker.is-strip > .outperform-share-picker-roster .outperform-share-picker-tile { --lock-x: calc(50% + 20px); --lock-y: 44px; }
.outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked { position: relative; }
.outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked > .outperform-share-picker-foot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked::before, .outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked::after { content: ''; position: absolute; left: var(--lock-x); top: var(--lock-y); transform: translate(-50%, -50%); pointer-events: none; }
.outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked::before { width: 17px; height: 17px; border-radius: 50%; background: #07110f; box-shadow: 0 0 0 1px #34463e; }
.outperform-share-picker:is(.is-roster, .is-strip) > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked::after { width: 9px; height: 11px; background: var(--picker-accent, #e4fff0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='1' y='5.3' width='8' height='6.4' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.6V3.7a2.4 2.4 0 0 1 4.8 0v1.9' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='1' y='5.3' width='8' height='6.4' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Skins are a strip of portraits, each labelled underneath; the inspected skin is described below the strip. */
.outperform-share-picker.is-strip > .outperform-share-picker-roster > .outperform-share-picker-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.outperform-share-picker.is-strip > .outperform-share-picker-roster .outperform-share-picker-tile { justify-items: center; gap: 2px; padding: 4px 3px 5px; text-align: center; line-height: 1.2; }
.outperform-share-picker.is-strip > .outperform-share-picker-roster .outperform-share-picker-tile > .outperform-share-picker-tag { display: none; }
.outperform-share-picker.is-strip > .outperform-share-picker-roster .outperform-share-picker-icon { width: 44px; height: 44px; }
.outperform-share-picker.is-strip > .outperform-share-picker-roster .outperform-share-picker-name { font-size: .82em; }
/* The strip already shows each portrait, so its details are text only: the name with its description beside it. */
.outperform-share-picker.is-strip { gap: 6px; }
.outperform-share-picker.is-strip > .outperform-share-picker-detail .outperform-share-picker-icon { display: none; }
/* Soundtracks are genre tags that wrap to fit, so all of them fit in two short rows beside the tallest difficulty details.
   The soundtrack's own name and sound are the line below them. */
.outperform-share-picker.is-chips { gap: 6px; }
.outperform-share-picker.is-chips > .outperform-share-picker-roster > .outperform-share-picker-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.outperform-share-picker.is-chips > .outperform-share-picker-roster .outperform-share-picker-tile { flex: 1 1 auto; justify-items: center; min-height: 0; padding: 3px 8px; line-height: 1.3; }
.outperform-share-picker.is-chips > .outperform-share-picker-roster .outperform-share-picker-name { font-size: .86em; white-space: nowrap; }
.outperform-share-picker.is-chips > .outperform-share-picker-roster .outperform-share-picker-tile > .outperform-share-picker-tag { display: none; }
:is(.outperform-share-picker.is-strip, .outperform-share-picker.is-chips) > .outperform-share-picker-detail { gap: 4px; padding: 0 2px; border: 0; background: transparent; color: #b0c3b9; }
:is(.outperform-share-picker.is-strip, .outperform-share-picker.is-chips) > .outperform-share-picker-detail .outperform-share-build-names { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
:is(.outperform-share-picker.is-strip, .outperform-share-picker.is-chips) > .outperform-share-picker-detail h3 { font-size: 1em; }
:is(.outperform-share-picker.is-strip, .outperform-share-picker.is-chips) > .outperform-share-picker-detail .outperform-share-gallery-note { color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); }
/* Side-by-side sections get small section headings, companions included. */
.outperform-share-inputs.is-columns > .outperform-share-input-row > .outperform-share-label,
.outperform-share-inputs.is-columns .outperform-share-companion > .outperform-share-label { color: #b0c3b9; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .outperform-share-inputs.is-columns { grid-template-columns: minmax(0, 1fr); }
  .outperform-share-picker.is-roster > .outperform-share-picker-roster > .outperform-share-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Narrow meter steps keep only their label; a locked step is already greyed and its details say how to unlock it. */
  .outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked .outperform-share-build-status { display: none; }
  .outperform-share-picker.is-roster.has-details { grid-template-columns: minmax(0, 1fr); }
  .outperform-share-picker.is-roster.has-details > .outperform-share-picker-detail { position: static; }
  .outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) { grid-template-rows: none; }
  .outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) > .outperform-share-picker-detail { grid-row: auto; grid-column: auto; }
  .outperform-share-picker.is-roster.has-details:has(> .outperform-share-swatch-row) > .outperform-share-companion { grid-row: auto; }
  .outperform-share-picker.is-roster.has-details > .outperform-share-companion.outperform-share-swatch-row { justify-self: start; }
  .outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 7px 8px; }
  .outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile > .outperform-share-picker-icon { width: 28px; height: 28px; }
  .outperform-share-picker.is-roster > .outperform-share-picker-roster .outperform-share-picker-tile { --lock-x: 34px; --lock-y: 32px; }
  .outperform-share-picker:not(.has-details) .outperform-share-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outperform-share-picker:not(.has-details) .outperform-share-picker-tile { grid-template-columns: 36px minmax(0, 1fr); column-gap: 6px; }
  .outperform-share-picker:not(.has-details) .outperform-share-picker-tile > :not(img) { grid-column: 2; }
  .outperform-share-picker:not(.has-details) .outperform-share-picker-tile .outperform-share-picker-icon { width: 36px; height: 28px; grid-row: 1 / span 4; }
}
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-picker.is-roster > .outperform-share-picker-roster > .outperform-share-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-text-scale="150"] .outperform-share-inputs.is-columns { grid-template-columns: minmax(0, 1fr); }
:root[data-text-scale="150"] .outperform-share-picker.is-ladder > .outperform-share-picker-roster .outperform-share-picker-tile.is-locked .outperform-share-build-status { display: none; }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details { grid-template-columns: minmax(0, 1fr); }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details > .outperform-share-picker-detail { position: static; }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) { grid-template-rows: none; }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details:has(> .outperform-share-companion) > .outperform-share-picker-detail { grid-row: auto; grid-column: auto; }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details:has(> .outperform-share-swatch-row) > .outperform-share-companion { grid-row: auto; }
:root[data-text-scale="150"] .outperform-share-picker.is-roster.has-details > .outperform-share-companion.outperform-share-swatch-row { justify-self: start; }
.outperform-share-editor { display: flex; flex-direction: column; min-height: 0; }
.outperform-share-editor-content { padding: 12px 20px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.outperform-share-editor-title { margin: 0 0 8px; font-size: calc(14px * var(--outperform-text-scale, 1)); color: #6cf4b0; overflow-wrap: anywhere; }
.outperform-share-editor-draft { min-height: 48px; height: 48px; resize: none; font-size: calc(12px * var(--outperform-text-scale, 1)) !important; }
.outperform-share-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.outperform-share-key { min-height: 32px; padding: 5px 0; }
.outperform-share-editor-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.outperform-share-editor-actions > button { min-height: 34px; padding: 6px 3px; font-size: calc(12px * var(--outperform-text-scale, 1)); }

@media (max-width: 480px) {
  .outperform-share-grid { grid-template-columns: minmax(0, 1fr); }
  .outperform-share-panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); font-size: calc(13px * var(--outperform-text-scale, 1)); }
  .outperform-share-panel.is-wide { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .outperform-share-header { gap: 10px; padding: 14px 12px 12px; }
  .outperform-share-title { font-size: calc(20px * var(--outperform-text-scale, 1)); }
  .outperform-share-body { padding: 14px 12px; }
  .outperform-share-notice { padding-right: 12px; padding-left: 12px; }
  .outperform-share-actions { padding: 12px; }
  .outperform-share-details { grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr); gap: 8px 12px; }
  .outperform-share-editor-content { padding: 10px 12px; }
  .outperform-share-editor-actions > button { font-size: calc(11px * var(--outperform-text-scale, 1)); }
}

:root[data-text-scale="125"] { --outperform-text-scale: 1.25; }
:root[data-text-scale="150"] { --outperform-text-scale: 1.5; }
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-header { max-height: 34vh; overflow: auto; overscroll-behavior: contain; }
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-details { grid-template-columns: minmax(0, 1fr); gap: 4px; }
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-details dd { margin-bottom: 14px; }

@media (max-height: 480px) {
  .outperform-share-header { padding-top: 10px; padding-bottom: 10px; }
  .outperform-share-body { padding-top: 12px; padding-bottom: 12px; }
  .outperform-share-actions { padding-top: 8px; padding-bottom: 8px; }
}

/* Section tabs (the Collection): one row under the heading, each with its count; the open one is filled. */
.outperform-share-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(104px * var(--outperform-text-scale, 1)), 1fr)); gap: 6px; flex-shrink: 0; padding: 10px 20px; border-bottom: 1px solid #284439; }
.outperform-share-tab { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 48px; padding: 5px 6px; text-align: center; line-height: 1.2; overflow-wrap: normal; }
.outperform-share-tab-label { font-weight: 700; }
.outperform-share-tab-count { color: #b0c3b9; font-size: calc(11px * var(--outperform-text-scale, 1)); }
.outperform-share-tab-badge { color: #e8d985; font-size: calc(10px * var(--outperform-text-scale, 1)); font-weight: 700; }
.outperform-share-tab.is-selected { border-color: #6cf4b0; background: #6cf4b0; color: #07110f; }
.outperform-share-tab.is-selected:hover:not(:disabled) { background: #a0ffd0; }
.outperform-share-tab.is-selected > .outperform-share-tab-count { color: #0c3a25; }
.outperform-share-tab.is-selected > .outperform-share-tab-badge { color: #5e4700; }
/* Cards: as many columns as fit. A group heading can carry one note, such as the unlock condition its cards share. */
.outperform-share-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.outperform-share-cards .outperform-share-entry-button { height: 100%; }
/* A button centres its content; a card without a picture starts at the top like its neighbours. */
.outperform-share-cards .outperform-share-entry-button:not(.has-icon) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.outperform-share-group-note { margin-bottom: 2px; color: #b0c3b9; font-size: calc(12px * var(--outperform-text-scale, 1)); white-space: pre-wrap; overflow-wrap: anywhere; }
.outperform-share-entries > .outperform-share-group:first-child { margin-top: 0; }
/* Read-only records with a picture lay out like entry buttons, and fill their row in a grid of cards. These come before
   the state rules below, which place the state chip at the same specificity. */
.outperform-share-record.has-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-content: start; }
.outperform-share-record.has-icon > :not(.outperform-share-entry-icon) { grid-column: 2; }
:is(.outperform-share-cards, .outperform-share-grid) .outperform-share-record { height: 100%; }
/* Collectible states. Found cards keep their colour; cards you can still find are dimmer; locked ones dimmer still,
   with a dashed edge. The state chip sits beside the name. */
:is(.outperform-share-entry-button, .outperform-share-record):is(.is-found, .is-new, .is-available, .is-locked).has-icon { grid-template-columns: auto minmax(0, 1fr) auto; }
:is(.outperform-share-entry-button, .outperform-share-record):is(.is-found, .is-new, .is-available, .is-locked).has-icon > .outperform-share-entry-subtitle { grid-column: 2 / span 2; }
:is(.outperform-share-entry-button, .outperform-share-record):is(.is-found, .is-new, .is-available, .is-locked) > .outperform-share-badge { grid-column: 3; grid-row: 1; align-self: start; margin-top: 0; }
:is(.outperform-share-entry-button, .outperform-share-record).is-found { border-left: 3px solid #6cf4b0; }
:is(.outperform-share-entry-button, .outperform-share-record).is-new { border-color: #e8d985; border-left: 3px solid #e8d985; background: #1f2a17; }
:is(.outperform-share-entry-button, .outperform-share-record).is-available { background: #0e1b16; }
:is(.outperform-share-entry-button, .outperform-share-record).is-available > .outperform-share-entry-title { color: #b8cfc3; }
:is(.outperform-share-entry-button, .outperform-share-record).is-locked { border-style: dashed; background: #0a1411; }
:is(.outperform-share-entry-button, .outperform-share-record).is-locked > :is(.outperform-share-entry-title, .outperform-share-entry-subtitle) { color: #8a9d94; }
:is(.outperform-share-entry-button, .outperform-share-record, .outperform-share-hero).is-found .outperform-share-badge { border-color: #2f6b4d; color: #6cf4b0; }
:is(.outperform-share-entry-button, .outperform-share-record, .outperform-share-hero).is-new .outperform-share-badge { border-color: #e8d985; background: #e8d985; color: #07110f; font-weight: 700; }
:is(.outperform-share-entry-button, .outperform-share-record, .outperform-share-hero).is-available .outperform-share-badge { color: #b0c3b9; }
:is(.outperform-share-entry-button, .outperform-share-record, .outperform-share-hero).is-locked .outperform-share-badge { border-style: dashed; color: #8a9d94; }
/* A card's own page: its picture large, then its kind, state and effect. */
.outperform-share-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid #284439; border-left: 4px solid var(--hero-accent, #608471); border-radius: 4px; background: #0d1d17; }
.outperform-share-hero-icon { width: 132px; height: 96px; border-radius: 4px; object-fit: contain; }
.outperform-share-hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #b0c3b9; font-size: .85em; }
.outperform-share-hero-kicker > .outperform-share-badge { margin-top: 0; }
.outperform-share-hero-text { margin-top: 8px; color: #edf8f2; font-size: 1.1em; white-space: pre-wrap; overflow-wrap: anywhere; }
.outperform-share-hero:is(.is-available, .is-locked) .outperform-share-hero-text { color: #b0c3b9; }
:root:is([data-text-scale="125"], [data-text-scale="150"]) .outperform-share-tabs { max-height: 30vh; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 480px) {
  .outperform-share-tabs { grid-template-columns: repeat(auto-fit, minmax(calc(76px * var(--outperform-text-scale, 1)), 1fr)); gap: 4px; padding: 8px 10px; }
  .outperform-share-tab { min-height: 42px; padding: 4px 0; font-size: calc(10px * var(--outperform-text-scale, 1)); }
  .outperform-share-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .outperform-share-hero-icon { width: 88px; height: 64px; }
}
/* Appearance. A large hero is a wide scene (the look's preview) beside its words. Cards can carry large pictures; locked
   pictures are dimmed but keep their colour (a highlight is its colour), and the selected card is the reward the preview
   shows, so a locked one tried on shows at full strength. */
.outperform-share-hero.is-large { align-items: center; }
.outperform-share-hero.is-large > .outperform-share-hero-icon { width: 520px; max-width: 100%; height: auto; aspect-ratio: 520 / 160; border: 1px solid #1d3229; }
.outperform-share-hero.is-large .outperform-share-hero-text { font-size: 1em; line-height: 1.55; }
.outperform-share-entries.has-large-icons .outperform-share-entry-icon { width: 64px; height: 64px; }
.outperform-share-entries.has-large-icons .is-locked:not(.is-selected) > .outperform-share-entry-icon { opacity: .5; }
.outperform-share-entry-button.is-selected { border-color: #6cf4b0; box-shadow: inset 0 0 0 1px #6cf4b0; background: #132a20; }
.outperform-share-entry-button.is-selected.is-locked { border-style: solid; border-color: #e8d985; box-shadow: inset 0 0 0 1px #e8d985; background: #1a2116; }
/* A card without a picture (a title mark) keeps its badge beside the name, like the pictured cards. */
.outperform-share-entries.has-large-icons .outperform-share-entry-button:not(.has-icon) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-content: start; }
.outperform-share-entries.has-large-icons .outperform-share-entry-button:not(.has-icon) > .outperform-share-badge { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
.outperform-share-entries.has-large-icons .outperform-share-entry-button:not(.has-icon) > .outperform-share-entry-subtitle { grid-column: 1 / -1; }
@media (max-width: 900px) { .outperform-share-hero.is-large { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
/* A short window (a landscape phone, or large text) keeps the whole picture inside the visible body. */
@media (max-height: 480px) { .outperform-share-hero.is-large > .outperform-share-hero-icon { width: auto; height: 104px; } }