/* a champion page: header and panels; the live one is a second full screen below the draft board, the Champions
   tab's fills that tab */
.champ-view {
  --cp-gap: 12px;
  --cp-side: clamp(340px, 25vw, 460px);
  --cp-item: clamp(30px, 3.6vh, 34px);
  --cp-start: calc(var(--cp-item) - 6px);
  --cp-rune: clamp(26px, 3.7vh, 34px);
  --cp-keystone: calc(var(--cp-rune) + 8px);
  --cp-rune-gap: clamp(8px, 1.3vh, 12px);
  --cp-cell: clamp(18px, 2.4vh, 22px);
  --cp-chart: clamp(56px, 7vh, 68px);
  display: flex;
  flex-direction: column;
  gap: var(--cp-gap);
  overflow: hidden;
}
.champ-page {
  height: 100vh;
  padding: var(--space-6) var(--gap) var(--gap);
  border-top: 1px solid var(--line);
}
/* what to set before the game on the left, where the eye lands; the build for this game beside it; how the champion
   plays at the bottom, for the loading screen. Very short windows scroll the body instead of cutting panels off */
.cp-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--cp-side) minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr) auto auto;
  gap: var(--cp-gap);
  overflow-y: auto;
 
}
.cp-setup { grid-column: 1; grid-row: 1 / 3; --i: 0; }
.cp-items { grid-column: 2; grid-row: 1; --i: 1; }
.cp-skills { grid-column: 2; grid-row: 2; --i: 2; }
.cp-cards { grid-column: 1 / -1; grid-row: 3; --i: 3; }
/* the last champion's page stays, dimmed, until the next one's data arrives */
.cp-body.stale { opacity: .4; pointer-events: none; transition: opacity var(--dur-fast); }
.cp-notice { flex: 1; display: grid; place-items: center; text-align: center; color: var(--text-2); font: 500 16px/1.4 var(--font-ui); }
.cp-notice-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.cp-notice-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.cp-notice-choice { display: flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-6) 0 var(--space-2); border-radius: var(--radius-lg); border: 1px solid var(--line-slot); background: var(--bg-panel); color: var(--text-1); font: 600 14px/1 var(--font-ui); cursor: pointer; }
.cp-notice-choice:hover { border-color: var(--amber); }
.cp-notice-choice .pic { width: 32px; height: 32px; border-radius: var(--radius-md); }
.cp-notice-choice .role-svg { width: 18px; height: 18px; margin-left: 8px; }
.cp-notice-choice .num { margin-left: 4px; }

/* header */
.cp-head { flex: none; display: flex; align-items: center; gap: 18px; min-width: 0; }
.cp-portrait-wrap { position: relative; flex: none; border-radius: var(--radius-xl); overflow: hidden; }
.cp-portrait { flex: none; width: 52px; height: 52px; border-radius: var(--radius-xl); border: 1px solid var(--line-2); }
/* the client's lock-in plays here too when it happens while the page is open */
.cp-portrait-wrap.lock-in { overflow: visible; }
.cp-portrait-wrap.lock-in .cp-portrait { animation: lockin-pop var(--dur-lockin) var(--ease-snap) both; animation-delay: var(--lockin-delay); }
.cp-portrait-wrap.lock-in .cp-portrait::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 46%;
  background: linear-gradient(100deg, transparent, oklch(0.97 0.05 85 / .85), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  animation: lockin-shine var(--dur-lockin) var(--ease-sweep) both;
  animation-delay: var(--lockin-delay);
}
.cp-title { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cp-name { font: 700 28px/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
.cp-roles { flex-wrap: nowrap; }
.cp-roles .choice { height: 32px; }
@media (max-width: 1439px) { .cp-switch-champ.extra { display: none; } }
/* the draft's win rate first, then the champion's usual one, pick rate, and the size of the data */
.cp-head .stat.main { padding: 0 var(--gap); }
.cp-head .low-data { display: flex; color: var(--amber); cursor: default; }
.cp-head .low-data .ui-svg { width: 17px; height: 17px; }
/* the tier links back to the tier list */
.cp-tier-stat { text-decoration: none; color: inherit; cursor: pointer; }
.cp-tier-stat .stat-value { height: 18px; align-items: center; }
.cp-tier-stat:hover .tier { box-shadow: 0 0 0 1px var(--line-3); }
/* Riot changed the champion this patch: one chip to the patch page */
.cp-patch-chip { flex: none; display: inline-flex; align-items: center; gap: var(--space-3); height: 28px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line-2); color: var(--text-2); font: 600 12px/1 var(--font-ui); text-decoration: none; white-space: nowrap; }
.cp-patch-chip .ui-svg { width: 14px; height: 14px; }
.cp-patch-chip:hover { border-color: var(--amber); color: var(--amber); }
/* the page opened for a draft: its picks and the way back to the usual build */
.cp-draft { flex: none; display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid color-mix(in oklch, var(--amber) 50%, transparent); }
.cp-draft .sublabel { margin-right: var(--space-2); color: var(--amber); }
.cp-draft-pic { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.cp-draft-vs { font: 600 11px/1 var(--font-ui); color: var(--text-3); margin: 0 var(--space-1); }
.cp-draft-clear { display: grid; place-items: center; width: 22px; height: 22px; margin-left: var(--space-2); border-radius: var(--radius-sm); color: var(--text-3); }
.cp-draft-clear:hover { color: var(--text-1); background: var(--bg-raised); }
.cp-draft-clear .ui-svg { width: 12px; height: 12px; }
.cp-head .updating { margin-left: -8px; }
.cp-switch { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.cp-switch-label { font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-right: 2px; white-space: nowrap; }
.cp-switch-label + .cp-switch-champ { margin-left: 2px; }
.cp-switch-champ + .cp-switch-label { margin-left: 12px; }
.cp-switch-champ { flex: none; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-lg); border: 1px solid var(--line-slot); background: transparent; cursor: pointer; overflow: hidden; transition: transform .1s, border-color .1s; }
.cp-switch-champ .pic { width: 100%; height: 100%; }
.cp-switch-champ:hover { border-color: var(--line-3); transform: translateY(-1px); }
.cp-switch-champ.current { border-color: var(--text-2); box-shadow: 0 0 0 1px var(--text-2); }
.cp-back { flex: none; height: 30px; padding: 0 var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--line-2); background: var(--bg-panel); color: var(--text-1); font: 600 12px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.cp-back:hover { border-color: var(--amber); color: var(--amber); }
.cp-back kbd { margin-left: 6px; font: 500 10px var(--font-mono); color: var(--text-3); }

.panel .rune-import { margin-top: 0; height: 24px; padding: 0 var(--space-5); }
.panel .rune-import:disabled { opacity: 1; color: var(--text-4); border-color: var(--line-slot); }
.cp-arrow { flex: none; color: var(--text-4); font: 600 14px/1 var(--font-ui); }
.cp-icon { flex: none; width: var(--cp-item); height: var(--cp-item); border-radius: var(--radius-md); border: 1px solid var(--line-slot); transition: transform .1s; }
.champ-view [data-tip]:hover > .cp-icon { transform: translateY(-1px); }
/* little data: a dashed frame and softer numbers; still readable, since the most bought item can have few games */
.low .cp-icon { border-style: dashed; border-color: var(--line-3); }
.low img, .low .cp-chart-bar { opacity: .8; }
.low .num, .low .num *, .low .cp-chart-value, .low .cp-tab-name { color: var(--text-2) !important; }


/* the item the build takes, framed like the build bar's pick */
.in-build > [data-tip] > .cp-icon, .in-build > .cp-icon-wrap > [data-tip] > .cp-icon { border-color: var(--amber); box-shadow: var(--ring-amber); }
.in-build .num b { color: var(--amber); }
.cp-icon-wrap { position: relative; flex: none; }
.cp-icon-wrap .inv-chips { top: -6px; right: -4px; }
.cp-icon-wrap .inv-chip { box-shadow: 0 0 0 1.5px var(--bg-panel); }

/* what the draft just changed: the new item flashes like a lock-in and names the one it replaced */
.cp-changed .cp-icon { animation: lockin-pop var(--dur-lockin) var(--ease-snap) both; animation-delay: var(--cp-change-t); }
.cp-was { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; max-width: 150px; padding: 3px var(--space-3); border-radius: var(--radius-sm); border: 1px solid color-mix(in oklch, var(--amber) 60%, transparent); background: var(--bg-raised); overflow: hidden; text-overflow: ellipsis; font: 600 10px/1 var(--font-ui); color: var(--amber); white-space: nowrap; pointer-events: none; animation: move-fade 2.6s ease-out both; animation-delay: var(--cp-change-t); }

/* cards */
.cp-cards .panel-head { gap: 14px; }
.cp-card-row { flex: 1; min-height: 0; display: flex; gap: var(--space-5); }
.cp-card { flex: 1.3 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr); column-gap: var(--space-8); align-items: center; padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg); background: var(--bg-bar); }
.cp-card-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cp-card-side { font: 700 24px/1 var(--font-display); letter-spacing: .02em; color: var(--text-1); }
.cp-card-side.mixed, .cp-card-side.lean { color: var(--text-2); }
.cp-card-text { font: 500 13px/1.4 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.cp-card-text b { color: var(--text-1); font-weight: 700; }
.cp-styles { flex: 3 1 0; min-width: 0; display: flex; gap: var(--space-5); }
.cp-styles > .cp-style, .cp-styles > .cp-ghost { flex: 1 1 0; }
.cp-style { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) 14px; border-radius: var(--radius-lg); background: var(--bg-bar); cursor: default; }
.cp-style-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-style .cp-card-side { font-size: 22px; }
.cp-style-gain { font: 500 13px/1.3 var(--font-ui); color: var(--text-3); text-wrap: pretty; }
.cp-style-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 500 13px/1.35 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.cp-style-gain span { font: 600 12px/1 var(--font-mono); margin-right: 2px; }
.cp-glyph { flex: none; width: 44px; height: 44px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--bg-chip); color: var(--text-1); }
.cp-glyph.mixed { color: var(--text-3); }
.cp-glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* on the page the glyph sits on the card's label line, so the text gets the card's full width */
.cp-cards .cp-style { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: start; column-gap: var(--space-4); row-gap: var(--space-3); }
.cp-cards .cp-style-copy { display: contents; }
.cp-cards .cp-style-copy > * { grid-column: 1 / -1; }
.cp-cards .cp-style-copy > .sublabel { grid-column: 2; grid-row: 1; align-self: center; }
.cp-cards .cp-glyph { grid-row: 1; width: 26px; height: 26px; border-radius: var(--radius-md); }
.cp-cards .cp-glyph svg { width: 17px; height: 17px; }
@media (max-width: 1439px) {
  .cp-style { gap: var(--space-5); padding: var(--space-5) var(--space-6); }
  .cp-glyph { width: 36px; height: 36px; border-radius: var(--radius-lg); }
  .cp-glyph svg { width: 22px; height: 22px; }
}
.cp-ghost { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: var(--space-6) 14px; border: 1px dashed var(--line-soft); border-radius: var(--radius-lg); }
.cp-ghost-name { font: 600 14px/1.1 var(--font-ui); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ghost .sublabel { color: var(--text-3); }
/* the cards without a clear side share one quiet box: their titles, the numbers in the hover */
.cp-style-none { flex: .7 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--space-6) 14px; border: 1px dashed var(--line-soft); border-radius: var(--radius-lg); cursor: default; }
.cp-style-none .sublabel { color: var(--text-3); }
.cp-style-none-list { font: 500 13px/1.3 var(--font-ui); color: var(--text-2); text-wrap: pretty; }

/* power chart: HTML so its text keeps a fixed size */
.cp-chart { display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr)); grid-template-rows: var(--cp-chart) auto; column-gap: var(--space-4); }
.cp-chart-axis { position: relative; }
.cp-chart-axis span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 500 10px/1 var(--font-mono); color: var(--text-3); }
.cp-chart-col { position: relative; cursor: default; }
.cp-chart-col::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; border-top: 1px solid var(--line-2); }
.cp-chart-bar { position: absolute; left: 50%; width: min(40px, 60%); translate: -50% 0; border-radius: var(--radius-xs); }
.cp-chart-bar.pos { background: var(--pos); transform-origin: bottom; }
.cp-chart-bar.neg { background: var(--neg); transform-origin: top; }
.cp-chart-value { position: absolute; left: -4px; right: -4px; text-align: center; font: 600 12px/1 var(--font-mono); color: var(--text-1); white-space: nowrap; }
.cp-chart-label.cp-chart-unit { text-align: right; color: var(--text-3); }
.cp-chart-label { padding-top: var(--space-3); text-align: center; font: 500 11px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }

/* items: the build path on top, then the options for every later slot */
.cp-item-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.cp-path { flex: none; display: flex; align-items: flex-start; min-width: 0; padding-top: var(--space-2); }
.cp-path-group { flex: none; display: flex; flex-direction: column; gap: var(--space-4); }
.cp-path-group + .cp-path-group { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--line-slot); }
.cp-start-row { display: flex; align-items: center; gap: var(--space-5); }
.cp-start-row .cp-icon { width: var(--cp-start); height: var(--cp-start); }
.cp-icons { display: flex; gap: 3px; }
.cp-path-line { display: flex; align-items: flex-start; gap: var(--space-3); }
.cp-path-line .cp-arrow { height: var(--cp-item); display: flex; align-items: center; }
.cp-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cp-stack .num { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cp-stack .num b { margin: 0; }
.cp-slots { flex: 1; min-height: 0; display: flex; padding-top: 14px; border-top: 1px solid var(--line-slot); overflow: hidden; }
.cp-slot { flex: 0 1 210px; min-width: 128px; display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-7); }
.cp-slot:first-child { padding-left: 0; }
.cp-slot + .cp-slot { border-left: 1px solid var(--line-slot); }
.cp-slot-head { display: flex; align-items: baseline; gap: var(--space-4); cursor: default; }
.cp-slot-unit { margin-left: auto; font: 500 10px/1 var(--font-ui); color: var(--text-4); white-space: nowrap; }
.cp-slot-head .few-mark { display: inline-flex; color: var(--text-3); }
.cp-slot-head .few-mark .ui-svg { width: 12px; height: 12px; }
.cp-option { position: relative; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.cp-option-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-path-group[hidden], .cp-slot[hidden], .cp-option[hidden], .cp-start-row[hidden], .cp-stack[hidden], .cp-spell-row[hidden] { display: none; }

/* runes and spells: what to set before the game, the page for this game marked like on the board */
.cp-setup { gap: var(--space-5); }
.cp-tabs { flex: none; display: flex; gap: var(--space-3); }
.cp-tab { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line-slot); background: transparent; color: var(--text-1); cursor: pointer; text-align: left; overflow: hidden; transition: border-color var(--dur-fast), background var(--dur-fast); }
.cp-tab:hover { border-color: var(--line-3); }
.cp-tab.current { border-color: var(--line-3); background: var(--bg-raised-2); }
.cp-tab.best { border-color: var(--amber); box-shadow: var(--glow-amber); }
.cp-tab.best .num b { color: var(--amber); }
.cp-tab-icon { position: relative; flex: none; display: flex; }
.cp-tab .pic { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.cp-tab .best-star { left: -4px; top: -4px; width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--bg-panel); }
.cp-tab .best-star svg { width: 9px; height: 9px; }
.cp-tab-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; container-type: inline-size; }
/* a narrow tab keeps the numbers and drops the keystone's name (the icon and the hover still name it): the win rate is
   the part a cut would have taken */
/* still too narrow for "47% 49.6%" on one line: the win rate goes under the pick rate */
@container (max-width: 92px) { .cp-tab-name { display: none; } }
@container (max-width: 72px) { .cp-tab-text .num { display: flex; flex-direction: column; gap: 2px; } .cp-tab-text .num b { margin: 0 !important; } }
.cp-tab.single { cursor: default; flex: none; min-width: 180px; }
.cp-tab.single:hover { border-color: var(--line-slot); }
.cp-tab-text .num { overflow: hidden; text-overflow: ellipsis; }
.cp-tab-name { font: 600 13px/1.1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* three pages keep their names, a little smaller */
.cp-tabs:has(.cp-tab:nth-child(3)) .cp-tab { gap: var(--space-3); padding: 5px var(--space-3); }
.cp-tabs:has(.cp-tab:nth-child(3)) .cp-tab .pic { width: 22px; height: 22px; }
.cp-tabs:has(.cp-tab:nth-child(3)) .cp-tab-name { font-size: 12px; }
.cp-tabs:has(.cp-tab:nth-child(3)) .num b { margin-right: 4px; }
/* the page this game recommends locks in like a pick when the page arrives */
.champ-view .cp-enter .cp-tab.best { animation: lockin-pop var(--dur-lockin) var(--ease-snap) backwards; animation-delay: calc(var(--cp-t) + 250ms); }
.champ-view .cp-enter .cp-tab.best::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 30%;
  background: linear-gradient(100deg, transparent, oklch(0.97 0.05 85 / .5), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  animation: lockin-shine var(--dur-lockin) var(--ease-sweep) both;
  animation-delay: calc(var(--cp-t) + 250ms);
}
/* the one filled amber button on the page: the import is what the player came for */
.cp-import { flex: none; display: flex; flex-direction: column; gap: var(--space-3); }
.panel .cp-import .rune-import { width: 100%; height: 32px; margin: 0; font-size: 12px; }
.panel .cp-import .rune-import:not(:disabled):not(.done):not(.failed) { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.panel .cp-import .rune-import:not(:disabled):not(.done):not(.failed):hover { filter: brightness(1.08); color: var(--on-amber); }
.cp-trees { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: space-evenly; row-gap: var(--cp-rune-gap); column-gap: var(--space-6); }
.cp-tree-name { display: flex; align-items: center; justify-content: center; gap: var(--space-3); font: 600 13px/1 var(--font-ui); color: var(--text-2); }
.cp-tree-name .pic { width: 20px; height: 20px; border-radius: 50%; }
.cp-rune-row { display: flex; justify-content: center; align-items: center; gap: calc(var(--cp-rune) / 4); }
.cp-rune { width: var(--cp-rune); height: var(--cp-rune); border-radius: 50%; opacity: .3; filter: grayscale(1); }
.cp-rune.keystone { width: var(--cp-keystone); height: var(--cp-keystone); }
/* four keystones (Precision) fit their tree's column a little smaller; whatever is left over spills into the empty
   cell on the right, never past the panel's left edge */
.cp-rune-row.keystones { justify-self: start; min-width: 100%; }
.cp-rune-row.keystones:has(> :nth-child(4)) { gap: 3px; }
.cp-rune-row.keystones:has(> :nth-child(4)) .cp-rune.keystone { width: calc(var(--cp-keystone) - 6px); height: calc(var(--cp-keystone) - 6px); }
.cp-rune.on { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--amber); }
/* switching tabs: runes the new page adds pop in, runes it drops fade out; shared ones stay still */
.cp-rune.turned-on { animation: cp-rune-on .28s var(--ease-out) both; animation-delay: var(--cp-tab-t); }
.cp-rune.turned-off { animation: cp-rune-off var(--dur-base) ease-out both; animation-delay: var(--cp-tab-t); }
@keyframes cp-rune-on { from { scale: .8; box-shadow: 0 0 0 6px oklch(0.93 0.13 100 / 0), 0 0 14px 4px oklch(0.85 0.12 85 / .5); } }
@keyframes cp-rune-off { from { opacity: 1; filter: none; } }
/* the three shard rows side by side, one group each */
.cp-shards { grid-column: 1 / -1; display: flex; justify-content: center; gap: var(--space-7); }
.cp-shard-col { display: flex; gap: 3px; }
.cp-shard { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-soft); cursor: default; }
.cp-shard img { width: 17px; height: 17px; opacity: .35; filter: grayscale(.6); }
.cp-shard.on { border-color: var(--line-3); background: var(--bg-chip); }
.cp-shard.on img { opacity: 1; filter: none; }
.cp-spells { flex: none; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line-slot); }
.cp-spell-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.cp-spell-row { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.cp-spell-row .cp-icons { gap: var(--space-2); }
.cp-spell-row .rune-import { margin: 0; height: 26px; }
.cp-spell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* ability order: the start and the max order in words, the full path as a quiet grid */
.cp-skill-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 22px; }
.cp-skill-side { flex: none; display: grid; grid-template-columns: auto auto; align-items: center; gap: 9px var(--space-5); }
.cp-skill-priority { display: flex; align-items: center; gap: var(--space-3); }
.cp-skill-start { display: flex; gap: var(--space-2); }
.cp-skill-start b { width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--amber); color: var(--on-amber); font: 700 11px/1 var(--font-mono); }
.cp-skill-key { position: relative; flex: none; }
.cp-skill-key .cp-icon { width: 28px; height: 28px; }
.cp-skill-key b { position: absolute; right: -4px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 var(--space-1); border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--bg-app); border: 1px solid var(--line-2); font: 700 10px/1 var(--font-mono); color: var(--text-1); }
.cp-skill-stats { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-2); }
.cp-skill-alt { font: 500 12px/1.2 var(--font-ui); color: var(--text-3); white-space: nowrap; }
.cp-skill-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px repeat(18, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cp-skill-row-key { display: flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font-mono); color: var(--text-2); }
.cp-skill-row-key .pic { width: 20px; height: 20px; border-radius: var(--radius-sm); }
.cp-skill-cell { height: var(--cp-cell); border-radius: var(--radius-sm); background: var(--bg-raised-2); display: grid; place-items: center; font: 700 10px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); }
.cp-skill-cell.on { background: color-mix(in oklch, var(--amber) 22%, var(--bg-raised-2)); }
.cp-skill-cell.ult.on { background: color-mix(in oklch, var(--text-1) 16%, var(--bg-raised-2)); }
.cp-skill-cell.on.early { background: var(--amber); color: var(--on-amber); }

/* the page arriving: panels rise in turn, bars grow from the 50% line, the skill path fills level by level */
.champ-view .cp-enter > .panel { animation: cp-rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--cp-t) + var(--i) * var(--stagger)); }
.champ-view .cp-enter .cp-chart-bar { animation: cp-bar var(--dur-count) var(--ease-out) both; animation-delay: calc(var(--cp-t) + 160ms + var(--col) * 60ms); }
.champ-view .cp-enter .cp-chart-value { animation: cp-fade var(--dur-base) ease-out both; animation-delay: calc(var(--cp-t) + 340ms + var(--col) * 60ms); }
.champ-view .cp-enter .cp-skill-cell.on { animation: cp-cell .18s ease-out both; animation-delay: calc(var(--cp-t) + var(--dur-base) + var(--lvl) * 18ms); }
@keyframes cp-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes cp-bar { from { scale: 1 0; } }
@keyframes cp-fade { from { opacity: 0; } }
@keyframes cp-cell { from { opacity: 0; scale: .8; } }

@media (max-width: 1439px) {
  .champ-view { --cp-side: 340px; }
  .stat-row { gap: var(--space-7); }
  .cp-skill-grid { gap: 3px var(--space-1); grid-template-columns: 36px repeat(18, minmax(0, 1fr)); }
  .cp-skill-cell { font-size: 9px; }
}
@media (max-width: 1199px) {
  .champ-view { --cp-gap: 8px; --panel-pad: 10px 12px 12px; --cp-side: 300px; --cp-item: 28px; --cp-rune: 24px; --cp-keystone: 30px; --cp-rune-gap: 6px; --cp-cell: 16px; --cp-chart: 52px; padding-top: var(--space-4); }
  .cp-head { gap: 14px; }
  .cp-portrait { width: 44px; height: 44px; }
  .cp-name { font-size: 24px; }
  .stat-row { gap: var(--space-6); padding-left: 14px; }
  .stat.main .stat-value { font-size: 19px; }
  .stat-value { font-size: 15px; }
  .cp-switch-label { display: none; }
  .cp-switch-champ { width: 30px; height: 30px; }
  .panel { gap: var(--space-4); }
  .panel-head { height: 22px; }
  .cp-card { grid-template-columns: auto minmax(150px, 1fr); padding: var(--space-4) var(--space-6); }
  .champ-view .cp-card-text { display: none; }
  .cp-card-side { font-size: 22px; }
  .cp-styles { gap: var(--space-3); }
  .cp-ghost, .cp-style { padding: var(--space-3) var(--space-5); gap: var(--space-2); }
  .cp-style .cp-card-side { font-size: 18px; }
  .cp-ghost-name { font-size: 13px; }
  .cp-item-body { gap: var(--space-5); }
  .cp-path-group + .cp-path-group { margin-left: 14px; padding-left: 14px; }
  .cp-slots { padding-top: var(--space-5); }
  .cp-slot { min-width: 108px; padding: 0 var(--space-6); gap: var(--space-3); }
  .cp-option { gap: var(--space-4); }
  .cp-tab .pic { width: 24px; height: 24px; }
  .cp-tab { padding: var(--space-2) var(--space-3); }
  .cp-spell-rows { gap: var(--space-3); }
  .cp-skill-grid { grid-template-columns: 32px repeat(18, minmax(0, 1fr)); }
  .cp-skill-row-key .pic { width: 16px; height: 16px; }
  .cp-skill-body { gap: 14px; }
}
/* short screens: smaller runes and cells, and the cards drop their sentences (the hover still has them) */
@media (max-height: 820px) {
  .champ-view { --cp-rune: 22px; --cp-keystone: 28px; --cp-rune-gap: 5px; --cp-cell: 16px; --cp-chart: 50px; --cp-item: 28px; }
  .panel .cp-import .rune-import { height: 28px; }
  .cp-tree-name .pic { width: 16px; height: 16px; }
  .cp-spell-rows { gap: var(--space-3); }
  .champ-view .cp-card-text, .champ-view .cp-cards .cp-style-text { display: none; }
  .cp-card, .cp-style, .cp-ghost { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .cp-setup { gap: var(--space-4); }
  .cp-tab { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .cp-tab .pic { width: 24px; height: 24px; }
  .cp-shard { width: 22px; height: 22px; }
  .cp-shard img { width: 15px; height: 15px; }
  .cp-skill-key .cp-icon { width: 24px; height: 24px; }
  .cp-skill-row-key .pic { width: 16px; height: 16px; }
}
/* tall screens get the same layout scaled up instead of icons floating in empty panels */
@media (min-width: 1600px) and (min-height: 1000px) { .champ-page { zoom: 1.15; height: calc(100vh / 1.15); } }
@media (min-width: 1880px) and (min-height: 1000px) { .champ-page { zoom: 1.25; height: calc(100vh / 1.25); } }
@media (min-width: 2200px) and (min-height: 1300px) { .champ-page { zoom: 1.5; height: calc(100vh / 1.5); } }
.cp-switch-sep { width: 1px; height: 24px; margin: 0 var(--space-3); background: var(--line-slot); }

/* the Champions tab's hero: splash art bleeding to the window's edges behind the page column, fading into the page */
.cp-hero { position: relative; isolation: isolate; flex: none; display: flex; align-items: flex-end; gap: var(--space-8); min-height: 216px; padding: var(--space-9) 0 var(--space-6); }
.cp-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-9));
  bottom: -40px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--splash) right 30% top 18% / min(1500px, 105vw) auto no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 55%), linear-gradient(0deg, transparent, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 12%, #000 55%), linear-gradient(0deg, transparent, #000 45%);
  mask-composite: intersect;
  pointer-events: none;
  animation: cp-splash-in 700ms var(--ease-out) both;
}
@keyframes cp-splash-in { from { opacity: 0; scale: 1.04; } }
.cp-hero .cp-portrait { width: 88px; height: 88px; border-radius: var(--radius-xl); border: 1px solid color-mix(in oklch, var(--amber) 45%, transparent); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .8); }
.cp-hero .cp-title { gap: var(--space-4); }
.cp-hero .cp-name { margin: 0; font: 700 var(--fs-hero)/.95 var(--font-display); letter-spacing: .01em; text-shadow: 0 2px 20px rgb(0 0 0 / .6); }
.cp-hero .cp-back { align-self: flex-end; }
/* the numbers as one strip of equal cells */
.cp-strip { flex: none; }
.cp-strip .stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 0; padding: var(--space-6) 0; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: color-mix(in oklch, var(--surface-1) 85%, transparent); backdrop-filter: blur(6px); box-shadow: var(--edge-light); }
.cp-strip .stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); border-left: 1px solid var(--hairline); }
.cp-strip .stat:first-child { border-left: 0; }
.cp-strip .stat-value { font-size: var(--fs-xl); }
.cp-strip .stat.main { padding: 0 var(--space-6); }
.champions-page { --cp-gap: var(--space-7); }

/* ---------- Champions tab: sizes that don't follow the window height, since this page scrolls ---------- */
.champ-view.champions-page { --cp-item: 34px; --cp-rune: 32px; --cp-keystone: 42px; --cp-rune-gap: 10px; --cp-cell: 22px; --cp-chart: 64px; gap: var(--space-9); }
.champions-page .cp-hero { min-height: 260px; padding: var(--space-10) 0 var(--space-4); gap: var(--space-9); }
.champions-page .cp-hero::before { opacity: .62; }
.champions-page .cp-hero .cp-portrait-wrap { overflow: visible; align-self: flex-end; margin-bottom: var(--space-2); }
.champions-page .cp-hero .cp-portrait { width: 104px; height: 104px; border: 2px solid var(--tier, var(--amber)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--tier, var(--amber)) 18%, transparent), 0 0 32px -6px color-mix(in oklch, var(--tier, var(--amber)) 60%, transparent), 0 12px 30px -10px rgb(0 0 0 / .8); }
.cp-portrait-tier { position: absolute; right: -10px; bottom: -10px; display: flex; border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--surface-0); }
.cp-portrait-tier .tier { width: 30px; height: 30px; font-size: var(--fs-lg); }
.cp-portrait-tier .tier[class*="tier-"]:not(.tier-splus) { background: color-mix(in oklch, var(--tier) 28%, var(--surface-0)); }
.champions-page .cp-hero .cp-name { font-size: var(--fs-hero); }
.cp-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); }
.cp-hero-abilities { display: flex; align-items: center; gap: var(--space-4); padding-left: var(--space-8); border-left: 1px solid var(--hairline-strong); }
.cp-hero-ability { position: relative; display: flex; }
.cp-hero-ability .pic { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--line-slot); box-shadow: 0 4px 12px -4px rgb(0 0 0 / .8); transition: transform var(--dur-fast) var(--ease-out); }
.cp-hero-ability:hover .pic { transform: translateY(-2px); }
.cp-hero-ability.first .pic { border-color: var(--amber); box-shadow: var(--ring-amber); }
.cp-hero-ability b { position: absolute; right: -4px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 var(--space-1); border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-0); border: 1px solid var(--line-2); font: 700 10px/1 var(--font-mono); color: var(--text-1); }
.cp-hero-ability.first b { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.cp-hero-side { flex: none; align-self: flex-end; display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-2); }
.champions-page .cp-hero .cp-back { height: 36px; padding: 0 var(--space-7); border-radius: var(--radius-md); border: 1px solid var(--hairline-strong); background: color-mix(in oklch, var(--surface-2) 80%, transparent); backdrop-filter: blur(6px); font: 500 var(--fs-md)/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-1); transition: border-color var(--dur-fast), color var(--dur-fast); }
.champions-page .cp-hero .cp-back:hover { border-color: var(--amber); color: var(--amber); }

/* the stat strip: big mono numbers, a rank with its own bar */
.champions-page .cp-strip .stat-row { padding: var(--space-7) 0; }
.champions-page .cp-strip .stat { gap: var(--space-4); text-decoration: none; color: inherit; }
.champions-page .cp-strip .stat-value { font-size: var(--fs-xl); height: 24px; align-items: center; }
.champions-page .cp-strip .stat.main .stat-value { font-size: var(--fs-2xl); height: 24px; }
.champions-page .cp-strip a.stat:hover .stat-value { color: var(--amber); }
.cp-rank-stat .stat-value small { margin-left: 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.cp-rank-bar { position: relative; width: 56px; height: 3px; margin-top: calc(-1 * var(--space-2)); border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.cp-rank-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: inherit; background: var(--amber); }
.champions-page .cp-strip .cp-tier-stat .tier { width: 28px; height: 28px; font-size: var(--fs-md); }

/* panels on this page are as tall as their content */
.champions-page .cp-card-row { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .champions-page .cp-hero { flex-wrap: wrap; }
  .cp-hero-abilities { padding-left: 0; border-left: 0; }
}
.champions-page .cp-card { flex: 1.3 1 360px; }
.champions-page .cp-styles { flex: 1 1 360px; }
.champions-page .cp-notice { flex: none; display: grid; place-items: center; padding: var(--space-10) var(--space-7); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 40%), var(--surface-1); box-shadow: var(--edge-light); }
.champions-page .cp-notice-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); font: 500 var(--fs-lg)/1.4 var(--font-ui); color: var(--text-1); text-align: center; }