/* 2026-10 refresh of the Angular pickers (/counterpick and /herocounter): the look of the home and
   player pages (playerstats.css colours). Loaded after the page's own CSS and scoped to .cpx (the
   ng-app wrapper). Only colours, borders, radii and fonts: no layout sizes, because the pickers
   compute heights, scroll areas and sprite positions from the existing ones. */
.cpx { --cp-card: #141414; --cp-card-2: #1b1b1b; --cp-line: #2c2c2c; --cp-text: #e2e2e2; --cp-muted: #8d8d8d; --cp-accent: #2a9fd6; --cp-bad: #e0533f; color: var(--cp-text); }

/* buttons and the skill-level box: flat, rounded, instead of the border images */
.cpx .btn-picker, .cpx .btn-picker-pushed, .cpx .btn-picker-prs, .cpx .input-group-picker:not(.searchBox) {
	border: 1px solid #333; border-image: none; border-radius: 6px; background-color: var(--cp-card-2); color: var(--cp-text);
	transition: border-color .15s ease, color .15s ease;
}
.cpx .btn-picker:hover, .cpx .btn-picker-prs:hover, .cpx .btn-picker-pushed:hover { border-image: none; border-color: var(--cp-accent); color: #fff; }
.cpx .btn-picker-pushed { border-color: var(--cp-accent); color: var(--cp-accent); }
.cpx .input-group-picker:not(.searchBox) { overflow: hidden; }
.cpx .input-group-addon-picker { color: var(--cp-muted); }
.cpx .input-group-addon-picker-brright { border-right: 1px solid #333 !important; }
.cpx .form-control-picker, .cpx .input-group-picker select { color: var(--cp-text); background-color: transparent; }
.cpx .form-control-picker option { background-color: var(--cp-card-2); }

/* search box */
.cpx .input-group-picker.searchBox { border-image: none; border: 0; }
.cpx #setautofocus { background: var(--cp-card-2); border: 1px solid #333; border-radius: 6px; color: var(--cp-text); box-shadow: none; }
.cpx #setautofocus:focus { border-color: var(--cp-accent); }
.cpx .btn-picker-noborder { color: var(--cp-muted); }
.cpx .btn-picker-noborder:hover { color: #fff; }

/* hero list on the left */
.cpx .searchImgBig { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow .15s ease, filter .15s ease; cursor: pointer; }
.cpx .searchImgBig:hover { box-shadow: inset 0 0 0 2px var(--cp-bad); filter: brightness(1.08); }
.cpx .searchImgBigText { background-color: rgba(0, 0, 0, .7); padding: 1px 6px; border-radius: 3px; font-size: 13px; }
.cpx .btn-pickerenemy { border: 0; border-image: none; border-radius: 4px; background: rgba(224, 83, 63, .9); color: #fff; padding: 2px 8px; }
.cpx .somethingPickBgLight { border-radius: 6px; }

/* intro card (no hero chosen yet) */
.cpx .noSelectionBox > div { background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: 8px; padding: 20px 6px; margin: 0 20px; }
.cpx .noSelectionBox h1 { font-size: 24px; font-weight: 600; color: #fff; margin-top: 0; }
.cpx .noSelectionBoxParagraph { text-indent: 0; color: #c4c4c4; line-height: 1.6; }
.cpx .noSelectionBox a { color: var(--cp-accent); }

/* chosen enemies and the suggestions */
/* /counterpick (.cpx-cp) only: every chosen hero there is an enemy, clicking one removes it */
.cpx-cp .heroSelectedBothImg { border-radius: 6px; box-shadow: 0 0 0 2px rgba(224, 83, 63, .75); transition: opacity .15s ease; }
.cpx-cp .heroSelectedBothImg:hover { opacity: .6; }
.cpx .heroSelectText { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--cp-muted); padding: 0 4px 4px; }
.cpx .heroSelectSelfContainerCU { border-top: 0; border-radius: 6px; margin-bottom: 3px; box-shadow: inset 0 0 0 1px #222; }
.cpx .heroSelectSelfContainerImgCUCoreUtil { border-radius: 4px; }

/* typography: a system font stack, smoother rendering and clearer hierarchy */
.cpx { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cpx-muted { color: var(--cp-muted); }
.cpx-chip { display: inline-block; padding: 2px 10px; border-radius: 10px; background: rgba(42, 159, 214, .15); color: var(--cp-accent); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.cpx-start { display: flex; align-items: center; gap: 14px; text-align: left; margin: 14px 0 6px; padding: 12px 16px; border-radius: 6px; background: var(--cp-card-2); border-left: 3px solid var(--cp-accent); font-size: 14.5px; line-height: 1.55; }
.cpx-start .fa { font-size: 26px; color: var(--cp-accent); }
.cpx-start b { color: #fff; font-weight: 600; }
.cpx .noSelectionBox h1 { font-size: 21px; letter-spacing: .2px; padding-bottom: 8px; border-bottom: 1px solid var(--cp-line); }
.cpx .noSelectionBoxParagraph { font-size: 14.5px; margin-bottom: 12px; }
.cpx .noSelectionBoxParagraph b { color: #fff; font-weight: 600; }
.cpx-heading { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: .2px; }
.cpx-hero { font-size: 14.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cpx-score { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 9px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .45); color: #a9cf54; }
.cpx-score-neg { color: #ff8a78; }
.cpx .searchImgBigText { font-weight: 600; }

/* left hero list: no horizontal scrollbar (the 175px rows plus the vertical scrollbar overflowed
   the 180px inside the column; the 160px images still fit), thin dark vertical scrollbar */
.cpx .searchContainer { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.cpx .searchContainer::-webkit-scrollbar { width: 8px; }
.cpx .searchContainer::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
.cpx .searchContainer::-webkit-scrollbar-track { background: transparent; }

/* /herocounter only: tabs, enemy/team boxes, bans, grid, intro banner */
.cpx .tablist { border-bottom-color: var(--cp-line); }
.cpx .tabitem a { color: var(--cp-muted); border-radius: 4px 4px 0 0; transition: color .15s ease; }
.cpx .tabitem a:hover { color: #fff; background-color: var(--cp-card-2); border-color: transparent; }
.cpx .tabitempressed a { color: var(--cp-accent); font-weight: 600; }
.cpx .tabsep { color: #2e2e2e; }
.cpx .enemyColor { color: var(--cp-bad); }
.cpx .teamColor { color: #a9cf54; }
.cpx .heroSelectedWrap, .cpx .banSelectedWrap, .cpx .heroSelectedWrapCMBot { border-color: #333 !important; border-radius: 6px; background: var(--cp-card); }
.cpx .btn-pickerteam { border: 0; border-image: none; border-radius: 4px; background: rgba(119, 179, 0, .9); color: #fff; padding: 2px 8px; }
.cpx .expanderContainerOptions, .cpx .expandedContainerOptions, .cpx .expanderContainerCharts, .cpx .expandedContainerCharts { border-color: #333; border-radius: 6px; background-color: var(--cp-card-2); }
.cpx .noSelectionBox img { border-radius: 6px !important; }
.cpx .heroSelectContainerBottom, .cpx .heroSelectContainerBottomOver { border-radius: 3px; }
.cpx-pair { font-size: 11.5px; margin-left: 4px; }
.cpx .heroSelectSelfContainerCU .btnBan { background: rgba(0, 0, 0, .45); border: 1px solid #3a3a3a; color: var(--cp-muted); font-weight: 600; }
.cpx .heroSelectSelfContainerCU .btnBan:hover { border-color: var(--cp-bad); color: #fff; }