/*
 * Game Pulse look: poe2 (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="poe2"] and .is-game-poe2, then the game's own ornaments, all scoped to this game.
 *
 * Path of Exile 2's interface by our own hand, colder than Path of Exile: blued steel and slate, frames of brushed
 * steel with teal-lit corner brackets and rivets, a carved capital face for titles and a small-caps serif for
 * tooltips, the same rarity header bands and separators, rune sockets in pale teal. Dark in both schemes, like the
 * game; the light scheme lifts the page to a cold slate. Body text stays in the system face and meets WCAG AA on
 * every surface.
 *
 * Fonts: Cinzel (semibold, latin subset) for titles and Cormorant SC (medium, latin subset) for tooltips, both SIL Open
 * Font License 1.1 (assets/fonts/poe2/OFL.txt), from the @fontsource/cinzel and @fontsource/cormorant-sc 5.3.0 npm
 * packages. Open look-alikes; not the game's own typefaces.
 */

@font-face {
	font-family: "GP Cinzel";
	src: url("../fonts/poe2/cinzel-latin-600-normal.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "GP Cormorant SC";
	src: url("../fonts/poe2/cormorant-sc-latin-500-normal.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks while the faces load, so titles and tooltips do not shift when they swap in. */
@font-face {
	font-family: "GP Cinzel Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 112%;
	ascent-override: 88%;
	descent-override: 32%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "GP Cormorant SC Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 92%;
	ascent-override: 98%;
	descent-override: 30%;
	line-gap-override: 0%;
}

/* ---- tokens ---------------------------------------------------------------------------------------------- */

body.pulse-game.is-game-poe2,
body.is-game-poe2,
.is-game-poe2,
[data-game="poe2"] {
	color-scheme: dark;

	--exile-face: "GP Cinzel", "GP Cinzel Fallback", Georgia, serif;
	--exile-tip-face: "GP Cormorant SC", "GP Cormorant SC Fallback", Georgia, serif;
	--exile-page: #0A0C0E;
	--exile-panel: #11151A;
	--exile-panel-2: #171C22;
	--exile-well: #07090B;
	--exile-ink: #D5DDE3;
	--exile-ink-strong: #EEF3F6;
	--exile-muted: #98A6B0;
	--exile-title: #CFE4E6;
	--exile-title-shadow: 0 1px 0 #000, 0 0 12px rgba(79, 184, 176, 0.25);
	--exile-frame: #46525C;
	--exile-frame-hi: #8FB4BA;
	--exile-frame-lo: #1C2227;
	--exile-rule: rgba(143, 180, 186, 0.25);
	--exile-glow: rgba(79, 184, 176, 0.55);
	--exile-focus: #A8F0E8;
	--exile-link: #6FA9B0;
	--exile-btn-bg: #10141A;
	--exile-btn-ink: #C7D2DA;
	--exile-btn-hover: rgba(79, 184, 176, 0.08);
	--exile-btn-active: linear-gradient(180deg, #24524F, #10292A);
	--exile-btn-active-ink: #D2F7F2;
	--exile-input: #080A0D;
	--exile-xp: linear-gradient(180deg, #A9E7E1, #3E9C95 50%, #164844);
	--exile-mod: #8888FF;
	--exile-mod-implicit: #8888FF;
	--exile-tip-bg: #05070A;
	--exile-tip-meta: #8F969C;
	--exile-ring: conic-gradient(from 0deg, #46525C, #CFE4E6, #46525C, #1C2227, #46525C, #CFE4E6, #46525C, #1C2227, #46525C);
	--exile-crown-gem: radial-gradient(circle at 35% 35%, #B8FFF6, #2C9C94 58%, #0A2E2B);
	--exile-keystone: radial-gradient(circle at 50% 38%, #2C4A4C, #080B0D 72%);
	--exile-pop-bg:
		radial-gradient(90% 60% at 50% 0%, rgba(79, 184, 176, 0.10), transparent 70%),
		repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px),
		linear-gradient(180deg, #151A20, #07090C);
	--exile-doll-bg:
		radial-gradient(70% 55% at 50% 42%, rgba(79, 184, 176, 0.10), transparent 70%),
		repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px),
		#07090B;
	--exile-slot-bg: linear-gradient(180deg, #141A20, #090C0F);
	--exile-tile-bg: linear-gradient(180deg, rgba(143, 180, 186, 0.05), rgba(0, 0, 0, 0.35));
	--exile-sock-r: #C8352B;
	--exile-sock-g: #5FB33A;
	--exile-sock-b: #3D6FE0;
	--exile-sock-w: #E6E6E6;
	--exile-sock-rune: #7FCFC6;
	--exile-band-normal: linear-gradient(180deg, #4C4F52, #222426);
	--exile-band-magic: linear-gradient(180deg, #2E2E78, #121236);
	--exile-band-rare: linear-gradient(180deg, #625818, #29250A);
	--exile-band-unique: linear-gradient(180deg, #5E3512, #251304);
	--exile-band-gem: linear-gradient(180deg, #176A64, #082B28);
	--exile-band-currency: linear-gradient(180deg, #4E4633, #201C13);
	--exile-corners:
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px top 4px / 26px 1px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px top 4px / 1px 26px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px top 4px / 26px 1px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px top 4px / 1px 26px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px bottom 4px / 26px 1px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px bottom 4px / 1px 26px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px bottom 4px / 26px 1px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px bottom 4px / 1px 26px no-repeat,
		linear-gradient(45deg, transparent 3px, #4FB8B0 3px 5px, transparent 5px) left 6px top 6px / 8px 8px no-repeat,
		linear-gradient(45deg, transparent 3px, #4FB8B0 3px 5px, transparent 5px) right 6px top 6px / 8px 8px no-repeat,
		linear-gradient(45deg, transparent 3px, #4FB8B0 3px 5px, transparent 5px) left 6px bottom 6px / 8px 8px no-repeat,
		linear-gradient(45deg, transparent 3px, #4FB8B0 3px 5px, transparent 5px) right 6px bottom 6px / 8px 8px no-repeat;
	--exile-texture:
		radial-gradient(120% 80% at 50% 0%, rgba(79, 184, 176, 0.07), transparent 60%),
		radial-gradient(100% 70% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 70%),
		repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px);

	/* The look contract (pulse.css). */
	--gp-surface: var(--exile-panel);
	--gp-surface-2: var(--exile-panel-2);
	--gp-surface-sunk: var(--exile-well);
	--gp-ink: var(--exile-ink);
	--gp-ink-muted: var(--exile-muted);
	--gp-ink-strong: var(--exile-ink-strong);
	--gp-accent: #4FB8B0;
	--gp-accent-ink: #061413;
	--gp-accent-2: #E0662B;
	--gp-title-ink: var(--exile-title);
	--gp-title-shadow: var(--exile-title-shadow);
	--gp-head-font: var(--exile-face);
	--gp-body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gp-num-font: var(--exile-face);
	--gp-frame-border: 1px solid var(--exile-frame);
	--gp-frame-radius: 0;
	--gp-frame-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(143, 180, 186, 0.12), 0 18px 34px -22px #000;
	--gp-frame-image: var(--exile-corners);
	--gp-tab-bg: #0B0E11;
	--gp-tab-ink: #B9C6CF;
	--gp-tab-active-bg: linear-gradient(180deg, #1E3E3D, #0D1A1B);
	--gp-tab-active-ink: #D2F7F2;
	--gp-tab-shape: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
	--gp-btn-bg: var(--exile-btn-bg);
	--gp-btn-ink: var(--exile-btn-ink);
	--gp-btn-border: 1px solid var(--exile-frame);
	--gp-btn-hover-bg: #18222A;
	--gp-table-head-bg: linear-gradient(180deg, #161D23, #07090B);
	--gp-table-head-ink: #A9D8D3;
	--gp-row-alt: rgba(255, 255, 255, 0.025);
	--gp-row-hover: rgba(79, 184, 176, 0.08);
	--gp-grid-line: #222A31;
	--gp-good: #7FCB9A;
	--gp-bad: #E57A68;
	--gp-warn: #E3B04B;
	--gp-pop-bg: var(--exile-pop-bg);
	--gp-pop-border: 1px solid var(--exile-frame-hi);
	--gp-pop-shadow: 0 0 0 1px #000, 0 0 0 3px var(--exile-frame-lo), 0 22px 44px -12px rgba(0, 0, 0, 0.95);
	--gp-hero-bg:
		radial-gradient(46rem 14rem at 50% 135%, rgba(79, 184, 176, 0.30), transparent 70%),
		radial-gradient(26rem 10rem at 12% -20%, rgba(159, 180, 199, 0.14), transparent 70%),
		repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 7px),
		linear-gradient(180deg, #06080A, #141A20);

	--gp-rarity-normal: #C8C8C8;
	--gp-rarity-magic: #8888FF;
	--gp-rarity-rare: #FFFF77;
	--gp-rarity-unique: #CB7B3C;
	--gp-rarity-relic: #82AD6A;
	--gp-rarity-gem: #3FB5AC;
	--gp-rarity-currency: #AA9E82;

	/* The theme's own tokens and palette presets, re-pointed so every shared component follows. */
	--wp--preset--color--primary: #6CC7BF;
	--wp--preset--color--primary-soft: #102624;
	--wp--preset--color--primary-bright: #9BE3DC;
	--wp--preset--color--primary-text: #7FD0C8;
	--wp--preset--color--on-primary: #061413;
	--wp--preset--color--accent: #9FB4C7;
	--wp--preset--color--accent-text: #9FB4C7;
	--wp--preset--color--ink: var(--exile-ink);
	--wp--preset--color--muted: var(--exile-muted);
	--wp--preset--color--surface: var(--exile-page);
	--wp--preset--color--surface-alt: var(--exile-panel-2);
	--wp--preset--color--border: #2C353D;
	--gp-tone: #4FB8B0;
	--gp-panel-border: var(--exile-frame);
	--gp-panel-bg: var(--exile-corners), var(--exile-texture), var(--exile-panel);
	--gp-panel-alt-bg: var(--exile-texture), var(--exile-panel-2);
	--gp-panel-shadow: var(--gp-frame-shadow);
	--gp-bar: linear-gradient(180deg, #E0574A, #A51F1A 55%, #4A0B08);
	--gp-bar-track: #151A1F;
	--gp-plate-bg: linear-gradient(180deg, #192027, #0B0E11);
	--gp-plate-border: #46525C;
	--gp-plate-ink: #EEF3F6;
	--gp-plate-bar: linear-gradient(180deg, #E0574A, #A51F1A 55%, #4A0B08);
	--gp-plate-track: #151A1F;
	--gp-tabs-bg: #0B0E11;
	--gp-tabs-rule: #46525C;
	--gp-tabs-ink: #B9C6CF;
	--gp-tabs-active: #7FD0C8;
	--gp-hero-rule: #4FB8B0;
	--gp-hero-accent: #7FD0C8;
	--gp-hero-pill: rgba(79, 184, 176, 0.45);
	--gp-series-1: #6CC7BF;
	--gp-series-2: #9FB4C7;
	--gp-series-3: #E0662B;
	--gp-series-4: #8888FF;
	--gp-series-5: #CB7B3C;
	--gp-grid: #222A31;
	color: var(--exile-ink);
}

@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) body.is-game-poe2 {
		--exile-page: #1B2228;
		--exile-panel: #151B21;
		--exile-panel-2: #1C232A;
	}
}

html[data-theme="light"] body.is-game-poe2 {
	--exile-page: #1B2228;
	--exile-panel: #151B21;
	--exile-panel-2: #1C232A;
}

body.is-game-poe2 {
	background:
		radial-gradient(70rem 30rem at 50% -10rem, rgba(79, 184, 176, 0.09), transparent 70%),
		repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 8px),
		var(--exile-page);
	color: var(--exile-ink);
}

/* ---- type ---------------------------------------------------------------------------------------------- */

:is(body.is-game-poe2, [data-game="poe2"]) :is(h1, h2, h3, .gp-panel__title, .wp-block-post-title) {
	color: var(--exile-title);
	font-family: var(--exile-face);
	font-variant: normal;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-shadow: var(--exile-title-shadow);
}

:is(body.is-game-poe2, [data-game="poe2"]) a:not(.gp-seg__opt):not(.gp-chip) {
	color: #7FD0C8;
}

:is(body.is-game-poe2, [data-game="poe2"]) a:not(.gp-seg__opt):not(.gp-chip):hover {
	color: #B8F2EC;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-note {
	color: var(--exile-muted);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-panel__title {
	position: relative;
	padding-bottom: 0.55rem;
	text-align: center;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-panel__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(14rem, 80%);
	height: 7px;
	transform: translateX(-50%);
	background:
		linear-gradient(45deg, transparent 2.5px, #4FB8B0 2.5px 4.5px, transparent 4.5px) center / 7px 7px no-repeat,
		linear-gradient(90deg, transparent, var(--exile-frame-hi) 35%, var(--exile-frame-hi) 65%, transparent) center / 100% 1px no-repeat;
}

/* The build preview's names and keystones take the tooltip face: the carved capitals are for titles only. */
:is(body.is-game-poe2, [data-game="poe2"]) :is(.gp-build__name, .gp-keystone__name, .gp-seg__opt, .gp-pc-peek, .gp-plate__name) {
	font-family: var(--exile-tip-face);
	font-weight: 600;
}

/* ---- frames: brushed steel edge, teal-lit corner brackets over blued slate ------------------------------ */

:is(body.is-game-poe2, [data-game="poe2"]) :is(.gp-panel, .gp-widget, .gp-table-wrap, .gp-now__tile, .gp-p2-card, .gp-build--full, .gp-p2-detail__head, .gp-p2-chart, .gp-filters, .gp-p2-ladder-stats, .gp-kpis > *, .gp-toc, .gp-about),
.gp-pop:has([data-game="poe2"]) {
	border: 1px solid var(--exile-frame);
	border-image: none;
	border-radius: 0;
	background: var(--exile-corners), var(--exile-texture), var(--exile-panel);
	box-shadow: var(--gp-frame-shadow);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-filters {
	background: var(--exile-texture), var(--exile-well);
}

.gp-pop:has([data-game="poe2"]) {
	border-color: #8FB4BA;
	background:
		linear-gradient(#8FB4BA, #8FB4BA) left 4px top 4px / 20px 1px no-repeat,
		linear-gradient(#8FB4BA, #8FB4BA) left 4px top 4px / 1px 20px no-repeat,
		linear-gradient(#8FB4BA, #8FB4BA) right 4px bottom 4px / 20px 1px no-repeat,
		linear-gradient(#8FB4BA, #8FB4BA) right 4px bottom 4px / 1px 20px no-repeat,
		radial-gradient(90% 60% at 50% 0%, rgba(79, 184, 176, 0.10), transparent 70%),
		linear-gradient(180deg, #151A20, #07090C);
}

[data-game="poe2"].gp-p2-card {
	border-top: 2px solid color-mix(in srgb, var(--class, #8FB4BA) 70%, #000);
}

/* ---- tables and boards ------------------------------------------------------------------------------- */

:is(body.is-game-poe2, [data-game="poe2"]) .gp-table thead th {
	background: var(--gp-table-head-bg);
	color: var(--gp-table-head-ink);
	border-bottom: 1px solid #4FB8B0;
	font-family: var(--exile-tip-face);
	font-variant: small-caps;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-table tbody tr:nth-child(even) {
	background: var(--gp-row-alt);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-table tbody tr:hover {
	background: var(--gp-row-hover);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-table :is(td, th) {
	border-color: var(--gp-grid-line);
}

/* ---- nameplates, badges, stats, bars ----------------------------------------------------------------- */

:is(body.is-game-poe2, [data-game="poe2"]) .gp-plate__name a {
	color: var(--class, var(--exile-title));
	text-shadow: 0 1px 0 #000;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-plate__portrait {
	border-radius: 50%;
	box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--exile-frame-hi);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-badge {
	border-radius: 0;
	font-variant: small-caps;
	letter-spacing: 0.04em;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-badge--dead {
	background: #3A0D0A;
	color: #F1A79B;
	border: 1px solid #7A1E16;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-badge--alive {
	background: #0E2220;
	color: #9FE0D6;
	border: 1px solid #22504B;
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-badge--public {
	background: #0E1A24;
	color: #A9CBE6;
	border: 1px solid #2B4A63;
}

:is(body.is-game-poe2, [data-game="poe2"]) :is(.gp-stat-value, .gp-now__big) {
	color: var(--exile-ink-strong);
	font-family: var(--exile-face);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-p2-bars__bar > span {
	background: linear-gradient(180deg, #9BE3DC, #3E9C95 55%, #164844);
}

:is(body.is-game-poe2, [data-game="poe2"]) .gp-p2-chart__line--0 {
	stroke: #6CC7BF;
}

/* ---- section tabs -------------------------------------------------------------------------------------- */

:is(body.is-game-poe2, .is-game-poe2) .gp-subnav {
	border-top: 1px solid var(--exile-frame);
	border-bottom: 1px solid var(--exile-frame);
	background: linear-gradient(180deg, #0D1115, #06080A);
	box-shadow: inset 0 1px 0 rgba(143, 180, 186, 0.1), 0 8px 18px -12px #000;
}

:is(body.is-game-poe2, .is-game-poe2) .gp-subnav [aria-current] {
	color: var(--gp-tab-active-ink);
	background: var(--gp-tab-active-bg);
	box-shadow: inset 0 -2px 0 #4FB8B0;
}

/* The ladder links of the race board as a segmented control. */
[data-game="poe2"] .gp-p2-tabs.gp-seg {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1rem;
}

[data-game="poe2"] .gp-p2-tabs.gp-seg a[aria-current="true"] {
	border-bottom: 0;
}

/* ---- the medallion ring: steel studs ---------------------------------------------------------------- */

[data-game="poe2"] .gp-asc::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, #8FB4BA 0deg 3deg, transparent 3deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 63%, #000 64% 69%, transparent 70%);
	mask: radial-gradient(circle, transparent 63%, #000 64% 69%, transparent 70%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-game="poe2"] *,
	body.is-game-poe2 * {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	:is(body.is-game-poe2, [data-game="poe2"]) :is(.gp-panel, .gp-now__tile, .gp-p2-card, .gp-build--full) {
		background: Canvas;
		border: 1px solid CanvasText;
	}
}