/*
 * Game Pulse: Hearthstone top decks (/hearthstone/decks/). The section's tokens come from hearthstone.css and
 * look-hearthstone.css ([data-game="hearthstone"]); these are the page's own pieces (.gp-hsd-*), drawn in CSS after
 * the game's deck list: the filter bar (format as a segmented control, the classes as icon chips, the order), deck
 * tiles with a class portrait strip, the name in the heavy serif, win rate, games, dust and the mana curve, card rows
 * with a mana crystal, the copies and a rarity gem, the Copy deck code button with its "Copied" toast, the preview
 * popover and the import disclosure. The tiles are dark in both schemes, as in the game; their text is light.
 */

.gp-panel[hidden],
.gp-hsd-deck[hidden] {
	display: none !important;
}

.gp-hsd[hidden],
.gp-hsd-pop[hidden],
.gp-hsd-popover[hidden] {
	display: none !important;
}

.gp-hsd-browser,
.gp-hsd,
.gp-hsd-filters,
.gp-hsd-import,
.gp-hsd-climbers,
.gp-hsd-popover {
	--gp-hsd-common: #E8E2D6;
	--gp-hsd-free: #9C9282;
	--gp-hsd-rare: #3D8BFF;
	--gp-hsd-epic: #B455F2;
	--gp-hsd-legendary: #FF8A1C;
	--gp-hsd-mana: radial-gradient(circle at 35% 28%, #C8EBFF 0 12%, #5FB4FF 30%, #1A63D0 62%, #0B2F78 100%);
	--gp-hsd-wood: #3B2416;
	--gp-hsd-wood-dark: #1F120A;
	--gp-hsd-stone: #2A2622;
	--gp-hsd-gold: #F2C14E;
	--gp-hsd-gold-deep: #A8711F;
	--gp-hsd-magic: #7A5CFF;
	--gp-hsd-good: #6EE08A;
	--gp-hsd-bad: #FF8A80;
	--gp-hsd-head: var(--gp-head-font, Georgia, serif);
	min-width: 0;
}

.gp-hsd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

.gp-hsd-filters {
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	margin: 0 0 1.25rem;
	text-align: center;
}

.gp-hsd-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1rem;
}

/* The segmented control and the chips take the game's look (look-hearthstone.css); these are the deck page's own. */
.gp-hsd-filters :is(button, select):focus-visible {
	outline: 3px solid #8FD0FF;
	outline-offset: 2px;
}

.gp-hsd-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.gp-hsd-sort select {
	min-height: 2.5rem;
	padding: 0.3rem 2rem 0.3rem 0.8rem;
	border: 2px solid var(--gp-hsd-gold-deep);
	border-radius: 10px;
	font: inherit;
	font-size: 0.9rem;
	color: #F7E9C4;
	background: linear-gradient(180deg, #3B2416, #22140B);
}

.gp-hsd-filters__show {
	min-height: 2.5rem;
	padding: 0.3rem 1rem;
	border: 2px solid var(--gp-hsd-gold-deep);
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	color: #FFE9AE;
	background: linear-gradient(180deg, #4A2E1C, #2B1A10);
	cursor: pointer;
}

.gp-hsd-filters.is-enhanced .gp-hsd-filters__show {
	display: none;
}

.gp-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	max-width: 62rem;
}

.gp-hsd-filters .gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.5rem;
	padding: 0.2rem 0.65rem 0.2rem 0.25rem;
	border: 2px solid rgba(168, 113, 31, 0.75);
	border-radius: 999px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--gp-surface-2, var(--wp--preset--color--surface));
	cursor: pointer;
}

.gp-hsd-filters .gp-chip--all {
	padding-left: 0.8rem;
}

.gp-hsd-filters .gp-chip img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.gp-hsd-filters .gp-chip[aria-pressed="true"] {
	color: #FFFFFF;
	border-color: var(--gp-hsd-gold);
	background: radial-gradient(120% 160% at 50% 0%, #6FB7FF 0%, #2B63CF 50%, #3A238F 100%);
	box-shadow: 0 0 10px rgba(110, 160, 255, 0.6);
}

.gp-hsd-filters .gp-chip.is-empty:not([aria-pressed="true"]) {
	opacity: 0.55;
}

.gp-chip__n {
	min-width: 1.4em;
	padding: 0 0.3em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	background: rgba(0, 0, 0, 0.18);
}

.gp-chip[aria-pressed="true"] .gp-chip__n {
	background: rgba(0, 0, 0, 0.3);
}

.gp-hsd-count {
	margin: 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* ---- one format's decks ---- */

.gp-hsd__sample,
.gp-hsd__problem {
	max-width: 70ch;
	margin: 1.1rem auto 0;
	font-size: 0.82rem;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

.gp-hsd__sample strong {
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.gp-hsd__sample a {
	color: var(--gp-hs-legend, var(--wp--preset--color--accent));
}

.gp-hsd__problem {
	color: light-dark(#9B2C2C, #FC8181);
}

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

/* ---- a deck tile ---- */

.gp-hsd-deck {
	--gp-hsd-class: #B48A4A;
	min-width: 0;
}

.gp-hsd-deck[data-class="death-knight"], .gp-hsd-climber[data-class="death-knight"], .gp-hsd-pop[data-class="death-knight"], .gp-hs-now__card[data-class="death-knight"] { --gp-hsd-class: #3E8FB8; }
.gp-hsd-deck[data-class="demon-hunter"], .gp-hsd-climber[data-class="demon-hunter"], .gp-hsd-pop[data-class="demon-hunter"], .gp-hs-now__card[data-class="demon-hunter"] { --gp-hsd-class: #2E8F3A; }
.gp-hsd-deck[data-class="druid"], .gp-hsd-climber[data-class="druid"], .gp-hsd-pop[data-class="druid"], .gp-hs-now__card[data-class="druid"] { --gp-hsd-class: #B8681F; }
.gp-hsd-deck[data-class="hunter"], .gp-hsd-climber[data-class="hunter"], .gp-hsd-pop[data-class="hunter"], .gp-hs-now__card[data-class="hunter"] { --gp-hsd-class: #3F8F2A; }
.gp-hsd-deck[data-class="mage"], .gp-hsd-climber[data-class="mage"], .gp-hsd-pop[data-class="mage"], .gp-hs-now__card[data-class="mage"] { --gp-hsd-class: #2E72C7; }
.gp-hsd-deck[data-class="paladin"], .gp-hsd-climber[data-class="paladin"], .gp-hsd-pop[data-class="paladin"], .gp-hs-now__card[data-class="paladin"] { --gp-hsd-class: #B8942A; }
.gp-hsd-deck[data-class="priest"], .gp-hsd-climber[data-class="priest"], .gp-hsd-pop[data-class="priest"], .gp-hs-now__card[data-class="priest"] { --gp-hsd-class: #8F8A80; }
.gp-hsd-deck[data-class="rogue"], .gp-hsd-climber[data-class="rogue"], .gp-hsd-pop[data-class="rogue"], .gp-hs-now__card[data-class="rogue"] { --gp-hsd-class: #4A4A52; }
.gp-hsd-deck[data-class="shaman"], .gp-hsd-climber[data-class="shaman"], .gp-hsd-pop[data-class="shaman"], .gp-hs-now__card[data-class="shaman"] { --gp-hsd-class: #2440A8; }
.gp-hsd-deck[data-class="warlock"], .gp-hsd-climber[data-class="warlock"], .gp-hsd-pop[data-class="warlock"], .gp-hs-now__card[data-class="warlock"] { --gp-hsd-class: #6A3AA8; }
.gp-hsd-deck[data-class="warrior"], .gp-hsd-climber[data-class="warrior"], .gp-hsd-pop[data-class="warrior"], .gp-hs-now__card[data-class="warrior"] { --gp-hsd-class: #A8352A; }

.gp-hsd-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
	padding: 0 0 0.85rem;
	border-radius: 14px;
	color: #F3E6C4;
	background:
		repeating-linear-gradient(92deg, rgba(255, 220, 160, 0.03) 0 2px, transparent 2px 9px),
		linear-gradient(180deg, #2E1D12, #1A0F08);
	box-shadow:
		inset 0 0 0 1px rgba(255, 233, 174, 0.18),
		0 0 0 3px #6B4423,
		0 0 0 4px var(--gp-hsd-gold-deep),
		0 14px 26px -18px rgba(0, 0, 0, 0.9);
	overflow: hidden;
}

.gp-hsd-deck:target .gp-hsd-tile,
.gp-hsd-deck:focus-within .gp-hsd-tile {
	box-shadow:
		inset 0 0 0 1px rgba(255, 233, 174, 0.25),
		0 0 0 3px #6B4423,
		0 0 0 4px var(--gp-hsd-gold),
		0 0 18px 4px rgba(110, 160, 255, 0.45);
}

/* The class portrait strip: the class colour behind a carved banner, the class medallion, the name in heavy serif. */
.gp-hsd-deck__head {
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 0.65rem;
	min-height: 4.6rem;
	padding: 0.65rem 0.85rem;
	text-align: center;
	background:
		radial-gradient(70% 140% at 12% 50%, rgba(255, 255, 255, 0.28), transparent 60%),
		repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0 6px, transparent 6px 14px),
		linear-gradient(100deg, color-mix(in srgb, var(--gp-hsd-class) 92%, #000), color-mix(in srgb, var(--gp-hsd-class) 55%, #000) 70%, #1A0F08);
	border-bottom: 2px solid var(--gp-hsd-gold-deep);
	box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, 0.7);
}

.gp-hsd-deck__icon {
	grid-row: 1 / span 2;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #1A0F08, 0 0 0 4px var(--gp-hsd-gold), 0 3px 8px rgba(0, 0, 0, 0.6);
}

.gp-hsd-deck__name {
	margin: 0;
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	font-size: 1.15rem;
	line-height: 1.15;
	text-align: left;
	color: #FFFFFF;
	text-shadow: 0 0 2px #000, 0 2px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.gp-hsd-deck__link {
	color: inherit;
	text-decoration: none;
}

.gp-hsd-deck__link:hover,
.gp-hsd-deck__link:focus-visible,
.gp-hsd-deck__link[data-gp-open] {
	color: #FFE9AE;
	text-decoration: underline 2px;
	text-underline-offset: 0.2em;
}

.gp-hsd-deck__link:focus-visible {
	outline: 2px solid #8FD0FF;
	outline-offset: 3px;
	border-radius: 2px;
}

.gp-hsd-deck__class {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.45rem;
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	text-align: left;
	color: #F3E6C4;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

.gp-hsd-move {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	text-shadow: none;
}

.gp-hsd-move.is-up {
	color: #0D3B18;
	background: #7BE495;
}

.gp-hsd-move.is-down {
	color: #4A0E0A;
	background: #FF9F96;
}

/* Win rate, games, dust: three stone tablets. */
.gp-hsd-deck__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
	margin: 0;
	padding: 0 0.8rem;
	text-align: center;
}

.gp-hsd-stat {
	padding: 0.35rem 0.2rem 0.3rem;
	border-radius: 8px;
	background: linear-gradient(180deg, #3A3530, #24201C);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}

.gp-hsd-stat dt {
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #CDBF9E;
}

.gp-hsd-stat dd {
	margin: 0;
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: #FFF4D6;
}

.gp-hsd-stat--rate.is-good dd {
	color: var(--gp-hsd-good);
}

.gp-hsd-stat--rate.is-bad dd {
	color: var(--gp-hsd-bad);
}

.gp-hsd-stat--dust dd::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.3em;
	vertical-align: 0.05em;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #F4F9FF, #9EC8FF 45%, #5A4FD8);
	box-shadow: 0 0 6px rgba(150, 190, 255, 0.9);
}

/* ---- the mana curve: crystal-blue bars from 0 to 7+ ---- */

.gp-hsd-curve {
	padding: 0 0.8rem;
}

.gp-hsd-curve__cols {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	align-items: stretch;
	gap: 0.3rem;
	margin: 0;
	padding: 0.25rem 0.35rem 0;
	border-radius: 8px;
	list-style: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* A column: the count (b), the bar (::before) and the mana crystal (i), on a definite middle row so a bar's percentage
   height is a share of it. The markup is kept short: every deck tile carries one. */
.gp-hsd-curve__cols > li {
	display: grid;
	grid-template-rows: 0.9rem 2.6rem auto;
	justify-items: center;
	min-width: 0;
}

.gp-hsd-curve__cols > li > b {
	grid-row: 1;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.1;
	color: #DCEBFF;
	font-variant-numeric: tabular-nums;
}

.gp-hsd-curve__cols > li.is-zero > b {
	visibility: hidden;
}

/* The bar. */
.gp-hsd-curve__cols > li::before {
	content: "";
	grid-row: 2;
	align-self: end;
	width: 100%;
	max-width: 1.5rem;
	height: var(--h, 0%);
	min-height: 2px;
	border-radius: 4px 4px 1px 1px;
	background: linear-gradient(180deg, #A8DCFF, #3A8DF0 45%, #1F4FB8);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 6px rgba(80, 150, 255, 0.45);
}

.gp-hsd-curve__cols > li.is-zero::before {
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

/* The mana cost crystal. */
.gp-hsd-curve__cols > li > i {
	grid-row: 3;
	display: grid;
	place-items: center;
	width: 1.15rem;
	height: 1.25rem;
	margin: 0.2rem 0 0.15rem;
	clip-path: polygon(50% 0, 96% 26%, 96% 74%, 50% 100%, 4% 74%, 4% 26%);
	font-family: var(--gp-hsd-head);
	font-style: normal;
	font-weight: 900;
	font-size: 0.62rem;
	color: #FFFFFF;
	background: var(--gp-hsd-mana);
}

/* ---- card rows, as the game's deck list ----
   A row: the mana crystal (b), the name (span), the copies (i), the rarity for screen readers (small) and the rarity
   gem (::after, coloured by the row's is-<rarity> class). */

.gp-hsd-deck__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
}

.gp-hsd-deck__list > li {
	display: grid;
	grid-template-columns: 1.7rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.75rem;
	padding: 0 0.4rem 0 0.15rem;
	position: relative;
	border-radius: 4px;
	color: #FFFFFF;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, color-mix(in srgb, var(--gp-hsd-class, #6B4423) 45%, #000) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 233, 174, 0.12);
}

.gp-hsd-deck__list > li > b {
	display: grid;
	place-items: center;
	width: 1.55rem;
	height: 1.7rem;
	clip-path: polygon(50% 0, 96% 26%, 96% 74%, 50% 100%, 4% 74%, 4% 26%);
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	font-size: 0.88rem;
	color: #FFFFFF;
	text-shadow: 0 1px 1px #000, 0 0 2px #000;
	background: var(--gp-hsd-mana);
}

.gp-hsd-deck__list > li > span {
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px 1px #000;
}

.gp-hsd-deck__list > li > i {
	grid-column: 3;
	min-width: 1.5rem;
	padding: 0 0.25rem;
	border-radius: 3px;
	font-family: var(--gp-hsd-head);
	font-style: normal;
	font-weight: 900;
	text-align: center;
	color: #FFD877;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5);
	font-variant-numeric: tabular-nums;
}

.gp-hsd-deck__list > li > small {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The rarity gem. */
.gp-hsd-deck__list > li::after {
	content: "";
	grid-column: 4;
	width: 0.6rem;
	height: 0.6rem;
	transform: rotate(45deg);
	border-radius: 2px;
	background: var(--gp-hsd-gem, transparent);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 5px var(--gp-hsd-gem, transparent);
}

.gp-hsd-deck__list > .is-free { --gp-hsd-gem: transparent; }
.gp-hsd-deck__list > .is-free::after { box-shadow: none; }
.gp-hsd-deck__list > .is-common { --gp-hsd-gem: var(--gp-hsd-common); }
.gp-hsd-deck__list > .is-rare { --gp-hsd-gem: var(--gp-hsd-rare); }
.gp-hsd-deck__list > .is-epic { --gp-hsd-gem: var(--gp-hsd-epic); }
.gp-hsd-deck__list > .is-legendary { --gp-hsd-gem: var(--gp-hsd-legendary); }
.gp-hsd-deck__list > .is-legendary > span { color: #FFE2B0; }

.gp-hsd-deck__cards {
	margin: 0 0.8rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.25);
}

.gp-hsd-deck__cards > summary {
	padding: 0.4rem 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #FFE9AE;
	cursor: pointer;
}

.gp-hsd-deck__cards > summary:focus-visible {
	outline: 2px solid #8FD0FF;
	outline-offset: 2px;
}

.gp-hsd-deck__cards[open] > .gp-hsd-deck__list {
	padding: 0 0.3rem 0.4rem;
}

/* ---- the deck code and its Copy button ---- */

.gp-hsd-deck__code {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.3rem 0.5rem;
	margin: auto 0.8rem 0;
}

.gp-hsd-code__label {
	grid-column: 1 / -1;
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #CDBF9E;
}

code.gp-hsd-code {
	display: block;
	min-width: 0;
	padding: 0.45rem 0.55rem;
	overflow: hidden;
	border-radius: 6px;
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	user-select: all;
	-webkit-user-select: all;
	color: #E9F3FF;
	background: #0F0905;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 233, 174, 0.15);
}

code.gp-hsd-code:hover,
code.gp-hsd-code:focus {
	white-space: normal;
	word-break: break-all;
}

code.gp-hsd-code:focus-visible {
	outline: 2px solid #8FD0FF;
	outline-offset: 2px;
}

.gp-hsd-copy {
	min-height: 2.4rem;
	padding: 0.3rem 0.9rem;
	border: 2px solid var(--gp-hsd-gold);
	border-radius: 999px;
	font: inherit;
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	font-size: 0.85rem;
	white-space: nowrap;
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	background: radial-gradient(120% 160% at 50% 0%, #7FC4FF 0%, #2A6FE0 45%, #2E1F8F 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px #1A0F08, 0 3px 6px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.gp-hsd-copy:hover,
.gp-hsd-copy:focus-visible {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px #1A0F08, 0 0 14px rgba(120, 170, 255, 0.85);
}

.gp-hsd-copy:focus-visible {
	outline: 3px solid #FFE9AE;
	outline-offset: 2px;
}

.gp-hsd-copy.is-copied {
	color: #0E3F12;
	text-shadow: none;
	background: linear-gradient(180deg, #B7F5C6, #48BB78);
	border-color: #E8FFE8;
}

/* The "Copied" toast: a bubble over the button while the status holds text. */
.gp-hsd-copied {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.35rem);
	z-index: 3;
	max-width: 100%;
	padding: 0.3rem 0.65rem;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #0E2A14;
	background: #C6F6D5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.gp-hsd-copied.is-shown {
	opacity: 1;
	transform: none;
}

.gp-hsd-copied:empty {
	padding: 0;
}

/* ---- the preview popover (curve and cards) ---- */

.gp-hsd-popover {
	position: absolute;
	z-index: 1000;
	width: min(21rem, calc(100vw - 16px));
	max-height: min(34rem, calc(100vh - 24px));
	overflow: auto;
	padding: 0.75rem;
	border-radius: 14px;
	color: #F3E6C4;
	background:
		radial-gradient(90% 40% at 50% 0%, rgba(122, 92, 255, 0.28), transparent 70%),
		linear-gradient(180deg, #2E1D12, #150C06);
	box-shadow: 0 0 0 2px #6B4423, 0 0 0 3px var(--gp-hsd-gold), 0 0 22px rgba(110, 140, 255, 0.45), 0 18px 34px rgba(0, 0, 0, 0.7);
}

.gp-hsd-pop {
	display: grid;
	gap: 0.55rem;
}

.gp-hsd-pop__title {
	margin: 0;
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	font-size: 1.15rem;
	text-align: center;
	color: #FFFFFF;
	text-shadow: 0 2px 0 #000, 0 0 3px #000;
}

.gp-hsd-pop__meta {
	margin: -0.35rem 0 0;
	font-size: 0.8rem;
	text-align: center;
	color: #D8C9A3;
}

.gp-hsd-pop .gp-hsd-curve,
.gp-hsd-pop .gp-hsd-deck__stats {
	padding: 0;
}

/* ---- climbers ---- */

.gp-hsd-climbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1rem 1.5rem;
}

.gp-hsd-climbers__format h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
	font-family: var(--gp-hsd-head);
	font-size: 1rem;
	color: var(--gp-title-ink, var(--gp-panel-title));
}

.gp-hsd-climbers__list {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-hsd-climber {
	--gp-hsd-class: #6B4423;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.6rem;
	padding: 0.4rem 0.6rem;
	border-radius: 10px;
	color: #F3E6C4;
	background: linear-gradient(100deg, color-mix(in srgb, var(--gp-hsd-class) 70%, #000), #1A0F08 75%);
	box-shadow: inset 0 0 0 1px rgba(255, 233, 174, 0.2);
}

.gp-hsd-climber img {
	grid-row: 1 / span 2;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--gp-hsd-gold-deep);
}

.gp-hsd-climber a {
	font-family: var(--gp-hsd-head);
	font-weight: 900;
	color: #FFFFFF;
	text-shadow: 0 1px 1px #000;
}

.gp-hsd-climber__move {
	font-size: 0.78rem;
	color: #E3D5B0;
}

/* ---- how to import: a disclosure under the decks ---- */

.gp-hsd-import {
	max-width: 60rem;
	margin: 1.5rem auto 0;
	border-radius: 12px;
	background: var(--gp-surface-2, var(--wp--preset--color--surface-alt));
	box-shadow: 0 0 0 2px var(--gp-hsd-gold-deep);
}

.gp-hsd-import__summary {
	padding: 0.75rem 1rem;
	font-family: var(--gp-hsd-head);
	font-weight: 700;
	font-size: 1.02rem;
	text-align: center;
	color: var(--gp-title-ink, var(--gp-panel-title));
	cursor: pointer;
}

.gp-hsd-import__summary:focus-visible {
	outline: 3px solid #8FD0FF;
	outline-offset: 2px;
	border-radius: 12px;
}

.gp-hsd-import__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem 2rem;
	padding: 0 1.25rem 1.25rem;
}

@media (min-width: 760px) {
	.gp-hsd-import__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gp-hsd-import__part h3 {
	margin: 0 0 0.5rem;
	font-family: var(--gp-hsd-head);
	font-size: 1rem;
	text-align: center;
	color: var(--gp-title-ink, var(--gp-panel-title));
}

.gp-hsd-steps {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding-left: 1.4rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.gp-hsd-import__note {
	grid-column: 1 / -1;
	max-width: 60ch;
	margin: 0 auto;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 480px) {
	.gp-hsd-filters .gp-seg__btn {
		padding: 0.3rem 0.8rem 0.3rem 0.5rem;
	}

	.gp-hsd-filters .gp-chip__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.gp-hsd-filters .gp-chip {
		padding-right: 0.45rem;
	}

	.gp-hsd-filters .gp-chip--all .gp-chip__label {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-hsd-copied {
		transition: none;
	}
}

/* Phones (r13): the class chips are one row that scrolls sideways, so the first decks start in the first screen. */
@media (max-width: 640px) {
	.gp-hsd-filters .gp-chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		padding-bottom: 0.35rem;
		-webkit-overflow-scrolling: touch;
	}

	.gp-hsd-filters .gp-chips .gp-chip {
		flex: 0 0 auto;
	}
}