/* Page view: the player or champion profile popup expanded to fill the window (profiles/page-view.js).
   Chromium 108 renders this inside the League client: no color-mix(), CSS nesting or container queries. */

/* The close button and the expand / collapse button share the popup's top-right corner (page-view.js),
   aligned with its top edge like a window's title-bar buttons. The expand button matches the close
   button: bare glyph, text colour, gold on hover. */
.modal-corner-controls {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
}

.modal-corner-controls .close-comment,
.page-view-toggle {
  position: static;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-view-toggle {
  background: none;
  border: none;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
}

/* .is-hint-hover / .is-hint-press: the "Try the expanded view" hint is hovered or pressed (page-view.js) */
.page-view-toggle:hover,
.page-view-toggle.is-hint-hover {
  color: var(--primary-color);
}

/* Hovering slides the expand arrows apart and the collapse arrows together; the close cross grows
   to the spread arrows' size (their 16-unit box widens by 2.5 each side: 21 / 16). */
.page-view-toggle svg,
.modal-corner-controls .close-comment svg {
  width: 15px;
  height: 15px;
  overflow: visible;
}

.page-view-cross {
  transform-origin: 12px 12px;
  transition: transform 0.18s ease-out;
}

.modal-corner-controls .close-comment:hover .page-view-cross {
  transform: scale(1.3125);
}

.page-view-arrow {
  transition: transform 0.18s ease-out;
}

.page-view-toggle[aria-pressed="false"]:hover .page-view-arrow--top,
.page-view-toggle.is-hint-hover .page-view-arrow--top {
  transform: translate(2.5px, -2.5px);
}

.page-view-toggle[aria-pressed="false"]:hover .page-view-arrow--bottom,
.page-view-toggle.is-hint-hover .page-view-arrow--bottom {
  transform: translate(-2.5px, 2.5px);
}

.page-view-toggle[aria-pressed="true"]:hover .page-view-arrow--top {
  transform: translate(-2px, 2px);
}

.page-view-toggle[aria-pressed="true"]:hover .page-view-arrow--bottom {
  transform: translate(2px, -2px);
}

/* Pressing shrinks the glyph a little */
.page-view-toggle svg {
  transition: transform 0.1s ease-out;
}

.modal-corner-controls .close-comment svg {
  transition: transform 0.1s ease-out;
}

.page-view-toggle:active svg,
.page-view-toggle.is-hint-press svg,
.modal-corner-controls .close-comment:active svg {
  transform: scale(0.85);
}


@media (prefers-reduced-motion: reduce) {
  .page-view-arrow,
  .page-view-cross,
  .page-view-toggle svg,
  .modal-corner-controls .close-comment svg {
    transition: none;
  }
}

.page-view-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 0;
}

.page-view-toggle svg {
  width: 15px;
  height: 15px;
}

/* In the popup the name row runs beside the corner buttons: keep its badges out from under them */
.modal-corner-controls ~ .profile-modal-header .playername-container,
.modal-corner-controls ~ .profile-modal .profile-modal-header .playername-container {
  padding-right: 64px;
}

/* "Always open expanded": only on the expanded page */
.page-view-default-switch {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.page-view-default-switch:hover {
  color: var(--text-color);
}

.modal.modal-page-view .page-view-default-switch {
  display: inline-flex;
}

.page-view-default-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* A small on / off switch, shared with the account menu item */
.page-view-switch-track,
.login-menu-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease;
}

.page-view-switch-track::after,
.login-menu-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9d9d9;
  transition: transform 0.2s ease, background 0.2s ease;
}

.page-view-default-switch input:checked + .page-view-switch-track,
.login-menu-switch[aria-checked="true"] .login-menu-switch-track {
  background: rgba(215, 168, 78, 0.85);
}

.page-view-default-switch input:checked + .page-view-switch-track::after,
.login-menu-switch[aria-checked="true"] .login-menu-switch-track::after {
  transform: translateX(12px);
  background: #fff;
}

.page-view-default-switch input:focus-visible + .page-view-switch-track {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.login-menu-btn.login-menu-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  white-space: nowrap;
}

/* "Try the expanded view": a one-off callout under the expand button */
.page-view-hint {
  position: absolute;
  top: calc(100% + 9px);
  right: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  --hint-fill: #91413c;
  padding: 2px 2px 2px 3px;
  background: var(--hint-fill);
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 3px 8px var(--shadow-color);
  white-space: nowrap;
  animation: page-view-hint-in 0.25s ease-out;
}

/* The arrow points at the expand button; colours match the site's red notices (.leaderboard-notice) */
.page-view-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 34px;
  width: 9px;
  height: 9px;
  background: var(--hint-fill);
  transform: rotate(45deg);
}

.page-view-hint-try,
.page-view-hint-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.page-view-hint-try {
  padding: 5px 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.page-view-hint:hover {
  --hint-fill: #a04a44;
}

.page-view-hint-dismiss {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

.page-view-hint-dismiss:hover {
  background: rgba(0, 0, 0, 0.15);
}

.page-view-hint button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@keyframes page-view-hint-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The champion popup's stat tiles stay part of the stats row; on the page they become one strip */
.champion-modal-stat-tiles {
  display: contents;
}

/* The page */
.modal.modal-page-view {
  background: #0b0b0d;
}

.modal.modal-page-view .profile-modal-content {
  --page-gutter: 40px;
  /* Space above the header band */
  --page-band-top: 20px;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  max-height: none;
  padding: 0 var(--page-gutter) 48px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 70% 360px at 50% 0, rgba(215, 168, 78, 0.10), rgba(215, 168, 78, 0) 70%),
    #121214;
}

/* The band's top offset is padding, not margin, so it never collapses into the column and the corner
   buttons measure from the same top edge in the player and champion popups */
.modal.modal-page-view .profile-modal {
  max-width: 1640px;
  margin: 0 auto;
  padding-top: var(--page-band-top);
  position: relative;
}

/* The corner buttons sit in the header band's top-right corner, level with its top edge */
.modal.modal-page-view .modal-corner-controls {
  top: calc(var(--page-band-top) + 5px);
  right: 8px;
  z-index: 20;
}

/* The champion popup's controls sit outside the centred column: line them up with the column edge */
#champion-modal.modal-page-view .modal-corner-controls {
  right: calc(max(var(--page-gutter), (100% - 1640px) / 2) + 8px);
}

/* Header band: identity on the left, rank and crest on the right. The extra width goes to the name;
   the header keeps the popup's proportions, only slightly larger. */
.modal.modal-page-view .profile-modal-header {
  --page-header-pad-top: 14px;
  /* Room above the rank and crest for the corner buttons */
  --page-corner-clearance: 28px;
  margin: 0;
  padding: var(--page-header-pad-top) 18px 14px 24px;
  width: auto;
  background: linear-gradient(100deg, rgba(215, 168, 78, 0.09), rgba(255, 255, 255, 0.025) 55%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--primary-color);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 28px;
}

.modal.modal-page-view .profile-modal-header .playername-container {
  grid-column: 1;
  grid-row: 1;
  padding-right: 0;
}

.modal.modal-page-view .profile-modal-header-row {
  display: contents;
}

.modal.modal-page-view .profile-modal-header .playerinfo-container {
  grid-column: 1;
  grid-row: 2;
}

.modal.modal-page-view .profile-modal-header .header-right {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: var(--page-corner-clearance);
  gap: 16px;
  flex-wrap: nowrap;
}

/* Badge banners hang from the band's top edge, as they hang from the popup's top edge */
.modal.modal-page-view .profile-header-badges .player-badge {
  transform: translateY(calc(-1 * var(--page-header-pad-top)));
}

.modal.modal-page-view .profile-player-name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Narrower windows: the popup's name size, so long Riot IDs still fit on one line */
@media (max-width: 1279px) {
  .modal.modal-page-view .profile-player-name {
    font-size: 1.5rem;
  }
}

.modal.modal-page-view .champion-modal-header-icon {
  width: 48px;
  height: 48px;
}

.modal.modal-page-view .last-seen {
  font-size: 0.85rem;
}

.modal.modal-page-view .profile-league-icon {
  width: 52px;
  height: 52px;
}

.modal.modal-page-view .profile-league {
  font-size: 1rem;
  font-weight: 600;
}

.modal.modal-page-view .rank-box {
  font-size: 1.1rem;
}

.modal.modal-page-view .profile-rank-stats {
  padding-right: 16px;
}

/* Tabs stay in reach while the page scrolls; they keep the popup's size */
.modal.modal-page-view .profile-modal-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #121214;
  margin-bottom: 8px;
}

.modal.modal-page-view .tab-btn {
  padding: 16px 20px;
}

/* Overview: chart wide on the left, stats on the right, records across the page */
.modal.modal-page-view #overview .info-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 34%);
  gap: 28px 32px;
  align-items: start;
}

.modal.modal-page-view #overview .info-container-right {
  display: contents;
}

.modal.modal-page-view #overview .profile-chart-shell {
  grid-column: 1;
  grid-row: 1;
}

.modal.modal-page-view #overview .profile-info-wrapper {
  grid-column: 2;
  grid-row: 1;
}

.modal.modal-page-view #overview .season-achievements {
  grid-column: 1 / -1;
}

/* The stat tiles share the column width instead of keeping popup sizes */
.modal.modal-page-view #overview .info-box {
  flex: 1 1 70px;
  width: auto;
}

.modal.modal-page-view #overview .rect-tiles-wrapper,
.modal.modal-page-view #overview .profile-last-20-box,
.modal.modal-page-view #overview .champion-division-metric-toggle {
  max-width: none;
}

.modal.modal-page-view #overview .info-box-rect {
  flex: 1 1 200px;
  width: auto;
}

.modal.modal-page-view #profile-chart {
  max-width: 100%;
  height: 440px !important;
}

.modal.modal-page-view .champion-modal-chart-shell {
  min-height: 440px;
}

/* Champion overview: the stats in one strip, then the rating chart beside a full-size division chart */
#champion-modal.modal-page-view #overview .info-container {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "stats stats"
    "chart division";
  gap: 22px 28px;
  align-items: stretch;
}

#champion-modal.modal-page-view #overview .profile-info-wrapper {
  display: contents;
}

#champion-modal.modal-page-view .champion-modal-stat-tiles {
  grid-area: stats;
  display: flex;
  gap: 10px;
}

#champion-modal.modal-page-view .champion-modal-stat-tiles .profile-stats-help {
  display: none;
}

#champion-modal.modal-page-view .champion-modal-stat-tiles .rect-tiles-wrapper {
  display: contents;
}

#champion-modal.modal-page-view .champion-modal-stat-tiles .info-box {
  flex: 1 1 0;
  height: 76px;
}

#champion-modal.modal-page-view .champion-modal-stat-tiles .info-box-rect {
  flex: 1.6 1 0;
  height: 76px;
}

#champion-modal.modal-page-view #overview .profile-chart-shell {
  grid-area: chart;
}

#champion-modal.modal-page-view .champion-modal-division-box {
  grid-area: division;
  max-width: none;
  margin: 0;
  padding: 18px 22px 16px;
  gap: 12px;
  justify-content: space-between;
}

#champion-modal.modal-page-view .champion-modal-division-title {
  font-size: 1.05rem;
}

#champion-modal.modal-page-view .champion-modal-division-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Both charts grow with the window height, so the overview fills the first screen */
#champion-modal.modal-page-view .champion-division-bars-stage {
  height: clamp(220px, 100vh - 740px, 440px);
  margin-top: 18px;
}

#champion-modal.modal-page-view .champion-division-rating {
  font-size: 0.85rem;
}

#champion-modal.modal-page-view .champion-division-crests {
  min-height: 52px;
  padding-top: 6px;
}

#champion-modal.modal-page-view .champion-division-crest {
  width: 40px;
  height: 40px;
}

#champion-modal.modal-page-view .champion-division-legend {
  font-size: 0.78rem;
  gap: 18px;
}

#champion-modal.modal-page-view .champion-division-legend i {
  width: 18px;
}

#champion-modal.modal-page-view .profile-chart-mode-toggle.champion-division-metric-toggle {
  margin-top: 4px;
}

#champion-modal.modal-page-view .profile-chart-mode-btn.champion-division-metric-btn {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.5px;
}

#champion-modal.modal-page-view .champion-modal-chart-shell {
  min-height: clamp(380px, 100vh - 560px, 620px);
}

/* Records: two columns of high scores and past seasons once each column fits a full row.
   A high score row needs about 600px, so narrower page views keep one centred column. */
@media (min-width: 1680px) {
  .modal.modal-page-view .profile-high-scores,
  .modal.modal-page-view .season-achievements-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
    width: 100%;
  }

  .modal.modal-page-view .profile-high-score {
    grid-template-columns: minmax(130px, 1fr) 38px 32px minmax(74px, 100px) minmax(90px, 1fr) 104px;
  }

  .modal.modal-page-view .season-achievement-entry {
    width: 100%;
  }
}

/* The season and rank pickers float over the popup's top corner; on the page they get their own row */
.modal.modal-page-view .profile-champions-toolbar,
.modal.modal-page-view .champion-modal-data-toolbar {
  position: static;
  margin-bottom: 12px;
}

/* Performance by Division: the metric buttons use the panel width so their labels fit */
.modal.modal-page-view .profile-chart-mode-toggle.champion-division-metric-toggle {
  width: 100%;
}

.modal.modal-page-view .profile-chart-mode-btn.champion-division-metric-btn {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.2px;
}

/* Champion Data: more champion cards per row */
#profile-modal.modal-page-view .profile-modal-content {
  --items-per-view: 4;
}

@media (min-width: 1700px) {
  #profile-modal.modal-page-view .profile-modal-content {
    --items-per-view: 5;
  }
}

@media (max-width: 1250px) {
  #profile-modal.modal-page-view .profile-modal-content {
    --items-per-view: 3;
  }
}

@media (min-width: 1500px) {
  .modal.modal-page-view .champion-data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Match Data: match history beside the teammate and opponent tables */
@media (min-width: 1280px) {
  #profile-modal.modal-page-view #matches-data.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 30%);
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    align-items: start;
  }

  #profile-modal.modal-page-view #matches-data .match-history-table {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  #profile-modal.modal-page-view #matches-data .profile-pairs-table,
  #profile-modal.modal-page-view #matches-data .profile-synergy-table {
    grid-column: 2;
  }

  #profile-modal.modal-page-view #matches-data .chamption-table-container {
    flex-direction: column;
    gap: 20px;
  }

  #profile-modal.modal-page-view #matches-data .chamption-table-container .champion-items-table {
    width: 100%;
    margin-top: 0;
  }
}

/* Best Players: a readable list width, with room for the rank beside the badges */
#champion-modal.modal-page-view #best-players {
  max-width: 1180px;
  margin: 0 auto;
}

#champion-modal.modal-page-view .champion-modal-best-players {
  --leaderboard-rank-block-width: 150px;
}

/* Short windows (laptops): a slimmer header band leaves more room for the tab content */
@media (max-height: 820px) {
  .modal.modal-page-view .profile-modal-content {
    --page-band-top: 14px;
  }

  .modal.modal-page-view .profile-modal-header {
    --page-header-pad-top: 12px;
    padding-bottom: 12px;
  }

  .modal.modal-page-view .tab-btn {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* Small screens: the page keeps the popup's single column */
@media (max-width: 900px) {
  /* The corner buttons get their own strip above the band, which stacks into one column */
  .modal.modal-page-view .profile-modal-content {
    --page-gutter: 16px;
    --page-band-top: 42px;
  }

  .modal.modal-page-view .modal-corner-controls {
    top: 6px;
  }

  .modal.modal-page-view .profile-modal-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-page-view .profile-modal-header .header-right {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .modal.modal-page-view #overview .info-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-page-view #overview .profile-info-wrapper {
    grid-column: 1;
    grid-row: auto;
  }

  /* Champion overview: the stat strip wraps, and the division chart goes under the rating chart */
  #champion-modal.modal-page-view #overview .info-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stats"
      "chart"
      "division";
  }

  #champion-modal.modal-page-view .champion-modal-stat-tiles {
    flex-wrap: wrap;
  }

  #champion-modal.modal-page-view .champion-modal-stat-tiles .info-box {
    flex: 1 1 72px;
  }

  #champion-modal.modal-page-view .champion-modal-stat-tiles .info-box-rect {
    flex: 1 1 150px;
  }
}

/* Champion Match History (champion-match-history.js): the popup keeps the ArenaSweats TV columns;
   the page adds the rating change column and a wider, centred table. In the popup the column stays in the
   table at zero width (not display: none), so the expanded match row's colspan still matches the columns. */
#champion-modal:not(.modal-page-view) .champion-match-history col.champion-history-rating-col {
  width: 0;
}

#champion-modal:not(.modal-page-view) .champion-match-history .champion-history-rating-heading,
#champion-modal:not(.modal-page-view) .champion-match-history tbody > tr:not(.ranked-breakdown-row) > td:nth-child(6) {
  visibility: hidden;
  padding: 0 !important;
  border: 0;
  font-size: 0;
}

.champion-history-rating-col {
  width: 90px;
}

#champion-modal.modal-page-view #champion-matches {
  max-width: 1180px;
  margin: 0 auto;
}

#champion-modal.modal-page-view .champion-match-history .tv-vods-time-col {
  width: 150px;
}

#champion-modal.modal-page-view .champion-match-history .tv-vods-champion-col {
  width: 110px;
}

#champion-modal.modal-page-view .champion-match-history .tv-vods-place-col {
  width: 90px;
}

#champion-modal.modal-page-view .champion-match-history .tv-vods-opponents-col {
  width: 22%;
}