/*
 * Game Pulse: Path of Exile 2 (includes/poe2.php).
 *
 * Path of Exile 2's own identity: dark steel and ember, distinct from Path of Exile's obsidian, crimson and gold.
 * The scope re-points the palette presets and the component tokens (--gp-*) wherever the section is present:
 *   body.pulse-game.is-game-poe2   every /poe2/ page (the theme adds the class from the plugin's section registry)
 *   .is-game-poe2                  the hero band, the tabs and the home page's door
 *   [data-game="poe2"]             the module's markup and its nameplates
 * Class colours follow the classes' attributes (strength ember, dexterity verdigris, intelligence steel blue);
 * an ascendancy takes its base class's colour. Text sits on the site's centre line: notes and headings are centred,
 * tables and grids fill the wide box.
 */

body.pulse-game.is-game-poe2,
.is-game-poe2,
[data-game="poe2"] {
	--wp--preset--color--primary: light-dark(#9A3412, #F08A3C);
	--wp--preset--color--primary-soft: light-dark(#F5E1D3, #2A1A10);
	--wp--preset--color--primary-bright: light-dark(#C2410C, #FFA65C);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #0E1013);
	--wp--preset--color--primary-text: var(--wp--preset--color--primary);
	--wp--preset--color--accent: light-dark(#3F5468, #9FB4C7);
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--wp--preset--color--ink: light-dark(#15181C, #DCE1E6);
	--wp--preset--color--muted: light-dark(#4D5661, #98A3AE);
	--wp--preset--color--surface: light-dark(#F1F2F3, #0E1013);
	--wp--preset--color--surface-alt: light-dark(#E4E7EA, #161A1F);
	--wp--preset--color--border: light-dark(#AEB6BE, #2F363E);
	--pulse-header-bg: light-dark(rgba(241, 242, 243, 0.9), rgba(14, 16, 19, 0.86));
	--gp-tone: light-dark(#9A3412, #E0662B);
	--gp-radius: 2px;
	--gp-radius-sm: 2px;
	--gp-badge-radius: 2px;
	--gp-head-font: var(--pulse-font-fantasy, inherit);
	--gp-panel-border: light-dark(#8D97A1, #3A424C);
	--gp-panel-bg:
		radial-gradient(110% 80% at 50% 120%, light-dark(rgba(224, 102, 43, 0.06), rgba(224, 102, 43, 0.14)), transparent 65%),
		linear-gradient(180deg, light-dark(#F7F8F9, #181C21), light-dark(#ECEEF0, #111418));
	--gp-panel-alt-bg: light-dark(#E4E7EA, #161A1F);
	--gp-panel-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05)), 0 16px 32px -24px rgba(0, 0, 0, 0.8);
	--gp-bar: linear-gradient(90deg, #5A1E08, #C2410C 55%, #FFA65C);
	--gp-bar-track: light-dark(#D3D8DD, #1E2329);
	--gp-bar-radius: 0;
	--gp-live-bg: light-dark(#9A3412, #F08A3C);
	--gp-live-ink: light-dark(#FFFFFF, #0E1013);
	--gp-series-1: #F08A3C;
	--gp-series-2: #9FB4C7;
	--gp-series-3: #D8DDE2;
	--gp-series-4: #B4441A;
	--gp-series-5: #6B8F71;
	--gp-ink: light-dark(#4D5661, #98A3AE);
	--gp-grid: light-dark(#D3D8DD, #262C33);
	--gp-hero-bg:
		radial-gradient(46rem 14rem at 50% 135%, rgba(224, 102, 43, 0.42), transparent 70%),
		radial-gradient(26rem 10rem at 12% -20%, rgba(159, 180, 199, 0.16), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 9px),
		linear-gradient(180deg, #0B0D10, #1A1F25);
	--gp-hero-rule: #E0662B;
	--gp-hero-accent: #F08A3C;
	--gp-hero-title: #E6EAEE;
	--gp-hero-ink: #C9D1D9;
	--gp-hero-pill: rgba(240, 138, 60, 0.5);
	--gp-icon-radius: 2px;
	--gp-icon-ring: #5B6672;
	--gp-tabs-bg: #0E1013;
	--gp-tabs-rule: #3A424C;
	--gp-tabs-ink: #AEB8C2;
	--gp-tabs-active: #FFA65C;
	--gp-plate-bg: linear-gradient(180deg, #1D2228, #0E1013);
	--gp-plate-border: #4A535D;
	--gp-plate-ink: #E6EAEE;
	--gp-plate-bar: linear-gradient(180deg, #FFA65C, #C2410C 60%, #5A1E08);
	--gp-plate-track: #1E2329;
	--class-exile2: #B8C2CC;
	--class-warrior: #D2643A;
	--class-mercenary: #C9A54A;
	--class-ranger: #5FA57A;
	--class-huntress: #8FB05A;
	--class-monk: #4FA7A8;
	--class-sorceress: #6A9BE0;
	--class-witch: #9C7BD8;
	--class-druid: #B07A4A;
	--class-duelist: #CF8E4E;
	--class-shadow: #4E8E9E;
	color: var(--wp--preset--color--ink);
}

/* Panels: a forged steel plate with an ember underglow; the edge picks up the ember on the top rule. */
:is(.is-game-poe2, [data-game="poe2"]) :is(.gp-panel, .gp-widget, .gp-table-wrap, .gp-p2-chart, .is-style-card) {
	border: 1px solid var(--gp-panel-border);
	border-top: 2px solid light-dark(#C2410C, #B4441A);
}

:is(.is-game-poe2, [data-game="poe2"]) :is(.gp-stat, .gp-countdown-part) {
	border-color: var(--gp-panel-border);
	background: light-dark(#F7F8F9, #14181C);
	box-shadow: inset 0 -2px 0 light-dark(rgba(194, 65, 12, 0.35), rgba(224, 102, 43, 0.45));
}

:is(.is-game-poe2, [data-game="poe2"]) .gp-table thead th {
	background: light-dark(#1D2228, #0B0D10);
	color: #F08A3C;
	border-bottom: 1px solid #B4441A;
	font-variant: small-caps;
	text-transform: none;
	letter-spacing: 0.08em;
}

:is(.is-game-poe2, [data-game="poe2"]) .gp-panel__title,
:is(body.is-game-poe2) :is(.pulse-post-body, .wp-block-post-content) > h2 {
	font-variant: small-caps;
	letter-spacing: 0.03em;
	text-align: center;
}

:is(body.is-game-poe2) :is(.pulse-post-body, .wp-block-post-content) > h2::after {
	content: "";
	display: block;
	width: 8rem;
	height: 2px;
	margin: 0.5rem auto 0;
	background: linear-gradient(90deg, transparent, #E0662B 30%, #9FB4C7 70%, transparent);
}

:is(.is-game-poe2, [data-game="poe2"]) .gp-badge--dead {
	background: light-dark(#7A2A10, #5A1E08);
	color: #FFE3CF;
}

:is(.is-game-poe2, [data-game="poe2"]) .gp-badge--alive {
	background: light-dark(#2F4A3A, #1F3A2A);
	color: #DDF2E2;
}

.gp-badge--retired,
.gp-badge--public,
.gp-badge--private {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	font-size: 0.75rem;
	border-radius: var(--gp-badge-radius, 2px);
	border: 1px solid var(--gp-panel-border, currentColor);
}

.gp-badge--public {
	color: light-dark(#2F4A3A, #9FD4AE);
}

.gp-badge--private,
.gp-badge--retired {
	color: var(--wp--preset--color--muted);
}

/* The nameplate in PoE 2's convention: a steel plate, the portrait ringed in the class colour, an ember life bar. */
.gp-plate--poe2 {
	border-radius: 2px;
}

.gp-plate--poe2 .gp-plate__name {
	font-variant: small-caps;
	letter-spacing: 0.02em;
	color: var(--gp-plate-ink, #E6EAEE);
}

.gp-plate--poe2 .gp-plate__icon img {
	width: 40px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #000000, 0 0 0 2px var(--class, #5B6672);
}

.gp-plate--poe2 .gp-plate__initial {
	background: var(--class, var(--class-exile2, #B8C2CC));
}

/* The module's blocks: centred notes and headings, full-width tables and grids. */
.gp-p2 {
	display: grid;
	gap: 1rem;
}

.gp-p2 :is(.gp-note, .gp-p2-league, h3, h4, .gp-p2-more, .gp-overview__more, .gp-p2-back) {
	margin: 0;
	text-align: center;
}

.gp-p2 h3,
.gp-p2 h4 {
	font-family: var(--gp-head-font, inherit);
	font-variant: small-caps;
	letter-spacing: 0.03em;
}

.gp-p2-league {
	font-size: 1.05rem;
}

.gp-p2-tabs ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-p2-tabs a {
	display: block;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--gp-panel-border);
	border-radius: var(--gp-radius-sm, 2px);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.gp-p2-tabs a[aria-current="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.gp-p2-leader {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
}

.gp-p2-leader__label,
.gp-p2-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.gp-p2-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

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

.gp-p2-top ol {
	display: grid;
	gap: 0.45rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.gp-p2-top li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.gp-p2-table .gp-racer-sub {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.gp-p2-table tr[data-rank="1"] > td:first-child,
.gp-p2-table tr[data-rank="2"] > td:first-child,
.gp-p2-table tr[data-rank="3"] > td:first-child {
	color: var(--wp--preset--color--primary-bright);
	font-weight: 700;
}

/* Characters */
.gp-p2-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 0.75rem 1rem;
	margin: 0;
}

.gp-p2-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.gp-p2-filter select,
.gp-p2-apply {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--gp-panel-border);
	border-radius: var(--gp-radius-sm, 2px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.gp-p2-apply {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	cursor: pointer;
}

.gp-p2-filters.is-enhanced .gp-p2-apply {
	display: none;
}

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

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

.gp-p2-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
	border-top-color: var(--class, #B4441A) !important;
}

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

.gp-p2-card__meta,
.gp-p2-profile {
	margin: 0;
}

.gp-p2-meta {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.gp-p2-pace {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin: 0;
}

.gp-p2-pace div {
	display: grid;
	text-align: center;
}

.gp-p2-pace dt {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.gp-p2-pace dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gp-p2-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.gp-p2-account {
	color: var(--wp--preset--color--muted);
}

.gp-p2-detail__head {
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	text-align: center;
}

.gp-p2-private {
	margin: 0;
	text-align: center;
}

.gp-p2-slots,
.gp-p2-skill-list {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-p2-slot {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 0.15rem 0.75rem;
}

.gp-p2-slot__label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.gp-p2-slot > .gp-p2-meta {
	grid-column: 2;
}

.gp-p2-supports {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

/* Item rarity in the game's convention (darkened for the light scheme). */
[data-game="poe2"] .gp-rarity--normal { color: light-dark(#4B4B4B, #C8C8C8); }
[data-game="poe2"] .gp-rarity--magic { color: light-dark(#3B3BB3, #8888FF); }
[data-game="poe2"] .gp-rarity--rare { color: light-dark(#7A6400, #FFFF77); }
[data-game="poe2"] .gp-rarity--unique { color: light-dark(#8A4A1C, #AF6025); }
[data-game="poe2"] .gp-rarity--gem { color: light-dark(#13766F, #1BA29B); }
[data-game="poe2"] :is(.gp-rarity--relic, .gp-rarity--currency, .gp-rarity--other) { color: light-dark(#6E5E3A, #AA9E82); }

/* Distributions */
.gp-p2-ladder-stats {
	display: grid;
	gap: 0.8rem;
	padding-block: 0.5rem;
	border-top: 1px solid var(--gp-panel-border);
}

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

.gp-p2-bars__item {
	display: grid;
	grid-template-columns: 28px minmax(8rem, 13rem) minmax(0, 1fr) 7.5rem;
	align-items: center;
	gap: 0.6rem;
}

.gp-p2-bars__item > .gp-p2-bars__label:first-child {
	grid-column: 2;
}

.gp-p2-bars__icon {
	width: 28px;
	height: auto;
	box-shadow: 0 0 0 1px #000000, 0 0 0 2px var(--class, #5B6672);
}

.gp-p2-bars__bar {
	height: 0.65rem;
	background: var(--gp-bar-track);
}

.gp-p2-bars__bar span {
	display: block;
	width: var(--share, 0%);
	height: 100%;
	background: var(--class, var(--wp--preset--color--primary));
}

.gp-p2-bars__value {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

@media (max-width: 640px) {
	.gp-p2-bars__item {
		grid-template-columns: 28px minmax(0, 1fr) 6.5rem;
	}

	.gp-p2-bars__bar {
		grid-column: 2 / -1;
	}
}

/* Charts */
.gp-p2-chart {
	margin: 0;
	padding: 0.75rem;
	position: relative;
}

.gp-p2-chart__svg {
	display: block;
	width: 100%;
	height: auto;
}

.gp-p2-chart__grid {
	stroke: var(--gp-grid);
	stroke-width: 1;
}

.gp-p2-chart__ink {
	fill: var(--gp-ink);
}

.gp-p2-chart__line--0 { stroke: var(--gp-series-1); }
.gp-p2-chart__line--1 { stroke: var(--gp-series-2); stroke-dasharray: 8 4; }
.gp-p2-chart__line--2 { stroke: var(--gp-series-3); stroke-dasharray: 2 3; }

.gp-p2-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.gp-p2-swatch {
	display: inline-block;
	width: 1.2rem;
	margin-right: 0.35rem;
	vertical-align: middle;
	border-top: 3px solid var(--gp-series-1);
}

.gp-p2-chart figcaption {
	margin-top: 0.4rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.gp-p2-chart__tip {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.5rem;
	font-size: 0.8rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--gp-panel-border);
	pointer-events: none;
}

/* The home page's door. */
.gp-door.is-game-poe2 .gp-door__icons img {
	border-radius: 2px;
	box-shadow: 0 0 0 1px #000000, 0 0 0 2px #5B6672;
}

@media (prefers-reduced-motion: reduce) {
	.gp-p2 * {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.gp-p2-bars__bar span {
		background: CanvasText;
	}
}