.profile-page { padding-block: 28px 72px; }
.account-menu {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-menu summary {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #2b374c;
  border-radius: 6px;
  color: #afbed3;
  list-style: none;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary { background: #23324a; color: var(--text); }
.account-menu summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.account-menu-items {
  position: absolute;
  inset: calc(100% + 8px) 0 auto auto;
  min-width: 160px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid #30496d;
  border-radius: 8px;
  background: #131e30;
  box-shadow: 0 10px 22px #0006;
}
.account-menu-items :is(a, button) {
  border: 0;
  border-radius: 5px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.account-menu-items :is(a, button):hover { background: #23324a; }
.profile-bio {
  margin-top: 12px;
  padding: 14px 18px;
}
.profile-bio h2 { margin: 0 0 5px; font-size: 13px; color: var(--orange); }
.profile-bio p { margin: 0; color: #c8d5e9; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-settings form { max-width: 820px; margin-top: 24px; padding: clamp(15px, 4vw, 24px); overflow: visible; }
.profile-image-fields { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.profile-image-field { min-width: 0; }
.profile-image-label { margin: 0 0 8px; color: #aebdd2; font-size: 12px; }
.profile-champion-picker { position: relative; margin: 0; padding: 0; background: #101824; }
.profile-champion-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  list-style: none;
}
.profile-champion-picker summary::-webkit-details-marker { display: none; }
.profile-champion-picker summary:focus-visible { outline: 2px solid var(--blue); border-radius: 7px; }
.profile-champion-picker-panel {
  position: absolute;
  z-index: 2;
  inset: calc(100% + 5px) 0 auto;
  padding: 7px;
  border: 1px solid #30496d;
  border-radius: 7px;
  background: #131e30;
  box-shadow: 0 10px 22px #0006;
}
.profile-champion-picker-panel input { padding: 9px 10px; font-size: 13px; }
.profile-champion-picker-options { max-height: 190px; margin-top: 5px; overflow-y: auto; overscroll-behavior: contain; }
.profile-champion-picker-options button {
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 7px 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
}
.profile-champion-picker-options button:is(:hover, :focus-visible, [aria-pressed="true"]) { background: #23324a; }
.profile-champion-picker-options button:focus-visible { outline-offset: -2px; }
.profile-champion-picker-options p { margin: 5px 8px; font-size: 12px; }
.profile-image-preview {
  display: block;
  width: 100%;
  height: 126px;
  margin-bottom: 8px;
  border: 1px solid #26364d;
  border-radius: 7px;
  object-fit: cover;
}
.profile-image-preview-icon { width: 126px; }
.profile-image-preview-banner { object-fit: contain; background: #111a29; }
.profile-settings textarea {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 12px;
  border: 1px solid #2b374c;
  border-radius: 6px;
  background: #101824;
  color: var(--text);
  font: inherit;
}
.profile-settings textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.profile-settings-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.55; }
.profile-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 580px) {
  .profile-image-fields { grid-template-columns: 1fr; }
}
.profile-cover {
  position: relative;
  isolation: isolate;
  min-height: 235px;
  display: flex;
  align-items: end;
  overflow: hidden;
  border: 1px solid #26364d;
  border-radius: 14px;
  background: #111a29;
}
.profile-cover::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, #101827 15%, #101827e0 37%, #10182720 85%),
    linear-gradient(0deg, #101827 3%, transparent 85%),
    var(--champion-art) right 12% / min(78%, 900px) auto no-repeat;
}
.profile-cover-content {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 28px;
}
.profile-avatar { position: relative; flex: none; }
.profile-avatar .avatar { display: block; width: 94px; height: 94px; border: 2px solid #536e98; border-radius: 13px; }
.profile-avatar > span {
  position: absolute;
  inset: auto -5px -5px auto;
  border: 1px solid #45649a;
  border-radius: 5px;
  padding: 2px 6px;
  background: #142749;
  color: #c8dfff;
  font-size: 10px;
}
.profile-heading { min-width: 0; }
.profile-heading p { margin: 0; color: #aebdd2; font-size: 12px; }
.profile-heading .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
.profile-cover-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.profile-heading h1 {
  margin: 7px 0;
  color: #f3f6fb;
  font: 800 clamp(32px, 4vw, 54px)/1 var(--font-display);
  overflow-wrap: anywhere;
}
.profile-heading h1 span { color: #acbbd4; font-size: .55em; margin-left: 5px; }
.profile-cover-actions { margin: 0 0 0 auto; flex: none; }
.profile-cover-actions .btn { white-space: nowrap; }

.profile-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin: 12px 0 16px;
  border: 1px solid #25354c;
  border-radius: 8px;
  background: #101824;
}
.profile-subnav button, .profile-filters button {
  padding: 8px 13px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #afbed3;
  font-size: 12px;
}
.profile-subnav button:hover, .profile-filters button:hover { background: #23324a; color: #fff; }
.profile-subnav button[aria-pressed="true"], .profile-filters button[aria-pressed="true"] {
  background: #243b62;
  color: #e0ecff;
}
.profile-dashboard {
  display: grid;
  grid-template-columns: minmax(245px, 290px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.profile-dashboard[hidden] { display: none; }
.profile-controls.profile-champion-controls { justify-content: flex-start; gap: 12px; }
.profile-champion-controls label { margin: 0 0 4px; }
.profile-controls.profile-champion-controls :is(input, select) { padding: 8px 10px; font-size: 12px; }
.profile-champion-scroll { overflow-x: auto; }
.profile-champion-table { min-width: 730px; }
.profile-champion-table th, .profile-champion-table td { padding: 10px 12px; }
.profile-champion-table thead th { color: #a6b7cf; }
.profile-champion-table tbody th { color: var(--text); font-size: 12px; letter-spacing: normal; text-transform: none; }
.profile-champion-table td small { display: block; margin-top: 3px; color: #a6b7cf; font-size: 11px; }
.profile-champion-total { background: #192740; }
.profile-table-champion, .profile-table-results { display: flex; align-items: center; gap: 8px; }
.profile-table-champion .avatar { width: 34px; height: 34px; }
.profile-table-champion > span { color: var(--orange); text-align: center; width: 34px; font-size: 22px; }
.profile-winbar { width: 72px; height: 9px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) var(--winrate), var(--orange-strong) var(--winrate)); }
.profile-champion-expand {
  width: 32px;
  height: 30px;
  border: 1px solid #30496d;
  border-radius: 5px;
  background: #17263e;
  color: #dbe8ff;
}
.profile-champion-expand:hover { background: #243b62; }
.profile-champion-expand[aria-expanded="true"] { transform: rotate(180deg); }
.profile-champion-detail td { background: #131f30; white-space: normal; }
.profile-champion-detail td > div { display: flex; flex-wrap: wrap; gap: 8px 24px; color: #a6b7cf; }
.profile-champion-detail strong { margin-right: 4px; color: var(--text); }
.profile-mastery-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 16px 10px;
  border-bottom: 1px solid #26364d;
  background: #142139;
  text-align: center;
}
.profile-mastery-totals dt { font-size: 11px; color: #a6b7cf; }
.profile-mastery-totals dd { margin: 5px 0 0; color: var(--orange); font: 700 26px/1.1 var(--font-display); }
.profile-mastery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px;
  list-style: none;
}
.profile-mastery-grid li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 13px 8px;
  border: 1px solid #26364d;
  border-radius: 8px;
  background: #131e30;
  text-align: center;
  font-size: 12px;
}
.profile-mastery-grid .avatar { width: 58px; height: 58px; border-color: var(--orange-line); }
.profile-mastery-emblem {
  z-index: 1;
  margin: -15px 0 2px;
  min-width: 28px;
  padding: 3px 5px;
  border: 1px solid var(--orange-line);
  border-radius: 5px;
  background: var(--orange-panel);
  color: var(--orange);
}
.profile-mastery-grid progress { width: min(100%, 96px); height: 8px; accent-color: var(--orange-strong); }
.profile-mastery-grid li > small { color: #a6b7cf; }
.profile-detail-view .profile-stats-footnote { margin: 12px 14px; }
.profile-side-column, .profile-main-column { display: grid; min-width: 0; gap: 14px; }
.profile-panel {
  min-width: 0;
  border: 1px solid #26364d;
  border-radius: 10px;
  overflow: hidden;
  background: #101824;
}
.profile-panel-heading, .profile-match-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.profile-panel-heading { padding: 12px 14px; border-bottom: 1px solid #26364d; }
.profile-panel-heading h2, .profile-match-heading h2 { margin: 0; color: #f0f5ff; font-size: 15px; }
.profile-mode-tag {
  flex: none;
  padding: 3px 6px;
  border: 1px solid #30496d;
  border-radius: 5px;
  background: #17263e;
  color: #a9c9fb;
  font-size: 10px;
}
.profile-ranked-panel { background: radial-gradient(ellipse at 100% 0, var(--orange-tint), transparent 62%), linear-gradient(160deg, #142440, #101824 74%); }
.profile-ranked-score { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 14px 14px 8px; }
.profile-metric-label { display: block; color: #abbcd4; font-size: 11px; }
.profile-ranked-score strong { display: block; margin-top: 4px; font: 800 25px/1.1 var(--font-display); color: var(--orange); }
.profile-ranked-score strong small { display: block; margin-top: 4px; font: 700 12px var(--font-body); }
.profile-ranked-record { display: grid; justify-items: end; gap: 4px; color: #c5d1e3; font-size: 11px; text-align: right; }
.profile-ranked-record span:first-child { color: #f2f6ff; font-size: 14px; }
.profile-sp-chart { padding: 8px 14px 12px; }
.profile-chart-caption { display: flex; justify-content: space-between; gap: 8px; color: #a6b7cf; font-size: 10px; }
.profile-chart-caption > :last-child { text-align: right; }
.profile-sp-chart svg { display: block; width: 100%; height: auto; margin-block: 5px 3px; }
.profile-chart-grid { stroke: #334867; stroke-dasharray: 3 5; }
.profile-chart-area { fill: #244774; opacity: .5; }
.profile-chart-line { stroke: #78aaff; stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.profile-sp-chart circle { fill: #a2c5ff; stroke: #183353; }
.profile-sp-chart circle:last-of-type { fill: var(--orange); }
.profile-panel-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #26364d;
  color: #a6b7cf;
  font-size: 11px;
}
.profile-panel-footer strong { color: #dbe8ff; }
.profile-panel-footer a { color: #8db6ff; }
.profile-solo-rank { padding: 12px 14px 14px; }
.profile-solo-rank .elo-badge { color: #edf4ff; }
.profile-solo-rank .elo-badge img { width: 33px; height: 33px; }
.profile-solo-rank > small { display: block; margin-top: 4px; color: #a6b7cf; font-size: 11px; }
.profile-panel-empty, .profile-stats-footnote, .profile-source-note { color: #a6b7cf; font-size: 12px; line-height: 1.6; }
.profile-panel-empty { margin: 0; padding: 14px; }
.profile-champion-list { list-style: none; margin: 0; padding: 0; }
.profile-champion-list li + li { border-top: 1px solid #26364d; }
.profile-champion-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #eaf1fe;
  text-align: left;
}
.profile-champion-row:hover, .profile-champion-row[aria-pressed="true"] { background: #1b2b46; }
.profile-champion-row:focus-visible { outline-offset: -3px; }
.profile-champion-row .avatar { display: block; width: 34px; height: 34px; }
.profile-champion-name, .profile-champion-rate { display: grid; gap: 3px; font-size: 12px; }
.profile-champion-name small, .profile-champion-rate small { color: #a9b9ce; font-size: 10px; }
.profile-champion-rate { text-align: right; }
.profile-rival-list { list-style: none; margin: 0; padding: 0; }
.profile-rival-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: #d9e5f8;
  font-size: 11px;
}
.profile-rival-list li + li { border-top: 1px solid #26364d; }
.profile-rival-list .avatar, .profile-rival-placeholder { width: 28px; height: 28px; }
.profile-rival-placeholder { display: grid; place-items: center; border-radius: 5px; background: #1c2a40; color: #a9c9fb; }
.profile-rival-list li > span { overflow-wrap: anywhere; }
.profile-rival-list small { color: #acbbd0; white-space: nowrap; }

.profile-controls, .profile-filters { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.profile-controls { justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #26364d; }
.profile-controls select, .profile-match-heading select { width: auto; max-width: 100%; padding: 6px 8px; font-size: 11px; }
.profile-recent-stats { display: flex; align-items: center; gap: 16px; padding: 15px 14px 10px; }
.profile-winring {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(#5c95fd var(--winrate), var(--orange-strong) var(--winrate));
}
.profile-winring span {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #101824;
  color: #f4f7ff;
  font: 800 24px var(--font-display);
}
.profile-metrics { flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.profile-metrics > div { min-width: 0; }
.profile-metrics dt, .profile-metrics > div > small { color: #acbbd0; font-size: 10px; line-height: 1.4; }
.profile-metrics dd { margin: 5px 0 2px; color: #eff5ff; font-size: 17px; line-height: 1.25; }
.profile-form-strip { display: flex; flex-wrap: wrap; gap: 8px 11px; align-items: center; padding: 7px 14px 13px; }
.profile-form-strip > span { color: #a9b9d0; font-size: 11px; }
.profile-form-strip ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.profile-form-strip li { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 4px; font-size: 10px; }
.profile-form-strip .form-win { background: #1e385c; color: #b1ceff; }
.profile-form-strip .form-loss { background: var(--orange-panel); color: var(--orange); }
.profile-objectives {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid #26364d;
  font-size: 11px;
}
.profile-objectives > div { display: flex; gap: 7px; }
.profile-objectives dt { color: #a9b9d0; }
.profile-objectives dd { margin: 0; color: var(--orange); }
.profile-stats-footnote { margin: 0; padding: 0 14px 10px; }

.profile-match-section { container-type: inline-size; min-width: 0; }
.profile-match-heading { margin: 1px 0 9px; }
.profile-match-heading p { margin: 3px 0 0; color: #a6b7cf; font-size: 11px; }
.profile-active-filter { margin-bottom: 8px; border: 1px solid #385782; border-radius: 6px; padding: 5px 8px; background: #172945; color: #b9d1fc; font-size: 11px; }
.profile-show-more { display: flex; margin: 10px auto 0; }
.profile-show-more[hidden] { display: none; }
.profile-source-note { margin-top: 18px; }
#profile-performance, #profile-champions, #profile-matches { scroll-margin-top: 14px; }

@container (max-width: 680px) {
  .profile-match-section .match-summary { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) 34px; gap: 9px; padding-inline-start: 10px; }
  .profile-match-section .match-player-summary { gap: 5px; }
  .profile-match-section .match-quick-stats strong { font-size: 14px; }
  .profile-match-section .match-quick-stats > span { font-size: 9px; }
  .profile-match-section .match-objective { grid-row: 2; grid-column: 1; }
  .profile-match-section .match-rival { grid-row: 2; grid-column: 2; }
  .profile-match-section .match-expand { grid-row: 1 / 3; grid-column: 3; }
}

@media (max-width: 970px) {
  .profile-dashboard { grid-template-columns: minmax(0, 1fr); }
  .profile-side-column { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .profile-ranked-panel { grid-row: span 2; }
}
@media (max-width: 630px) {
  .profile-page { padding-top: 16px; }
  .profile-cover { min-height: 211px; }
  .profile-cover::before {
    background:
      linear-gradient(90deg, #101827 1%, #10182788 50%, #10182730),
      linear-gradient(0deg, #101827, transparent),
      var(--champion-art) 68% 12% / cover no-repeat;
  }
  .profile-cover-content { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .profile-avatar .avatar { width: 64px; height: 64px; }
  .profile-heading { flex: 1; }
  .profile-heading .eyebrow { font-size: 9px; letter-spacing: .4px; }
  .profile-cover-actions { margin: 4px 0 0; width: 100%; gap: 8px; }
  .profile-cover-actions .btn { flex: 1; padding: 9px 10px; font-size: 12px; }
  .profile-side-column { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .profile-ranked-panel { grid-row: auto; }
  .profile-sp-chart svg { max-height: 72px; }
  .profile-recent-stats { align-items: start; gap: 12px; }
  .profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-winring { width: 62px; height: 62px; }
  .profile-winring span { width: 48px; height: 48px; font-size: 22px; }
  .profile-metrics dd { font-size: 15px; }
  .profile-match-heading h2 { font-size: 14px; }
}