/*
 * Game Pulse look: poe (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="poe"] and .is-game-poe, then the game's own ornaments, all scoped to this game.
 *
 * Path of Exile's interface by our own hand: near-black stone with scratched texture, bronze frames with gold corner
 * brackets and rivets, a small-caps serif for titles, item tooltips with the rarity header bands (normal, magic,
 * rare, unique, gem, currency), sockets in red, green, blue and white joined by bronze links. The section is dark in
 * both schemes, like the game; the light scheme lifts the page to a warm smoke. Body text stays in the system face
 * and meets WCAG AA on every surface; gold on black is used for titles and large numbers.
 *
 * Font: Alegreya SC (regular and bold, latin subset), SIL Open Font License 1.1 (assets/fonts/poe/OFL.txt), from the
 * @fontsource/alegreya-sc 5.3.0 npm package. An open small-caps look-alike; not the game's own typeface.
 */

@font-face {
	font-family: "GP Alegreya SC";
	src: url("../fonts/poe/alegreya-sc-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	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 Alegreya SC";
	src: url("../fonts/poe/alegreya-sc-latin-700-normal.woff2") format("woff2");
	font-weight: 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;
}

/* A metric-matched fallback while the face loads, so titles do not shift when it swaps in. */
@font-face {
	font-family: "GP Alegreya SC Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 97%;
	ascent-override: 93%;
	descent-override: 29%;
	line-gap-override: 0%;
}

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

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

	--exile-face: "GP Alegreya SC", "GP Alegreya SC Fallback", Georgia, "Times New Roman", serif;
	--exile-tip-face: "GP Alegreya SC", "GP Alegreya SC Fallback", Georgia, serif;
	--exile-page: #0D0B09;
	--exile-panel: #14100D;
	--exile-panel-2: #1C1712;
	--exile-well: #090706;
	--exile-ink: #DCCFB3;
	--exile-ink-strong: #F3E7CA;
	--exile-muted: #A89A80;
	--exile-title: #E3C27B;
	--exile-title-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.85);
	--exile-frame: #6B5328;
	--exile-frame-hi: #B8963E;
	--exile-frame-lo: #2A2015;
	--exile-rule: rgba(184, 150, 62, 0.28);
	--exile-glow: rgba(227, 194, 123, 0.55);
	--exile-focus: #F6E3AE;
	--exile-link: #C9A35A;
	--exile-btn-bg: #16110D;
	--exile-btn-ink: #D9C9A4;
	--exile-btn-hover: rgba(227, 194, 123, 0.08);
	--exile-btn-active: linear-gradient(180deg, #6A4F22, #34250F);
	--exile-btn-active-ink: #F8E7B5;
	--exile-input: #0A0807;
	--exile-xp: linear-gradient(180deg, #EAD48C, #AE8D33 50%, #5C4818);
	--exile-mod: #8888FF;
	--exile-mod-implicit: #8888FF;
	--exile-tip-bg: linear-gradient(180deg, #0A0807, #040303);
	--exile-tip-meta: #8F8F8F;
	--exile-ring: conic-gradient(from 0deg, #6B5328, #E3C27B, #6B5328, #2A2015, #6B5328, #E3C27B, #6B5328, #2A2015, #6B5328);
	--exile-crown-gem: radial-gradient(circle at 35% 35%, #FF9A88, #A51F1A 58%, #3A0606);
	--exile-keystone: radial-gradient(circle at 50% 38%, #5A4520, #120D07 72%);
	--exile-pop-bg:
		radial-gradient(90% 60% at 50% 0%, rgba(165, 31, 26, 0.12), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 7px),
		linear-gradient(180deg, #18130F, #0A0807);
	--exile-doll-bg:
		radial-gradient(70% 55% at 50% 42%, rgba(165, 125, 60, 0.14), transparent 70%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px),
		#0A0807;
	--exile-slot-bg: linear-gradient(180deg, #17130F, #0B0907);
	--exile-tile-bg: linear-gradient(180deg, rgba(227, 194, 123, 0.045), rgba(0, 0, 0, 0.35));
	--exile-sock-r: #C8352B;
	--exile-sock-g: #5FB33A;
	--exile-sock-b: #3D6FE0;
	--exile-sock-w: #E6E6E6;
	--exile-band-normal: linear-gradient(180deg, #4C4C4C, #242424);
	--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 / 24px 2px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px top 4px / 2px 24px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px top 4px / 24px 2px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px top 4px / 2px 24px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px bottom 4px / 24px 2px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) left 4px bottom 4px / 2px 24px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px bottom 4px / 24px 2px no-repeat,
		linear-gradient(var(--exile-frame-hi), var(--exile-frame-hi)) right 4px bottom 4px / 2px 24px no-repeat,
		radial-gradient(circle, #F1D48D 0 1.6px, #6B5328 2.2px, transparent 3px) left 9px top 9px / 8px 8px no-repeat,
		radial-gradient(circle, #F1D48D 0 1.6px, #6B5328 2.2px, transparent 3px) right 9px top 9px / 8px 8px no-repeat,
		radial-gradient(circle, #F1D48D 0 1.6px, #6B5328 2.2px, transparent 3px) left 9px bottom 9px / 8px 8px no-repeat,
		radial-gradient(circle, #F1D48D 0 1.6px, #6B5328 2.2px, transparent 3px) right 9px bottom 9px / 8px 8px no-repeat;
	--exile-texture:
		radial-gradient(120% 80% at 50% 0%, rgba(165, 31, 26, 0.10), transparent 60%),
		radial-gradient(100% 70% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 11px);

	/* 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: #C8A252;
	--gp-accent-ink: #120D08;
	--gp-accent-2: #B0302A;
	--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(184, 150, 62, 0.16), 0 18px 34px -22px #000;
	--gp-frame-image: var(--exile-corners);
	--gp-tab-bg: #0E0B09;
	--gp-tab-ink: #C9B993;
	--gp-tab-active-bg: linear-gradient(180deg, #4E3A19, #1E160B);
	--gp-tab-active-ink: #F6E3AE;
	--gp-tab-shape: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
	--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: #241B13;
	--gp-table-head-bg: linear-gradient(180deg, #1B140D, #070605);
	--gp-table-head-ink: #DDBD6E;
	--gp-row-alt: rgba(255, 255, 255, 0.025);
	--gp-row-hover: rgba(227, 194, 123, 0.08);
	--gp-grid-line: #2A2117;
	--gp-good: #8CC084;
	--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(48rem 15rem at 50% 135%, rgba(176, 48, 42, 0.38), transparent 70%),
		radial-gradient(30rem 12rem at 12% -30%, rgba(227, 194, 123, 0.12), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 8px),
		linear-gradient(180deg, #070605, #17110C);

	/* Rarity: the game's own colours, the unique a shade brighter so a small name meets AA on the black. */
	--gp-rarity-normal: #C8C8C8;
	--gp-rarity-magic: #8888FF;
	--gp-rarity-rare: #FFFF77;
	--gp-rarity-unique: #CB7B3C;
	--gp-rarity-relic: #82AD6A;
	--gp-rarity-gem: #1BA29B;
	--gp-rarity-currency: #AA9E82;

	/* The theme's own tokens and palette presets, re-pointed so every shared component follows. */
	--wp--preset--color--primary: #D7B464;
	--wp--preset--color--primary-soft: #241A0E;
	--wp--preset--color--primary-bright: #F1D48D;
	--wp--preset--color--primary-text: #E3C27B;
	--wp--preset--color--on-primary: #0D0B09;
	--wp--preset--color--accent: #E27265;
	--wp--preset--color--accent-text: #E27265;
	--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: #3A2C1D;
	--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: #1A1210;
	--gp-bar-radius: 0;
	--gp-plate-bar: linear-gradient(180deg, #E0574A, #A51F1A 55%, #4A0B08);
	--gp-series-1: #E3C27B;
	--gp-series-2: #E0574A;
	--gp-series-3: #8888FF;
	--gp-series-4: #1BA29B;
	--gp-series-5: #CB7B3C;
	--gp-grid: #2A2117;
	color: var(--exile-ink);
}

/* The light scheme keeps the game's dark interface and lifts the page to a warm smoke. */
@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) body.is-game-poe {
		--exile-page: #231D17;
		--exile-panel: #191410;
		--exile-panel-2: #221B15;
	}
}

html[data-theme="light"] body.is-game-poe {
	--exile-page: #231D17;
	--exile-panel: #191410;
	--exile-panel-2: #221B15;
}

body.is-game-poe {
	background:
		radial-gradient(70rem 30rem at 50% -10rem, rgba(176, 48, 42, 0.12), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 9px),
		var(--exile-page);
	color: var(--exile-ink);
}

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

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

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

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

:is(body.is-game-poe, [data-game="poe"]) :is(.gp-note, .gp-lead, p) {
	color: var(--exile-ink);
}

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

/* The panel title's flourish: a gold rule fading out with a diamond at its heart. */
:is(body.is-game-poe, [data-game="poe"]) .gp-panel__title {
	position: relative;
	padding-bottom: 0.55rem;
	text-align: center;
}

:is(body.is-game-poe, [data-game="poe"]) .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, var(--exile-frame-hi) 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;
}

/* ---- frames: bronze edge, gold corner brackets and rivets over textured black ---------------------------- */

:is(body.is-game-poe, [data-game="poe"]) :is(.gp-panel, .gp-widget, .gp-table-wrap, .gp-now__tile, .gp-pc-card, .gp-p2-card, .gp-build--full, .gp-pc-detail__head, .gp-pc-chart, .gp-filters, .gp-kpis > *, .gp-toc, .gp-about),
.gp-pop:has([data-game="poe"]) {
	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-poe, [data-game="poe"]) .gp-filters {
	background: var(--exile-texture), var(--exile-well);
}

.gp-pop:has([data-game="poe"]) {
	border-color: var(--exile-frame-hi, #B8963E);
	background: var(--exile-corners), var(--exile-pop-bg);
	--exile-frame-hi: #B8963E;
	--exile-frame: #6B5328;
	--exile-corners:
		linear-gradient(#B8963E, #B8963E) left 4px top 4px / 20px 2px no-repeat,
		linear-gradient(#B8963E, #B8963E) left 4px top 4px / 2px 20px no-repeat,
		linear-gradient(#B8963E, #B8963E) right 4px top 4px / 20px 2px no-repeat,
		linear-gradient(#B8963E, #B8963E) right 4px top 4px / 2px 20px no-repeat,
		linear-gradient(#B8963E, #B8963E) left 4px bottom 4px / 20px 2px no-repeat,
		linear-gradient(#B8963E, #B8963E) left 4px bottom 4px / 2px 20px no-repeat,
		linear-gradient(#B8963E, #B8963E) right 4px bottom 4px / 20px 2px no-repeat,
		linear-gradient(#B8963E, #B8963E) right 4px bottom 4px / 2px 20px no-repeat;
	--exile-pop-bg:
		radial-gradient(90% 60% at 50% 0%, rgba(165, 31, 26, 0.14), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 7px),
		linear-gradient(180deg, #18130F, #0A0807);
}

/* The card's class colour rides on the top edge as a thin enamel line under the bronze. */
[data-game="poe"].gp-pc-card {
	border-top: 2px solid color-mix(in srgb, var(--class, #B8963E) 70%, #000);
}

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

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

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

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

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

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

:is(body.is-game-poe, [data-game="poe"]) .gp-plate__name {
	font-family: var(--exile-face);
	font-variant: small-caps;
	font-weight: 700;
	letter-spacing: 0.02em;
}

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

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

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

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

:is(body.is-game-poe, [data-game="poe"]) .gp-badge--alive {
	background: #12210F;
	color: #A9D79F;
	border: 1px solid #2E5226;
}

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

/* The life bar of the nameplate and the experience bar: glassy blood red and old gold. */
:is(body.is-game-poe, [data-game="poe"]) .gp-plate__bar {
	border: 1px solid #000;
	box-shadow: 0 0 0 1px var(--exile-frame-lo);
}

/* ---- section tabs and the hero (shared components take the tokens; these add the edge) -------------- */

:is(body.is-game-poe, .is-game-poe) .gp-subnav {
	border-top: 1px solid var(--exile-frame);
	border-bottom: 1px solid var(--exile-frame);
	background: linear-gradient(180deg, #0F0C0A, #070605);
	box-shadow: inset 0 1px 0 rgba(227, 194, 123, 0.1), 0 8px 18px -12px #000;
}

:is(body.is-game-poe, .is-game-poe) .gp-subnav a {
	font-family: var(--exile-face);
	font-variant: small-caps;
	letter-spacing: 0.05em;
}

:is(body.is-game-poe, .is-game-poe) .gp-subnav [aria-current] {
	color: var(--gp-tab-active-ink);
	background: var(--gp-tab-active-bg);
	box-shadow: inset 0 -2px 0 var(--exile-frame-hi);
}

/* ---- the PoE details the shared build components leave to the look ----------------------------------- */

[data-game="poe"] .gp-asc::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 10deg, #B8963E 10deg 14deg, transparent 14deg 80deg, #B8963E 80deg 84deg, transparent 84deg 100deg, #B8963E 100deg 104deg, transparent 104deg 170deg, #B8963E 170deg 174deg, transparent 174deg 190deg, #B8963E 190deg 194deg, transparent 194deg 260deg, #B8963E 260deg 264deg, transparent 264deg 280deg, #B8963E 280deg 284deg, transparent 284deg 350deg, #B8963E 350deg 354deg, transparent 354deg);
	-webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%);
	mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%);
	pointer-events: none;
}

[data-game="poe"] .gp-now__tile .gp-now__h,
[data-game="poe"] .gp-build__h {
	position: relative;
}

/* Flask liquids (an SVG fill, so flat colours): life red, mana blue, hybrid violet, utility flasks by their stone. */
[data-game="poe"] {
	--gp-flask-life: #C9352B;
	--gp-flask-mana: #3A62D0;
	--gp-flask-hybrid: #8E4CC4;
	--gp-flask-silver: #C9D2D8;
	--gp-flask-jade: #4DB06A;
	--gp-flask-stone: #8C8377;
	--gp-flask-diamond: #DCE6FA;
	--gp-flask-gold: #D9A83A;
}

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

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