/*
 * Game Pulse: the Path of Exile build preview and characters (includes/poe-characters.php, shared by includes/poe2.php).
 *
 * Structure only: the paper doll, item tooltips, sockets, the gem link chain, keystones, the ascendancy medallion, the
 * preview popover, the filter bar, the cards, the "right now" strip, the main skills and the movers. Every colour and
 * face is a token (--exile-*, --gp-*, --gp-rarity-*) that the game's look sets (assets/css/look-poe.css,
 * look-poe2.css); the fallbacks here are the in-game convention on a dark ground.
 */

.gp-pc {
	--gp-pc-gap: 1rem;
}

.gp-rarity--normal { color: var(--gp-rarity-normal, #C8C8C8); }
.gp-rarity--magic { color: var(--gp-rarity-magic, #8888FF); }
.gp-rarity--rare { color: var(--gp-rarity-rare, #FFFF77); }
.gp-rarity--unique { color: var(--gp-rarity-unique, #C9783A); }
.gp-rarity--relic { color: var(--gp-rarity-relic, #82AD6A); }
.gp-rarity--gem { color: var(--gp-rarity-gem, #1BA29B); }
.gp-rarity--currency,
.gp-rarity--other { color: var(--gp-rarity-currency, #AA9E82); }

/* ---- filter bar ---------------------------------------------------------------------------------------------- */

.gp-filters {
	display: grid;
	gap: 0.65rem;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--exile-frame, var(--gp-panel-border, #5A4520));
	background: var(--exile-well, rgba(0, 0, 0, 0.35));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 10px 24px -18px rgba(0, 0, 0, 0.9);
}

.gp-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem 1rem;
}

.gp-seg {
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--exile-frame, #5A4520);
	background: var(--exile-btn-bg, #120E0C);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gp-seg ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-seg__opt {
	display: inline-block;
	margin: 0;
	padding: 0.45rem 0.85rem;
	border: 0;
	border-right: 1px solid var(--exile-frame-lo, rgba(0, 0, 0, 0.6));
	background: transparent;
	color: var(--exile-btn-ink, #CDBF9E);
	font: inherit;
	font-family: var(--exile-face, inherit);
	font-size: 0.92rem;
	font-variant: small-caps;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.gp-seg li:last-child .gp-seg__opt,
.gp-seg > .gp-seg__opt:last-child {
	border-right: 0;
}

.gp-seg__opt:hover {
	background: var(--exile-btn-hover, rgba(255, 255, 255, 0.06));
	color: var(--exile-title, #E3C27A);
}

.gp-seg__opt[aria-pressed="true"],
.gp-seg__opt[aria-current="true"] {
	background: var(--exile-btn-active, linear-gradient(180deg, #5C4520, #2E2110));
	color: var(--exile-btn-active-ink, #F3DFA8);
	box-shadow: inset 0 0 0 1px var(--exile-frame-hi, #B8963E), inset 0 -2px 6px rgba(0, 0, 0, 0.45);
}

.gp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gp-chips[hidden] {
	display: none;
}

.gp-chips--sub {
	padding-left: 0.75rem;
	border-left: 2px solid var(--exile-frame, #5A4520);
}

.gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.25rem 0.6rem 0.25rem 0.3rem;
	border: 1px solid var(--exile-frame, #5A4520);
	background: var(--exile-btn-bg, #120E0C);
	color: var(--exile-btn-ink, #CDBF9E);
	font: inherit;
	font-size: 0.88rem;
	line-height: 1.2;
	cursor: pointer;
}

.gp-chip:hover {
	border-color: var(--exile-frame-hi, #B8963E);
	color: var(--exile-title, #E3C27A);
}

.gp-chip[aria-pressed="true"] {
	border-color: var(--exile-frame-hi, #B8963E);
	background: var(--exile-btn-active, linear-gradient(180deg, #5C4520, #2E2110));
	color: var(--exile-btn-active-ink, #F3DFA8);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px -2px var(--exile-glow, rgba(229, 196, 106, 0.55));
}

.gp-chip__icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--exile-frame, #5A4520);
}

.gp-chip__n {
	min-width: 1.4em;
	padding: 0 0.3em;
	background: rgba(0, 0, 0, 0.45);
	color: var(--exile-muted, #A99B84);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.gp-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	font-size: 0.8rem;
	color: var(--exile-muted, #A99B84);
}

.gp-filters__field > span {
	font-variant: small-caps;
	letter-spacing: 0.04em;
}

.gp-filters__field select,
.gp-filters__field input {
	min-width: 10rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--exile-frame, #5A4520);
	border-radius: 0;
	background: var(--exile-input, #0A0807);
	color: var(--exile-ink, #E2D5B8);
	font: inherit;
	font-size: 0.92rem;
}

.gp-filters__field input:focus-visible,
.gp-filters__field select:focus-visible,
.gp-seg__opt:focus-visible,
.gp-chip:focus-visible,
.gp-slot:focus-visible,
.gp-pc-peek:focus-visible {
	outline: 2px solid var(--exile-focus, #F3DFA8);
	outline-offset: 2px;
}

.gp-filters__go {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--exile-frame-hi, #B8963E);
	background: var(--exile-btn-active, #2E2110);
	color: var(--exile-btn-active-ink, #F3DFA8);
	font: inherit;
	cursor: pointer;
}

.gp-filters__count {
	margin: 0 0 0 auto;
	color: var(--exile-muted, #A99B84);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* ---- grid and cards ---------------------------------------------------------------------------------------- */

.gp-pc-heading {
	margin: 1.5rem 0 0.75rem;
	text-align: center;
}

.gp-pc .gp-pc-grid,
.gp-p2 .gp-p2-grid,
.gp-pc-grid,
.gp-p2-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--gp-pc-gap, 1rem);
	margin: 0;
}

.gp-pc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1rem 1.1rem;
	min-width: 0;
}

.gp-pc-card[hidden],
.gp-p2-card[hidden] {
	display: none;
}

.gp-pc-card__head,
.gp-p2-card__head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.gp-pc-card__head .gp-plate,
.gp-p2-card__head .gp-plate {
	flex: 1 1 auto;
	min-width: 0;
}

.gp-pc-card__head > .gp-pc-art {
	display: none;   /* the nameplate carries the portrait */
}

.gp-pc-art {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	color: var(--class, var(--exile-title, #E3C27A));
}

.gp-pc-art--initial {
	display: inline-grid;
	place-items: center;
	background: radial-gradient(circle at 50% 35%, #2A2018, #0A0807);
	font-family: var(--exile-face, serif);
	font-size: 1.4rem;
}

.gp-pc-peek {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0 0 auto;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--exile-frame, #5A4520);
	background: var(--exile-btn-bg, #120E0C);
	color: var(--exile-title, #E3C27A);
	font: inherit;
	font-size: 0.8rem;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.gp-pc-peek:hover,
.gp-pc-peek[aria-expanded="true"] {
	border-color: var(--exile-frame-hi, #B8963E);
	box-shadow: 0 0 10px -3px var(--exile-glow, rgba(229, 196, 106, 0.6));
}

.gp-pc-peek__icon {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.gp-racer .gp-pc-peek,
.gp-overview__list .gp-pc-peek,
.gp-p2-leader .gp-pc-peek,
.gp-pc-peek--board {
	margin: 0.25rem 0 0 0.4rem;
	padding: 0.15rem 0.4rem;
	vertical-align: middle;
}

.gp-pc-level {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.gp-pc-meta,
.gp-p2-meta {
	font-size: 0.85em;
	color: var(--exile-muted, var(--wp--preset--color--muted));
}

.gp-pc-label {
	display: block;
	font-size: 0.75rem;
	font-variant: small-caps;
	letter-spacing: 0.06em;
	color: var(--exile-muted, var(--wp--preset--color--muted));
}

.gp-pc-xp__bar {
	position: relative;
	height: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--exile-frame-lo, #2B2116);
	background: var(--gp-bar-track, #1D1416);
}

.gp-pc-xp__bar > span {
	display: block;
	height: 100%;
	background: var(--exile-xp, linear-gradient(180deg, #E8D48A, #A8892F 55%, #5A4716));
}

.gp-pc-xp__label {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	color: var(--exile-muted, var(--wp--preset--color--muted));
}

.gp-pc-pace,
.gp-pc-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
}

.gp-pc-pace dt,
.gp-pc-facts dt {
	font-size: 0.75rem;
	font-variant: small-caps;
	color: var(--exile-muted, var(--wp--preset--color--muted));
}

.gp-pc-pace dd,
.gp-pc-facts dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.gp-pc-skill {
	margin: 0;
	overflow-wrap: anywhere;
}

.gp-pc-gem {
	font-weight: 600;
}

.gp-pc-supports {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9rem;
}

.gp-pc-dots {
	display: inline-flex;
	gap: 3px;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.gp-pc-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--gem, #1BA29B);
	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.gp-pc-dot + .gp-pc-dot {
	position: relative;
}

.gp-pc-private {
	margin: 0;
	font-size: 0.88rem;
	color: var(--exile-muted, var(--wp--preset--color--muted));
}

.gp-badge--private {
	border: 1px solid var(--exile-frame, #5A4520);
	background: rgba(0, 0, 0, 0.4);
	color: var(--exile-ink, #E2D5B8);
}

.gp-pc-links,
.gp-p2-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: auto 0 0;
	padding: 0.5rem 0 0;
	border-top: 1px solid var(--exile-rule, rgba(184, 150, 62, 0.25));
	list-style: none;
	font-size: 0.85rem;
}

.gp-pc-account,
.gp-p2-account {
	color: var(--exile-muted, var(--wp--preset--color--muted));
	overflow-wrap: anywhere;
}

.gp-overview__list li:has(> .gp-pc-peek) {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gp-overview__list li:has(> .gp-pc-peek) > .gp-plate {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- detail page ------------------------------------------------------------------------------------------- */

.gp-pc-back,
.gp-p2-back {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.gp-pc-detail__head,
.gp-p2-detail__head {
	display: grid;
	gap: 0.6rem 1rem;
	margin: 0 0 1rem;
	padding: 1.25rem;
}

.gp-pc-detail__head .gp-plate,
.gp-p2-detail__head .gp-plate {
	font-size: 1.15rem;
}

.gp-pc-glance {
	margin: 0;
	font-size: 1.02rem;
}

.gp-pc-gear {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.gp-pc-gear > summary {
	cursor: pointer;
	color: var(--exile-muted, var(--wp--preset--color--muted));
	font-variant: small-caps;
}

.gp-pc-slots {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.gp-pc-slot {
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--exile-rule, rgba(184, 150, 62, 0.2));
}

.gp-pc-slot__label {
	display: inline-block;
	min-width: 7rem;
	color: var(--exile-muted, var(--wp--preset--color--muted));
	font-size: 0.82rem;
}

.gp-pc-icon-link,
.gp-p2-icon-link {
	font-size: 0.78rem;
	margin-left: 0.35rem;
}

.gp-pc-chart {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	color: var(--gp-series-1, var(--exile-title, #E3C27A));
}

.gp-pc-chart__title {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--exile-title, var(--wp--preset--color--ink));
}

.gp-pc-chart canvas {
	display: block;
	width: 100%;
	height: 240px;
}

.gp-pc-chart .gp-note,
.gp-pc-chart__readout {
	color: var(--exile-muted, var(--wp--preset--color--muted));
	font-size: 0.85rem;
}

/* ---- the build: full panel and compact preview --------------------------------------------------------------- */

.gp-build--full {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 1.25rem 2rem;
	align-items: start;
	margin: 0 0 1rem;
	padding: 1.25rem;
}

.gp-build--private,
.gp-build--full:not(:has(.gp-doll)) {
	grid-template-columns: minmax(0, 1fr);
}

.gp-build__h {
	margin: 0 0 0.6rem;
	color: var(--exile-title, #E3C27A);
	font-family: var(--exile-face, inherit);
	font-size: 1.1rem;
	font-variant: small-caps;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow: var(--exile-title-shadow, 0 1px 0 #000);
}

.gp-build__side .gp-build__h {
	margin-top: 1.1rem;
	text-align: left;
}

.gp-build__id {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.gp-build__notice {
	margin: 0.4rem 0 0;
	padding: 0.75rem 0.9rem;
	border: 1px dashed var(--exile-frame, #5A4520);
	background: rgba(0, 0, 0, 0.3);
	color: var(--exile-ink, #E2D5B8);
	font-size: 0.92rem;
	line-height: 1.5;
}

.gp-build__hint {
	margin: 0.6rem 0 0;
	color: var(--exile-muted, #A99B84);
	font-size: 0.8rem;
	text-align: center;
}

.gp-build--compact {
	display: grid;
	gap: 0.6rem;
	color: var(--exile-ink, #E2D5B8);
}

.gp-build__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--exile-rule, rgba(184, 150, 62, 0.3));
}

.gp-build__who {
	display: grid;
	min-width: 0;
}

.gp-build__name {
	color: var(--class, var(--exile-title, #E3C27A));
	font-family: var(--exile-face, inherit);
	font-size: 1.12rem;
	font-variant: small-caps;
	letter-spacing: 0.03em;
	overflow-wrap: anywhere;
}

.gp-build__line {
	color: var(--exile-muted, #A99B84);
	font-size: 0.8rem;
}

.gp-build__head .gp-badge {
	margin-left: auto;
}

.gp-build--compact .gp-build__grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

.gp-build__caption {
	min-height: 1.3em;
	margin: 0;
	font-size: 0.85rem;
	text-align: center;
}

.gp-build__more {
	margin: 0;
	font-size: 0.85rem;
	text-align: right;
}

.gp-build__more a {
	color: var(--exile-title, #E3C27A);
}

/* The ascendancy medallion: the portrait in a forged double ring with a gem at the crown. */
.gp-asc {
	position: relative;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 6.2rem;
	height: 6.2rem;
	border-radius: 50%;
	background: radial-gradient(circle, #0A0807 58%, transparent 59%), var(--exile-ring, conic-gradient(from 0deg, #6E5521, #E3C27A, #6E5521, #3A2C12, #6E5521, #E3C27A, #6E5521));
	box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--exile-frame, #5A4520), 0 6px 18px -6px #000;
}

.gp-asc::after {
	content: "";
	position: absolute;
	top: -0.45rem;
	left: 50%;
	width: 0.8rem;
	height: 0.8rem;
	transform: translateX(-50%) rotate(45deg);
	background: var(--exile-crown-gem, radial-gradient(circle at 35% 35%, #FF8A7A, #9B1B1B 60%, #3A0606));
	box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--exile-frame-hi, #B8963E);
}

.gp-asc .gp-pc-art {
	width: 82%;
	height: 82%;
	box-shadow: inset 0 0 12px #000;
}

.gp-asc--compact {
	width: 3rem;
	height: 3rem;
}

.gp-asc--compact::after {
	top: -0.3rem;
	width: 0.5rem;
	height: 0.5rem;
}

/* ---- the paper doll ------------------------------------------------------------------------------------------- */

.gp-doll {
	--u: clamp(1.85rem, calc((100vw - 5.5rem) / 8.8), 2.7rem);
	--gap: 4px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(8, var(--u));
	grid-auto-rows: var(--u);
	grid-template-areas:
		". . . h h . . ."
		"w w . h h a o o"
		"w w r b b q o o"
		"w w . b b . o o"
		"w w . b b . o o"
		"g g . t t . f f"
		"g g . . . . f f"
		". k k k k k k ."
		". k k k k k k .";
	gap: var(--gap);
	justify-content: center;
	padding: 0.9rem;
	border: 1px solid var(--exile-frame-lo, #2B2116);
	background: var(--exile-doll-bg, radial-gradient(70% 55% at 50% 40%, rgba(120, 90, 50, 0.16), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 6px), #0B0907);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 26px rgba(0, 0, 0, 0.8);
}

.gp-doll--compact {
	--u: 1.6rem;
	--gap: 3px;
	padding: 0.5rem;
}

.gp-doll__cell {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 0;
}

.gp-doll__cell--w { grid-area: w; }
.gp-doll__cell--o { grid-area: o; }
.gp-doll__cell--h { grid-area: h; }
.gp-doll__cell--b { grid-area: b; }
.gp-doll__cell--g { grid-area: g; }
.gp-doll__cell--f { grid-area: f; }
.gp-doll__cell--a { grid-area: a; }
.gp-doll__cell--r { grid-area: r; }
.gp-doll__cell--q { grid-area: q; }
.gp-doll__cell--t { grid-area: t; }
.gp-doll__cell--k {
	grid-area: k;
	justify-content: center;
	gap: var(--gap);
}

.gp-doll__flask {
	position: relative;
	display: flex;
	width: var(--u);
}

.gp-slot {
	--rarity: var(--gp-rarity-normal, #C8C8C8);
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--slot-edge, #3B2F22);
	border-radius: 0;
	background:
		radial-gradient(80% 70% at 50% 45%, var(--slot-tint, rgba(255, 255, 255, 0.03)), transparent 75%),
		var(--exile-slot-bg, linear-gradient(180deg, #16120F, #0B0907));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(0, 0, 0, 0.9);
	color: var(--rarity);
	font: inherit;
	cursor: default;
}

button.gp-slot {
	cursor: pointer;
}

.gp-slot--normal { --rarity: var(--gp-rarity-normal, #C8C8C8); --slot-edge: #4B4B4B; }
.gp-slot--magic { --rarity: var(--gp-rarity-magic, #8888FF); --slot-edge: #35357A; --slot-tint: rgba(136, 136, 255, 0.12); }
.gp-slot--rare { --rarity: var(--gp-rarity-rare, #FFFF77); --slot-edge: #6E6420; --slot-tint: rgba(255, 255, 119, 0.1); }
.gp-slot--unique { --rarity: var(--gp-rarity-unique, #C9783A); --slot-edge: #7A4420; --slot-tint: rgba(201, 120, 58, 0.18); }
.gp-slot--relic { --rarity: var(--gp-rarity-relic, #82AD6A); --slot-edge: #3E5C30; --slot-tint: rgba(130, 173, 106, 0.16); }
.gp-slot--gem { --rarity: var(--gp-rarity-gem, #1BA29B); --slot-edge: #145E5A; }
.gp-slot--currency { --rarity: var(--gp-rarity-currency, #AA9E82); --slot-edge: #4A4231; }

.gp-slot--empty {
	--rarity: rgba(169, 155, 132, 0.18);
	border-style: solid;
	border-color: rgba(90, 69, 32, 0.35);
}

button.gp-slot:hover,
button.gp-slot:focus-visible {
	border-color: var(--rarity);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px -2px var(--rarity);
}

.gp-slot__icon {
	width: 68%;
	height: 68%;
	max-width: 3.8rem;
	max-height: 3.8rem;
	fill: currentColor;
	opacity: 0.88;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}

.gp-slot--empty .gp-slot__icon {
	opacity: 1;
}

.gp-doll__cell--w .gp-slot__icon,
.gp-doll__cell--o .gp-slot__icon {
	transform: scale(1.05);
}

/* Sockets: coloured circles joined by links, inside the slot (the game's two-column snake) and in the tooltip. */
.gp-sockets {
	overflow: visible;
}

.gp-sockets--grid {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--u) * 0.46 * var(--cols, 2));
	height: calc(var(--u) * 0.46 * var(--rows, 3));
	max-width: 86%;
	max-height: 86%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.gp-sockets--grid[data-cols="1"] { --cols: 1; }
.gp-sockets--grid[data-rows="1"] { --rows: 1; }
.gp-sockets--grid[data-rows="2"] { --rows: 2; }

.gp-doll--compact .gp-sockets--grid {
	opacity: 0.85;
}

.gp-sockets--row {
	display: block;
	width: auto;
	height: 1.1rem;
	margin: 0.4rem auto 0;
}

.gp-sock {
	stroke: #000;
	stroke-width: 1.2;
	fill: var(--exile-sock-u, #3A3A3A);
}

.gp-sock--r { fill: var(--exile-sock-r, #C8352B); }
.gp-sock--g { fill: var(--exile-sock-g, #5FB33A); }
.gp-sock--b { fill: var(--exile-sock-b, #3D6FE0); }
.gp-sock--w { fill: var(--exile-sock-w, #E6E6E6); }
.gp-sock--a { fill: var(--exile-sock-a, #2B2B30); stroke: #7A7A88; }
.gp-sock--d { fill: var(--exile-sock-d, #B08D57); }
.gp-sock--u { fill: var(--exile-sock-u, #3A3A3A); stroke: #8A8A8A; stroke-dasharray: 2 1.5; }
.gp-sock--rune { fill: var(--exile-sock-rune, #6FA9B5); }
.gp-sock--empty { fill: #141414; stroke: #6E6E6E; }

.gp-sock-link {
	stroke: var(--exile-link, #C9A86A);
	stroke-width: 3.4;
	stroke-linecap: round;
}

/* ---- item tooltip --------------------------------------------------------------------------------------------- */

.gp-tip {
	--band: var(--exile-band-normal, linear-gradient(180deg, #4A4A4A, #262626));
	--edge: #7F7F7F;
	--name: var(--gp-rarity-normal, #C8C8C8);
	position: absolute;
	top: 0;
	left: calc(100% + 10px);
	z-index: 60;
	display: none;
	width: 19rem;
	max-width: calc(100vw - 2rem);
	border: 1px solid var(--edge);
	background: var(--exile-tip-bg, #050404);
	box-shadow: 0 0 0 1px #000, 0 14px 30px -8px rgba(0, 0, 0, 0.95);
	color: var(--exile-mod, #8888FF);
	font-family: var(--exile-tip-face, var(--exile-face, serif));
	font-size: 0.92rem;
	line-height: 1.35;
	text-align: center;
}

.gp-slot:hover + .gp-tip,
.gp-slot:focus-visible + .gp-tip,
.gp-tip.is-open {
	display: block;
}

.gp-doll__cell--o .gp-tip,
.gp-doll__cell--f .gp-tip,
.gp-doll__cell--q .gp-tip,
.gp-doll__cell--a .gp-tip,
.gp-tip.gp-tip--left {
	left: auto;
	right: calc(100% + 10px);
}

.gp-doll__cell--k .gp-tip,
.gp-doll__cell--g .gp-tip {
	top: auto;
	bottom: 0;
}

.gp-tip.gp-tip--up {
	top: auto;
	bottom: 0;
}

.gp-doll__flask .gp-tip {
	left: 50%;
	right: auto;
	top: auto;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
}

.gp-tip--magic { --band: var(--exile-band-magic, linear-gradient(180deg, #2C2C74, #141438)); --edge: #4848B0; --name: var(--gp-rarity-magic, #8888FF); }
.gp-tip--rare { --band: var(--exile-band-rare, linear-gradient(180deg, #5E5516, #2A260A)); --edge: #B3A33A; --name: var(--gp-rarity-rare, #FFFF77); }
.gp-tip--unique { --band: var(--exile-band-unique, linear-gradient(180deg, #5A3312, #261405)); --edge: #AF6025; --name: var(--gp-rarity-unique, #C9783A); }
.gp-tip--relic { --band: linear-gradient(180deg, #34502A, #15220F); --edge: #82AD6A; --name: var(--gp-rarity-relic, #82AD6A); }
.gp-tip--gem { --band: var(--exile-band-gem, linear-gradient(180deg, #156660, #082B28)); --edge: #1BA29B; --name: var(--gp-rarity-gem, #1BA29B); }
.gp-tip--currency { --band: var(--exile-band-currency, linear-gradient(180deg, #4C4432, #211D14)); --edge: #AA9E82; --name: var(--gp-rarity-currency, #AA9E82); }

.gp-tip__head {
	position: relative;
	display: grid;
	gap: 0.05rem;
	padding: 0.4rem 2rem;
	background: var(--band);
	border-bottom: 1px solid var(--edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -6px 10px -6px rgba(0, 0, 0, 0.7);
}

/* The band's carved end caps. */
.gp-tip__head::before,
.gp-tip__head::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid var(--edge);
	background: rgba(0, 0, 0, 0.55);
	transform: translateY(-50%) rotate(45deg);
}

.gp-tip__head::before { left: 0.55rem; }
.gp-tip__head::after { right: 0.55rem; }

.gp-tip__name,
.gp-tip__base {
	color: var(--name);
	font-family: var(--exile-face, serif);
	font-size: 1.05rem;
	font-variant: small-caps;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-shadow: 0 1px 2px #000;
}

.gp-tip__body {
	padding: 0.55rem 0.8rem 0.65rem;
}

.gp-tip__kind {
	margin: 0;
	color: var(--exile-tip-meta, #8F8F8F);
	font-size: 0.85rem;
}

.gp-tip__sep {
	position: relative;
	height: 1px;
	margin: 0.5rem 1.2rem;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--edge), transparent);
	overflow: visible;
}

.gp-tip__sep::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--edge);
}

.gp-tip__mods {
	display: grid;
	gap: 0.12rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-tip__mods--implicit {
	color: var(--exile-mod-implicit, #8888FF);
	opacity: 0.85;
}

.gp-tip__corrupted {
	margin: 0.3rem 0 0;
	color: #D20000;
	font-variant: small-caps;
}

.gp-tip__gems {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.gp-tip__gem {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.86rem;
}

.gp-tip__gem.is-support {
	padding-left: 0.9rem;
}

.gp-tip__orb {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8), var(--gem, #1BA29B) 45%, rgba(0, 0, 0, 0.75));
	box-shadow: 0 0 0 1px #000;
}

.gp-tip__foot {
	margin: 0;
	font-size: 0.78rem;
}

.gp-tip__foot a {
	color: var(--exile-tip-meta, #8F8F8F);
}

/* Gem colours: strength red, dexterity green, intelligence blue, white; ? keeps the gem teal. */
.gp-gem--r { --gem: var(--exile-sock-r, #C8352B); }
.gp-gem--g { --gem: var(--exile-sock-g, #5FB33A); }
.gp-gem--b { --gem: var(--exile-sock-b, #3D6FE0); }
.gp-gem--w { --gem: var(--exile-sock-w, #E6E6E6); }
.gp-gem--u { --gem: var(--gp-rarity-gem, #1BA29B); }
.gp-gem--rune { --gem: var(--exile-sock-rune, #6FA9B5); }

/* ---- the main skill's gem link chain ------------------------------------------------------------------------ */

.gp-chain__links {
	position: relative;
	max-width: 28rem;
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-chain__gem {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.92rem;
}

/* The link: a bar from the gem above to this one, like linked sockets. */
.gp-chain__gem + .gp-chain__gem::before {
	content: "";
	position: absolute;
	left: calc(0.75rem - 2px);
	top: calc(-0.45rem - 0.5rem);
	width: 4px;
	height: calc(0.45rem + 1rem);
	background: var(--exile-link, #C9A86A);
	box-shadow: 0 0 0 1px #000;
	z-index: 0;
}

.gp-chain__orb {
	position: relative;
	z-index: 1;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background:
		conic-gradient(from 30deg, rgba(255, 255, 255, 0.25), transparent 25%, rgba(0, 0, 0, 0.25) 50%, transparent 75%, rgba(255, 255, 255, 0.25)),
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), var(--gem, #1BA29B) 42%, rgba(0, 0, 0, 0.85) 100%);
	box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--exile-frame, #5A4520);
}

.gp-chain__gem--active .gp-chain__orb {
	box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--exile-frame-hi, #B8963E), 0 0 12px -1px var(--gem, #1BA29B);
}

.gp-chain__gem--active .gp-chain__name {
	font-weight: 700;
	font-size: 1rem;
}

.gp-chain__name {
	overflow-wrap: anywhere;
}

.gp-chain__lvl {
	min-width: 1.6rem;
	padding: 0 0.3rem;
	border: 1px solid var(--exile-frame, #5A4520);
	color: var(--exile-muted, #A99B84);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.gp-chain__meta {
	margin: 0.45rem 0 0;
	color: var(--exile-muted, #A99B84);
	font-size: 0.8rem;
	font-variant: small-caps;
}

.gp-chain--compact .gp-chain__links {
	gap: 0.3rem;
}

.gp-chain--compact .gp-chain__gem {
	grid-template-columns: 1.05rem minmax(0, 1fr) auto;
	gap: 0.4rem;
	font-size: 0.8rem;
}

.gp-chain--compact .gp-chain__orb {
	width: 1.05rem;
	height: 1.05rem;
}

.gp-chain--compact .gp-chain__gem + .gp-chain__gem::before {
	left: calc(0.525rem - 1.5px);
	top: calc(-0.3rem - 0.3rem);
	width: 3px;
	height: calc(0.3rem + 0.6rem);
}

.gp-chain--compact .gp-chain__gem--active .gp-chain__name {
	font-size: 0.88rem;
}

.gp-chain + .gp-chain {
	margin-top: 0.75rem;
}

/* ---- keystones ------------------------------------------------------------------------------------------------ */

.gp-keystones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-keystone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.gp-keystone__medal {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--exile-keystone, radial-gradient(circle at 50% 40%, #4A3A1C, #120D07 70%));
	box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--exile-frame-hi, #B8963E), 0 0 0 4px #000, 0 0 0 5px var(--exile-frame, #5A4520);
}

.gp-keystone__name {
	color: var(--exile-title, #E3C27A);
	font-family: var(--exile-face, inherit);
	font-variant: small-caps;
	letter-spacing: 0.02em;
}

.gp-keystone--more {
	color: var(--exile-muted, #A99B84);
	font-size: 0.82rem;
}

.gp-build--compact .gp-keystones {
	margin-top: 0.7rem;
	gap: 0.35rem 0.6rem;
}

.gp-build--compact .gp-keystone {
	font-size: 0.78rem;
}

.gp-build--compact .gp-keystone__medal {
	width: 0.9rem;
	height: 0.9rem;
	box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--exile-frame-hi, #B8963E);
}

.gp-pc-passives .gp-pc-pace {
	margin: 0.2rem 0 0.4rem;
}

/* ---- preview popover ------------------------------------------------------------------------------------------ */

.gp-pop {
	position: absolute;
	z-index: 1000;
	width: min(27rem, calc(100vw - 1rem));
	max-height: calc(100vh - 2rem);
	overflow: auto;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--exile-frame-hi, #B8963E);
	background: var(--exile-pop-bg, linear-gradient(180deg, #17120E, #0A0807));
	box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--exile-frame-lo, #2B2116), 0 22px 44px -12px rgba(0, 0, 0, 0.95);
	color: var(--exile-ink, #E2D5B8);
	animation: gp-pop-in 0.12s ease-out;
}

.gp-pop--sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto !important;
	width: auto;
	max-height: 82vh;
	border-width: 1px 0 0;
}

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

/* On a phone the preview is a bottom sheet: the doll, a little larger, above the chain and keystones. */
.gp-pop--sheet .gp-build--compact .gp-build__grid {
	grid-template-columns: minmax(0, 1fr);
}

.gp-pop--sheet .gp-doll--compact {
	--u: min(2.1rem, calc((100vw - 4rem) / 8.6));
	justify-self: center;
}

/* The shared popover (pulse.js) on a phone: the same stacking, so the chain is not squeezed into a sliver beside the
   doll. */
@media (max-width: 559px) {
	.gp-pop .gp-build--compact .gp-build__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gp-pop .gp-build--compact .gp-doll--compact {
		justify-self: center;
	}
}

/* ---- right now strip, main skills, movers ----------------------------------------------------------------- */

.gp-now {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: 0.75rem;
}

.gp-now__tile {
	position: relative;
	padding: 0.85rem 1rem;
	border: 1px solid var(--exile-frame, #5A4520);
	background: var(--exile-tile-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.3)));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
	min-width: 0;
}

.gp-now__tile--leaders {
	grid-column: span 2;
}

.gp-now__h {
	margin: 0 0 0.55rem;
	color: var(--exile-title, #E3C27A);
	font-family: var(--exile-face, inherit);
	font-size: 0.98rem;
	font-variant: small-caps;
	letter-spacing: 0.05em;
	text-shadow: var(--exile-title-shadow, 0 1px 0 #000);
}

.gp-now__big {
	margin: 0;
	color: var(--exile-ink-strong, #F3E6C6);
	font-family: var(--exile-face, inherit);
	font-size: 2rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.gp-now__sub {
	display: block;
	margin: 0.15rem 0 0;
	color: var(--exile-muted, #A99B84);
	font-size: 0.82rem;
	line-height: 1.4;
}

.gp-now__leaders {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.55rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-now__leader,
.gp-now__shares li,
.gp-movers__row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.gp-now__leader .gp-pc-art,
.gp-movers__row .gp-pc-art {
	width: 30px;
	height: 30px;
	box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--exile-frame, #5A4520);
}

.gp-now__who,
.gp-movers__who {
	display: grid;
	min-width: 0;
}

.gp-now__ladder {
	color: var(--exile-muted, #A99B84);
	font-size: 0.72rem;
	font-variant: small-caps;
	letter-spacing: 0.06em;
}

.gp-now__name {
	color: var(--exile-ink-strong, #F3E6C6);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gp-now__shares {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-now__shares .gp-pc-art {
	width: 24px;
	height: 24px;
}

.gp-now__asc {
	flex: 1 1 auto;
	min-width: 0;
}

.gp-now__pct {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gp-now__delta {
	min-width: 2.6rem;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.gp-now__delta--up { color: var(--gp-good, #7BC47F); }
.gp-now__delta--down { color: var(--gp-bad, #E07B6E); }

.gp-skills__list,
.gp-movers__list {
	display: grid;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.gp-skills__row {
	display: grid;
	grid-template-columns: 1.5rem minmax(8rem, 14rem) minmax(4rem, 1fr) auto;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.92rem;
}

.gp-skills__name {
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.gp-skills__name:hover,
.gp-skills__name:focus-visible {
	text-decoration: underline;
}

.gp-skills__bar {
	height: 0.55rem;
	border: 1px solid var(--exile-frame-lo, #2B2116);
	background: rgba(0, 0, 0, 0.45);
}

.gp-skills__bar > span {
	display: block;
	width: var(--share, 0%);
	height: 100%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gem, #1BA29B) 70%, #fff), var(--gem, #1BA29B) 60%, color-mix(in srgb, var(--gem, #1BA29B) 60%, #000));
}

.gp-skills__n {
	color: var(--exile-muted, #A99B84);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.gp-movers__rank {
	min-width: 1.4rem;
	color: var(--exile-title, #E3C27A);
	font-family: var(--exile-face, inherit);
	font-size: 1.1rem;
	text-align: center;
}

.gp-movers__who {
	flex: 1 1 auto;
}

.gp-movers__gain {
	display: grid;
	justify-items: end;
	color: var(--gp-good, #7BC47F);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gp-movers__lv {
	color: var(--exile-title, #E3C27A);
	font-size: 0.75rem;
	font-weight: 400;
}

/* ---- narrow screens --------------------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.gp-build--full {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.gp-now__tile--leaders {
		grid-column: auto;
	}

	.gp-skills__row {
		grid-template-columns: 1.5rem minmax(0, 1fr) auto;
	}

	.gp-skills__bar {
		grid-column: 2 / -1;
		grid-row: 2;
	}

	.gp-filters__field,
	.gp-filters__field select,
	.gp-filters__field input {
		min-width: 0;
		flex: 1 1 100%;
		width: 100%;
	}

	.gp-filters__count {
		margin-left: 0;
	}

	.gp-seg {
		width: 100%;
	}

	.gp-seg__opt {
		flex: 1 1 auto;
		text-align: center;
	}
}

@media (max-width: 559px) {
	.gp-tip {
		position: fixed;
		top: auto !important;
		bottom: 0.5rem;
		left: 0.5rem !important;
		right: 0.5rem !important;
		width: auto;
		max-width: none;
		max-height: 60vh;
		overflow: auto;
		transform: none !important;
	}

	.gp-slot:hover + .gp-tip,
	.gp-slot:focus-visible + .gp-tip {
		display: none;   /* on phones a tap pins the tooltip (is-open) instead of hover and focus */
	}

	.gp-tip.is-open {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-pop {
		animation: none;
	}
}

@media (forced-colors: active) {
	.gp-slot,
	.gp-tip,
	.gp-pop,
	.gp-seg__opt,
	.gp-chip {
		border: 1px solid CanvasText;
	}

	.gp-seg__opt[aria-pressed="true"],
	.gp-chip[aria-pressed="true"] {
		outline: 2px solid Highlight;
	}
}