/*
 * Pulse theme: the three game identities.
 *
 * Shared pages keep the amber-and-night base (pulse.css). A game's identity applies wherever its scope is present:
 *   [data-game="wow|osrs|poe"]                 markup from the Game Pulse plugin (boards, cards, maps, stats)
 *   .is-game-wow|osrs|poe                      theme patterns, and <body> on a game's pages (functions.php)
 *   .gp-race[data-race], .gp-race-chart[data-race], a race card linking to its board: the same, before the
 *                                              markup carries data-game
 * A scope re-points the palette presets (--wp--preset--color--*) and the component tokens (--gp-*, see the plugin
 * stylesheet), so the plugin's boards, tiles, charts, maps and forms take the game's look without new markup.
 * Colours are written with light-dark(): one declaration serves the light scheme, the dark scheme and the header
 * toggle (pulse.css sets color-scheme), and an element can force a scheme for its inside (the heroes and the crown
 * card are always night). Game art is each publisher's own (the Game Pulse plugin's bundled assets/official/); the\n * few drawn marks left (the Path of Exile frame, the alive and dead marks) are in ../svg. Nothing is fetched from\n * anywhere else.
 *
 * r12: the components read the look contract (docs/pilot/game-pulse-r12-design.md, section 2; the plugin's
 * assets/css/pulse.css defines the tokens). The values here feed it: the palette presets and the legacy tokens
 * (--gp-panel-bg, --gp-panel-border, --gp-radius...) are read by the contract's defaults on every game scope, and
 * the few contract tokens set here directly (fonts, table heads) sit on ".is-game-<game>, [data-game]" only, so a
 * game's look-<game>.css (loaded last, same weight) wins over them without !important. The body-only selectors keep
 * the palette, never a contract token.
 *
 * 1. Class and faction colours
 * 2. WoW: Forever
 * 3. OSRS Hardcore Worlds
 * 4. Path of Exile
 * 5. Game sections: the hero band, the tabs, the lead, the panel grid, the sources line, the hub's doors
 * 6. Class pictures
 * 7. Badges and the crown card
 */

/* 1. Class and faction colours, glyphs ------------------------------------ */

:root {
	/* WoW class colours (the long-standing community convention). */
	--class-warrior: #C69B6D;
	--class-paladin: #F48CBA;
	--class-hunter: #AAD372;
	--class-rogue: #FFF468;
	--class-priest: #FFFFFF;
	--class-shaman: #0070DD;
	--class-mage: #3FC7EB;
	--class-warlock: #8788EE;
	--class-druid: #FF7C0A;
	--faction-alliance: #1E40AF;
	--faction-alliance-bright: #60A5FA;
	--faction-horde: #991B1B;
	--faction-horde-bright: #F87171;
	/* Path of Exile classes, tinted by their attributes (strength red, dexterity green, intelligence blue). */
	--class-marauder: #C0392B;
	--class-ranger: #4E9A55;
	--class-witch: #4F7BD9;
	--class-duelist: #B5873A;
	--class-templar: #9B6FD0;
	--class-shadow: #3E9C9C;
	--class-scion: #D9C27A;
	/* PoE ascendancies take their base class's colour; unconfirmed newer classes the exile's. */
	--class-exile: #C8B88A;
	--class-juggernaut: var(--class-marauder);
	--class-berserker: var(--class-marauder);
	--class-chieftain: var(--class-marauder);
	--class-deadeye: var(--class-ranger);
	--class-pathfinder: var(--class-ranger);
	--class-warden: var(--class-ranger);
	--class-raider: var(--class-ranger);
	--class-necromancer: var(--class-witch);
	--class-elementalist: var(--class-witch);
	--class-occultist: var(--class-witch);
	--class-slayer: var(--class-duelist);
	--class-gladiator: var(--class-duelist);
	--class-champion: var(--class-duelist);
	--class-inquisitor: var(--class-templar);
	--class-hierophant: var(--class-templar);
	--class-guardian: var(--class-templar);
	--class-assassin: var(--class-shadow);
	--class-saboteur: var(--class-shadow);
	--class-trickster: var(--class-shadow);
	--class-ascendant: var(--class-scion);
	--class-luminary: var(--class-exile);
	--class-smith-of-kitava: var(--class-exile);
	--class-gambler: var(--class-exile);
	--class-bloodletter: var(--class-exile);
	--class-aristocrat: var(--class-exile);
	--class-antiquarian: var(--class-exile);
	--class-trapper: var(--class-exile);
	--class-primalist: var(--class-exile);
	--class-ritualist: var(--class-exile);
	--class-scavenger: var(--class-exile);
	--class-surgeon: var(--class-exile);
	--class-grinner: var(--class-exile);
	--class-harbinger: var(--class-exile);
	--class-servant-of-arakaali: var(--class-exile);
	--class-whisperer: var(--class-exile);
	--class-daughter-of-oshabi: var(--class-exile);
	--class-architect-of-chaos: var(--class-exile);
	--class-disciple-of-varashta: var(--class-exile);
	--class-son-of-oshabi: var(--class-exile);
	--class-polytheist: var(--class-exile);
	--class-fuser: var(--class-exile);
	--pulse-font-fantasy: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "Iowan Old Style", Georgia, serif;
	--pulse-font-chunky: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", sans-serif;
}

.gp-glyph,
.gp-class-glyph {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.22em;
	overflow: visible;
}

/* 2. WoW: Forever: night blue and gold, parchment panels, double gold rules -- */

body.pulse-game.is-game-wow,
.is-game-wow,
[data-game="wow"],
.gp-race[data-race="wow"],
.gp-race-chart[data-race="wow"],
.gp-race-card:has(a[href*="/wow/race/"]) {
	--wp--preset--color--primary: light-dark(#7A5200, #E5B53A);
	--wp--preset--color--primary-soft: light-dark(#F7EBC8, #22200F);
	--wp--preset--color--primary-bright: light-dark(#D4A017, #F2CC5C);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #0A1024);
	--wp--preset--color--primary-text: var(--wp--preset--color--primary);
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--wp--preset--color--accent: light-dark(#1E40AF, #7DB3FB);
	--wp--preset--color--ink: light-dark(#14213D, #EDE6D3);
	--wp--preset--color--muted: light-dark(#5B5240, #A9B1C9);
	--wp--preset--color--surface: light-dark(#FBF6EA, #0A1024);
	--wp--preset--color--surface-alt: light-dark(#F3E7CC, #111A36);
	--wp--preset--color--border: light-dark(#D9C49A, #2A3558);
	--pulse-danger: light-dark(#991B1B, #F87171);
	--pulse-header-bg: light-dark(rgba(251, 246, 234, 0.86), rgba(10, 16, 36, 0.82));
	--gp-rule: #B8901F;
	--gp-tone: light-dark(#B8901F, #D4A017);
	--gp-radius: 6px;
	--gp-radius-sm: 4px;
	--gp-badge-radius: 3px;
	--gp-panel-border: light-dark(#C9A54A, #6B5520);
	--gp-panel-bg:
		radial-gradient(140% 100% at 0% 0%, light-dark(rgba(255, 255, 255, 0.6), rgba(96, 165, 250, 0.07)), transparent 55%),
		radial-gradient(120% 120% at 100% 100%, light-dark(rgba(176, 128, 32, 0.14), rgba(212, 160, 23, 0.08)), transparent 60%),
		repeating-linear-gradient(103deg, light-dark(rgba(122, 82, 0, 0.035), rgba(255, 255, 255, 0.02)) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(13deg, light-dark(rgba(122, 82, 0, 0.03), rgba(255, 255, 255, 0.014)) 0 1px, transparent 1px 6px),
		light-dark(#FBF4E2, #0E1630);
	--gp-panel-alt-bg:
		radial-gradient(140% 100% at 0% 0%, light-dark(rgba(255, 255, 255, 0.45), rgba(96, 165, 250, 0.06)), transparent 55%),
		repeating-linear-gradient(103deg, light-dark(rgba(122, 82, 0, 0.04), rgba(255, 255, 255, 0.02)) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(13deg, light-dark(rgba(122, 82, 0, 0.03), rgba(255, 255, 255, 0.014)) 0 1px, transparent 1px 6px),
		light-dark(#F4E8CB, #111A36);
	--gp-panel-shadow: 0 1px 0 light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.04)) inset, 0 14px 30px -20px rgba(4, 8, 23, 0.55);
	--gp-map-bg:
		repeating-linear-gradient(0deg, light-dark(rgba(122, 82, 0, 0.08), rgba(96, 165, 250, 0.08)) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, light-dark(rgba(122, 82, 0, 0.08), rgba(96, 165, 250, 0.08)) 0 1px, transparent 1px 40px),
		var(--gp-panel-bg);
	--gp-bar: linear-gradient(90deg, #8F6A0A, #D4A017 55%, #F2D27A);
	--gp-bar-overlay: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(10, 16, 36, 0.45) calc(5% - 1px) 5%);
	--gp-bar-track: light-dark(#E6D6AE, #1B2547);
	--gp-bar-radius: 2px;
	--gp-live-bg: light-dark(#1E40AF, #7DB3FB);
	--gp-live-ink: light-dark(#FFFFFF, #0A1024);
	--gp-crown-light: #F6DC8C;
	--gp-crown: #D4A017;
	--gp-crown-dark: #8F6A0A;
	--gp-series-1: #D4A017;
	--gp-series-2: #60A5FA;
	--gp-series-3: #F87171;
	--gp-series-4: #AAD372;
	--gp-series-5: #8788EE;
	--heat-0: light-dark(#F7EFD9, #121B38);
	--heat-1: light-dark(#EEDCA6, #1E2B56);
	--heat-2: light-dark(#E2C46A, #34417A);
	--heat-3: light-dark(#C99A1E, #6B5A2A);
	--heat-4: light-dark(#8F6A0A, #B8901F);
	--heat-5: light-dark(#5C4300, #F2CC5C);
	--heat-ink-0: light-dark(#14213D, #EDE6D3);
	--heat-ink-1: light-dark(#14213D, #EDE6D3);
	--heat-ink-2: light-dark(#14213D, #EDE6D3);
	--heat-ink-3: light-dark(#14213D, #FFFFFF);
	--heat-ink-4: light-dark(#FFFFFF, #0A1024);
	--heat-ink-5: light-dark(#FFFFFF, #0A1024);
	color: var(--wp--preset--color--ink);
}

/* Ornate but restrained: an inner gold rule five pixels inside the gold border makes the double line. */
:is(.is-game-wow, [data-game="wow"], .gp-race[data-race="wow"]) :is(.gp-widget, .gp-stat, .gp-leader, .gp-race-card, .gp-table-wrap, .gp-race-chart, .gp-stat-chart, .gp-map, .gp-countdown-part, .gp-class-leader, .gp-death-form, .gp-race-filters, .is-style-card, .pulse-toc, .pulse-related),
:is(.gp-widget, .gp-race-card, .gp-race-chart, .gp-stat-chart, .gp-map, .gp-class-leader, .gp-death-form):is([data-game="wow"], .gp-race-chart[data-race="wow"], .gp-race-card:has(a[href*="/wow/race/"])) {
	outline: 1px solid color-mix(in srgb, var(--gp-rule) 55%, transparent);
	outline-offset: -5px;
}

:is(.is-game-wow, [data-game="wow"]) :is(.is-style-card, .pulse-toc, .pulse-related) {
	border-color: var(--gp-panel-border);
	border-radius: var(--gp-radius);
	background: var(--gp-panel-bg);
}

/* The contract tokens WoW: Forever sets here (a look-wow.css overrides them at the same weight). */
.is-game-wow,
[data-game="wow"] {
	--gp-head-font: var(--pulse-font-fantasy);
	--gp-table-head-bg: light-dark(#14213D, #060B1F);
	--gp-table-head-ink: #F2D27A;
}

:is(.is-game-wow, [data-game="wow"], .gp-race[data-race="wow"]) .gp-table thead th {
	border-bottom-color: var(--gp-rule);
	letter-spacing: 0.06em;
}

:is(body.is-game-wow, [data-game="wow"]) :is(.pulse-post-body, .wp-block-post-content) > h2 {
	font-family: var(--pulse-font-fantasy);
	font-weight: 700;
	letter-spacing: -0.01em;
}

:is(body.is-game-wow, [data-game="wow"]) :is(.pulse-post-body, .wp-block-post-content) > h2::after {
	content: "";
	display: block;
	width: 6rem;
	height: 5px;
	margin-top: 0.5rem;
	border-top: 1px solid var(--gp-rule);
	border-bottom: 1px solid var(--gp-rule);
}

/* 3. OSRS Hardcore Worlds: earth tones, bevelled stone, crisp edges -------- */

body.pulse-game.is-game-osrs,
.is-game-osrs,
[data-game="osrs"],
.gp-race[data-race="osrs"],
.gp-race-chart[data-race="osrs"],
.gp-race-card:has(a[href*="/osrs/race/"]) {
	--wp--preset--color--primary: light-dark(#2F5D3A, #D6B85C);
	--wp--preset--color--primary-soft: light-dark(#DCE8D0, #2A2A16);
	--wp--preset--color--primary-bright: light-dark(#5B8C5A, #E0C76E);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #121812);
	--wp--preset--color--primary-text: var(--wp--preset--color--primary);
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--wp--preset--color--accent: light-dark(#6B4F0E, #8FBF8C);
	--wp--preset--color--ink: light-dark(#1F2A1F, #E8DCB5);
	--wp--preset--color--muted: light-dark(#4A5340, #B5B093);
	--wp--preset--color--surface: light-dark(#F6F0DC, #121812);
	--wp--preset--color--surface-alt: light-dark(#E8DCB5, #1C241B);
	--wp--preset--color--border: light-dark(#B9A877, #3A4636);
	--pulse-danger: light-dark(#9F1C1C, #F87171);
	--pulse-header-bg: light-dark(rgba(246, 240, 220, 0.88), rgba(18, 24, 18, 0.84));
	--gp-tone: light-dark(#2F5D3A, #C8A951);
	--gp-radius: 0;
	--gp-radius-sm: 0;
	--gp-badge-radius: 2px;
	--gp-panel-border: light-dark(#6E5F3A, #4A4A4A);
	--gp-panel-bg: light-dark(#F1E8CA, #1E261D);
	--gp-panel-alt-bg: light-dark(#E8DCB5, #19201A);
	--gp-panel-shadow:
		inset 2px 2px 0 light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.07)),
		inset -2px -2px 0 light-dark(rgba(110, 95, 58, 0.35), rgba(0, 0, 0, 0.45)),
		2px 2px 0 light-dark(rgba(46, 38, 20, 0.55), #000000);
	--gp-map-bg:
		radial-gradient(circle at 1px 1px, light-dark(rgba(47, 93, 58, 0.25), rgba(200, 169, 81, 0.16)) 1px, transparent 1.6px) 0 0 / 16px 16px,
		light-dark(#EDE3C2, #1A2219);
	--gp-bar: linear-gradient(180deg, #74D357, #2E8B2C);
	--gp-bar-track: linear-gradient(180deg, #C2402F, #8A1F14);
	--gp-bar-radius: 0;
	--gp-live-bg: light-dark(#2F5D3A, #8FBF8C);
	--gp-live-ink: light-dark(#FFFFFF, #121812);
	--gp-leader-bg: light-dark(#E8DCB5, #1E261D);
	--gp-crown-light: #F2D27A;
	--gp-crown: #C8A951;
	--gp-crown-dark: #7A6420;
	--gp-series-1: #C8A951;
	--gp-series-2: #5B8C5A;
	--gp-series-3: #B91C1C;
	--gp-series-4: #E8DCB5;
	--gp-series-5: #6B8FB0;
	--heat-0: light-dark(#EEF1E0, #1A2219);
	--heat-1: light-dark(#D3E2C2, #22402A);
	--heat-2: light-dark(#A6C796, #2F5D3A);
	--heat-3: light-dark(#5B8C5A, #5B8C5A);
	--heat-4: light-dark(#2F5D3A, #9FC28F);
	--heat-5: light-dark(#173320, #DDEBC8);
	--heat-ink-0: light-dark(#1F2A1F, #E8DCB5);
	--heat-ink-1: light-dark(#1F2A1F, #E8DCB5);
	--heat-ink-2: light-dark(#1F2A1F, #F6F0DC);
	--heat-ink-3: light-dark(#FFFFFF, #0B110B);
	--heat-ink-4: light-dark(#FFFFFF, #121812);
	--heat-ink-5: light-dark(#FFFFFF, #121812);
	color: var(--wp--preset--color--ink);
}

:is(.is-game-osrs, [data-game="osrs"]) :is(.is-style-card, .pulse-toc, .pulse-related) {
	border-color: var(--gp-panel-border);
	border-width: 2px;
	border-radius: 0;
	background: var(--gp-panel-bg);
	box-shadow: var(--gp-panel-shadow);
}

/* The contract tokens Old School sets here (a look-osrs.css overrides them at the same weight). */
.is-game-osrs,
[data-game="osrs"] {
	--gp-head-font: var(--pulse-font-chunky);
	--gp-table-head-bg: light-dark(#4A4A4A, #2B2B2B);
	--gp-table-head-ink: #F2D27A;
}

:is(.is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"]) .gp-table thead th {
	border-bottom: 2px solid #1E1E1E;
	text-shadow: 1px 1px 0 #000000;
}

:is(.is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"]) :is(.gp-stat-value, .gp-leader-name, .gp-countdown-part strong) {
	font-family: var(--pulse-font-chunky);
	letter-spacing: -0.01em;
}

:is(.is-game-osrs, [data-game="osrs"]) :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-death-form button) {
	border-radius: 0;
	box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.35), 2px 2px 0 rgba(0, 0, 0, 0.6);
}

:is(.is-game-osrs, [data-game="osrs"]) :is(.gp-filter input[type="search"], .gp-filter select, .gp-form input, .gp-death-form input, .gp-death-form select, .gp-death-form textarea) {
	border-radius: 0;
	border-width: 2px;
	border-color: light-dark(#8A7A50, #0B0F0B) light-dark(#CFC199, #4A5A46) light-dark(#CFC199, #4A5A46) light-dark(#8A7A50, #0B0F0B);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.pulse-post-body, .wp-block-post-content) > h2 {
	font-family: var(--pulse-font-chunky);
	letter-spacing: -0.02em;
	text-shadow: 2px 2px 0 light-dark(rgba(200, 169, 81, 0.45), #000000);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.pulse-post-body, .wp-block-post-content) > h2::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.45em;
	vertical-align: 0.12em;
	background: var(--wp--preset--color--primary);
	box-shadow: 2px 2px 0 light-dark(rgba(46, 38, 20, 0.55), #000000);
}

/* 4. Path of Exile: obsidian and crimson, aged gold, ornate corners --------- */

body.pulse-game.is-game-poe,
.is-game-poe,
[data-game="poe"],
.gp-race[data-race="poe"],
.gp-race-chart[data-race="poe"],
.gp-race-card:has(a[href*="/poe/race/"]) {
	--wp--preset--color--primary: light-dark(#7F1D1D, #D1AE4E);
	--wp--preset--color--primary-soft: light-dark(#F3DCD6, #241A0E);
	--wp--preset--color--primary-bright: light-dark(#B91C1C, #E5C76A);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #0B0A0C);
	--wp--preset--color--primary-text: var(--wp--preset--color--primary);
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--wp--preset--color--accent: light-dark(#6E5714, #EF6B6B);
	--wp--preset--color--ink: light-dark(#1A1416, #E5D3A1);
	--wp--preset--color--muted: light-dark(#5B4C42, #A99B84);
	--wp--preset--color--surface: light-dark(#F7F1E3, #0B0A0C);
	--wp--preset--color--surface-alt: light-dark(#EDE3CA, #161215);
	--wp--preset--color--border: light-dark(#C9B88E, #3A2C22);
	--pulse-danger: light-dark(#9F1C1C, #F87171);
	--pulse-header-bg: light-dark(rgba(247, 241, 227, 0.88), rgba(11, 10, 12, 0.84));
	--gp-tone: light-dark(#7F1D1D, #B91C1C);
	--gp-radius: 0;
	--gp-radius-sm: 0;
	--gp-badge-radius: 0;
	--gp-panel-border: light-dark(#B39B5E, #5A4520);
	--gp-panel-bg:
		radial-gradient(120% 90% at 50% 0%, light-dark(rgba(255, 255, 255, 0.55), rgba(127, 29, 29, 0.24)), transparent 62%),
		radial-gradient(90% 70% at 50% 120%, light-dark(rgba(127, 29, 29, 0.06), rgba(0, 0, 0, 0.5)), transparent 70%),
		light-dark(#F8F2E4, #110E10);
	--gp-panel-alt-bg:
		radial-gradient(120% 90% at 50% 0%, light-dark(rgba(255, 255, 255, 0.4), rgba(127, 29, 29, 0.18)), transparent 62%),
		light-dark(#EFE5CD, #161215);
	--gp-panel-shadow: 0 0 0 1px light-dark(rgba(127, 29, 29, 0.1), rgba(0, 0, 0, 0.7)), 0 18px 36px -22px rgba(0, 0, 0, 0.75);
	--gp-map-bg:
		radial-gradient(70% 60% at 50% 45%, light-dark(rgba(127, 29, 29, 0.06), rgba(185, 28, 28, 0.16)), transparent 70%),
		light-dark(#F1E8D2, #0E0B0D);
	--gp-bar: linear-gradient(90deg, #4A0E0E, #9B1B1B 50%, #E04A3B);
	--gp-bar-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 45%, rgba(0, 0, 0, 0.3));
	--gp-bar-track: light-dark(#E2D3B2, #1D1416);
	--gp-bar-radius: 0;
	--gp-live-bg: light-dark(#7F1D1D, #EF6B6B);
	--gp-live-ink: light-dark(#FFFFFF, #0B0A0C);
	--gp-crown-light: #E5D3A1;
	--gp-crown: #B8962E;
	--gp-crown-dark: #6E5714;
	--gp-series-1: #D1AE4E;
	--gp-series-2: #E04A3B;
	--gp-series-3: #E5D3A1;
	--gp-series-4: #7F1D1D;
	--gp-series-5: #6E8FB8;
	--heat-0: light-dark(#F6ECE0, #161215);
	--heat-1: light-dark(#EDCFC2, #2E1416);
	--heat-2: light-dark(#DB9C8C, #561818);
	--heat-3: light-dark(#B91C1C, #8E1C1C);
	--heat-4: light-dark(#7F1D1D, #D04A3A);
	--heat-5: light-dark(#4A0E0E, #F0A08F);
	--heat-ink-0: light-dark(#1A1416, #E5D3A1);
	--heat-ink-1: light-dark(#1A1416, #E5D3A1);
	--heat-ink-2: light-dark(#1A1416, #F3E3C3);
	--heat-ink-3: light-dark(#FFFFFF, #FFFFFF);
	--heat-ink-4: light-dark(#FFFFFF, #0B0A0C);
	--heat-ink-5: light-dark(#FFFFFF, #0B0A0C);
	color: var(--wp--preset--color--ink);
}

/* The ornate frame: a nine-slice drawn in ../svg/poe-frame.svg, painted over the panel's edge. */
:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) :is(.gp-widget, .gp-leader, .gp-race-card, .gp-table-wrap, .gp-race-chart, .gp-stat-chart, .gp-map, .gp-death-form, .is-style-card),
:is(.gp-widget, .gp-race-card, .gp-race-chart, .gp-stat-chart, .gp-map, .gp-death-form):is([data-game="poe"], .gp-race-chart[data-race="poe"], .gp-race-card:has(a[href*="/poe/race/"])) {
	border: 1px solid var(--gp-panel-border);
	border-image: url("../svg/poe-frame.svg") 32 / 30px / 0 stretch;
}

/* Tables sit inside the frame's double rule, not on it. */
:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) .gp-table-wrap {
	padding: 10px;
}

:is(.is-game-poe, [data-game="poe"]) :is(.is-style-card, .pulse-toc, .pulse-related) {
	border-radius: 0;
	background: var(--gp-panel-bg);
	border-color: var(--gp-panel-border);
}

:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) :is(.gp-stat, .gp-countdown-part, .gp-class-leader) {
	border-color: var(--gp-panel-border);
	box-shadow: inset 0 0 0 1px light-dark(rgba(255, 255, 255, 0.5), rgba(127, 29, 29, 0.35)), 0 6px 14px -10px rgba(0, 0, 0, 0.6);
}

/* The contract tokens Path of Exile sets here (a look-poe.css overrides them at the same weight). */
.is-game-poe,
[data-game="poe"] {
	--gp-head-font: var(--pulse-font-fantasy);
	--gp-table-head-bg: light-dark(#1A1416, #070608);
	--gp-table-head-ink: #D1AE4E;
}

:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) .gp-table thead th {
	border-bottom: 1px solid #7F1D1D;
	font-variant: small-caps;
	text-transform: none;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}

:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) :is(.gp-leader-name, .gp-title, .gp-race-card h3) {
	font-variant: small-caps;
	letter-spacing: 0.02em;
}

:is(body.is-game-poe, [data-game="poe"]) :is(.pulse-post-body, .wp-block-post-content) > h2 {
	font-family: var(--pulse-font-fantasy);
	font-variant: small-caps;
	font-weight: 700;
	letter-spacing: 0.02em;
}

:is(body.is-game-poe, [data-game="poe"]) :is(.pulse-post-body, .wp-block-post-content) > h2::after {
	content: "";
	display: block;
	width: 8rem;
	height: 2px;
	margin-top: 0.5rem;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-bright), #B8962E 60%, transparent);
}

/* 5. Game sections: one page anatomy for every game --------------------------
 *
 * Every page of a game section reads the same way (templates/page-game.html, the plugin's section header):
 *   .gp-hero      the hero band: the game's palette and its own icons (no key art), always night
 *   .gp-subnav    the game's tabs, right under the hero
 *   .gp-lead      one lead paragraph
 *   .gp-grid      the panels: two columns at desktop, one on phones; .gp-panel--wide spans both
 *   .gp-panel     one panel with its title (.gp-panel__title); components inside drop their own frames
 *   .gp-sources-line  every source note of the page, once, at its foot
 */

body.pulse-game {
	background-color: var(--wp--preset--color--surface);
}

.gp-section {
	--gp-section-gap: clamp(1rem, 2.4vw, 1.75rem);
}

.gp-hero {
	color-scheme: dark;
	position: relative;
	isolation: isolate;
	margin-block: 0 !important;
	padding: clamp(1rem, 2.6vw, 1.75rem) var(--wp--preset--spacing--40) clamp(0.85rem, 2vw, 1.25rem);
	color: var(--gp-hero-ink, #F4EAD0);
	background: var(--gp-hero-bg, linear-gradient(160deg, #0B0F1A, #1F2937));
	border-bottom: 3px solid var(--gp-hero-rule, #D97706);
	overflow: hidden;
}

.gp-hero.has-art::after {
	content: "";
	position: absolute;
	inset: 0 0 0 40%;
	z-index: -1;
	background: var(--gp-hero-art) right center / cover no-repeat;
	opacity: 0.35;
	-webkit-mask: linear-gradient(90deg, transparent, #000 45%);
	mask: linear-gradient(90deg, transparent, #000 45%);
}

.gp-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	display: grid;
	gap: 0.45rem;
}

.gp-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gp-hero-accent, #F59E0B);
}

.gp-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

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

.gp-hero__crest {
	width: 28px;
	height: auto;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.gp-hero__title {
	margin: 0;
	font-family: var(--gp-head-font, inherit);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.1;
	color: var(--gp-hero-title, #FFFFFF);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.gp-hero__facts,
.gp-hero__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-hero__facts li {
	padding: 0.15rem 0.6rem;
	font-size: 0.85rem;
	border: 1px solid var(--gp-hero-pill, rgba(255, 255, 255, 0.25));
	border-radius: var(--gp-badge-radius, 999px);
	background: rgba(0, 0, 0, 0.25);
}

.gp-hero__icons {
	gap: 0.3rem;
}

/* Compact (r12): the icons are a small strip beside the facts; their names are their tooltips. */
.gp-hero__icons li {
	display: inline-flex;
	align-items: center;
	color: var(--class, currentColor);
}

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

.gp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1rem;
}

/* One sentence that says what the section gives, shown whole (w15: no line clamp cutting it mid-word). */
.gp-hero__summary {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 0.95rem;
	line-height: 1.45;
	opacity: 0.92;
	text-wrap: balance;
}

@media (max-width: 640px) {
	.gp-hero__icons,
	.gp-hero__summary {
		display: none;   /* phones: the page's lead says what it gives, the data starts in the first screen */
	}

	.gp-hero__facts li:nth-child(n + 3) {
		display: none;
	}

	/* Phones: the hero stays a band, so the page's data starts in the first screen. A tab page drops the fact chips
	   (its overview carries them) and every hero is tighter, with a smaller title. */
	.gp-hero.is-compact {
		padding-top: 0.7rem;
	}

	.gp-hero.is-compact .gp-hero__inner {
		gap: 0.3rem;
	}

	.gp-hero.is-compact .gp-hero__title {
		font-size: 1.4rem;
		line-height: 1.15;
	}

	.gp-hero.is-compact .gp-hero__eyebrow {
		font-size: 0.72rem;
	}

	.gp-hero.is-compact .gp-hero__crest {
		width: 22px;
		height: 22px;
	}

	.gp-hero.is-tab .gp-hero__meta {
		display: none;
	}
}

.gp-hero__icons img {
	display: block;
	border-radius: var(--gp-icon-radius, 4px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gp-icon-ring, rgba(255, 255, 255, 0.18));
	background: rgba(0, 0, 0, 0.35);
}

/* The tabs: the game's own sub-navigation, scrolling sideways on a phone. */
.gp-subnav {
	position: sticky;
	top: var(--gp-sticky-top, 0px);
	z-index: 40;
	margin-block: 0 var(--gp-section-gap) !important;
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--gp-tabbar-bg, var(--gp-tabs-bg, #111827));
	border-bottom: 1px solid var(--gp-tabbar-rule, var(--gp-tabs-rule, rgba(255, 255, 255, 0.12)));
	color-scheme: dark;
}

.gp-subnav.is-stuck {
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.6);
}

.gp-subnav__probe {
	display: block;
	height: 0;
	margin: 0 !important;
}

.gp-subnav ul {
	position: relative;
	display: flex;
	gap: 0.25rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: 0.3rem 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.gp-subnav ul::-webkit-scrollbar {
	display: none;
}

/* A soft edge where more tabs wait to the side (pulse.js marks it). */
.gp-subnav.has-more-right ul {
	-webkit-mask: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
	mask: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}

.gp-subnav.has-more-left ul {
	-webkit-mask: linear-gradient(90deg, transparent, #000 2.5rem);
	mask: linear-gradient(90deg, transparent, #000 2.5rem);
}

.gp-subnav.has-more-left.has-more-right ul {
	-webkit-mask: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
	mask: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.gp-subnav li {
	scroll-snap-align: center;
}

.gp-subnav a {
	display: block;
	padding: 0.5rem 0.95rem;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	color: var(--gp-tab-ink, var(--gp-tabs-ink, #E5E7EB));
	background: var(--gp-tab-bg, transparent);
	clip-path: var(--gp-tab-shape, none);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.gp-subnav a:hover,
.gp-subnav a:focus-visible {
	color: var(--gp-tab-active-ink, var(--gp-tabs-active, #FBBF24));
}

.gp-subnav a[aria-current="page"] {
	color: var(--gp-tab-active-ink, var(--gp-tabs-active, #FBBF24));
	background: var(--gp-tab-active-bg, transparent);
	border-bottom-color: currentColor;
}

/* The lead and the sources line read in the centred content column, like every other text block (7 Nov 2026: a
   right padding that kept the measure inside the wide box pushed the text into the left half of the page). */
.gp-section .gp-section__body > p:is(.gp-lead, .gp-sources-line) {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--wp--style--global--content-size, 720px), 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.gp-section .gp-section__body > :is(.gp-about, .gp-toc) {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--wp--style--global--wide-size, 1200px), 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.gp-section .gp-section__body > .gp-about {
	max-width: min(var(--wp--style--global--content-size, 720px), 100%) !important;
}

.gp-lead {
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.55;
	color: var(--gp-ink, var(--wp--preset--color--ink));
}

/* "About this page": the lead's first sentence stays; the rest folds away (closed by default). */
.gp-section .gp-section__body > .gp-lead:has(+ .gp-about) {
	margin-bottom: 0.25rem;
}

.gp-about {
	margin-top: 0 !important;
	font-size: 0.95rem;
	color: var(--gp-ink-muted, var(--wp--preset--color--muted));
}

.gp-about > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0;
	font-weight: 650;
	color: var(--gp-accent, var(--wp--preset--color--primary-text));
	cursor: pointer;
	list-style: none;
}

.gp-about > summary::-webkit-details-marker {
	display: none;
}

.gp-about > summary::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 150ms ease;
}

.gp-about[open] > summary::before {
	transform: rotate(45deg);
}

.gp-about__body p {
	margin: 0.4rem 0 0;
	line-height: 1.6;
}

.gp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gp-section-gap, 1.5rem);
	margin-block: var(--gp-section-gap, 1.5rem);
}

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

	.gp-panel--wide {
		grid-column: 1 / -1;
	}
}

.gp-panel {
	min-width: 0;
	margin: 0 !important;
	padding: clamp(1rem, 2vw, 1.5rem);
	border: var(--gp-frame-border, 1px solid var(--wp--preset--color--border));
	border-image: var(--gp-frame-image, none);
	border-radius: var(--gp-frame-radius, 12px);
	background: var(--gp-surface, var(--wp--preset--color--surface-alt));
	box-shadow: var(--gp-frame-shadow, none);
	color: var(--gp-ink, var(--wp--preset--color--ink));
}

.gp-panel > * + * {
	margin-block-start: 0.85rem;
}

.gp-panel__title {
	margin: 0 0 0.75rem;
	font-family: var(--gp-head-font, inherit);
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--gp-panel-title, var(--gp-title-ink, var(--wp--preset--color--ink)));
	text-shadow: var(--gp-title-shadow, none);
}

/* Inside a panel, a component is content, not another card. */
.gp-grid > .gp-panel :is(.gp-widget, .gp-race-chart, .gp-stat-chart, .gp-map, .gp-class-leaders, .gp-death-form, .gp-register, .gp-stats-section, .gp-race, .gp-overview, .gp-timeline) {
	margin: 0;
	padding: 0;
	border: 0;
	border-image: none;
	outline: 0;
	box-shadow: none;
	background: none;
}

.gp-grid > .gp-panel .gp-widget .gp-title {
	display: none;   /* the panel already names it */
}

.gp-sources-line {
	margin-top: var(--gp-section-gap, 1.5rem);
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

/* Guides keep the reading column with the section's hero and tabs above. */
.gp-section .pulse-toc {
	margin-top: var(--gp-section-gap, 1.5rem);
}

/* The publishers' legal lines (in the footer, styled there; elsewhere plain small print). */
.gp-legal__line {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Footer (w15): four columns (the site, games, explore, search), then the publishers' notices as one block of small
   print in one colour, then the copyright line. */
.pulse-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* Phones and tablets: the site's note and the search across, Games and Explore side by side between them. */
.pulse-footer__about,
.pulse-footer__search {
	grid-column: 1 / -1;
}

@media (min-width: 1000px) {
	.pulse-footer__grid {
		grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr);
	}

	.pulse-footer__about,
	.pulse-footer__search {
		grid-column: auto;
	}
}

.pulse-footer__grid > * {
	margin-block: 0 !important;
}

.pulse-footer__about > * + * {
	margin-top: 0.75rem;
}

.pulse-footer .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.pulse-footer__tagline {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.pulse-footer__note {
	margin-bottom: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.pulse-footer__heading {
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.pulse-footer .wp-block-navigation,
.pulse-footer__games {
	gap: 0.55rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.pulse-footer__games {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pulse-footer .wp-block-navigation a,
.pulse-footer__games a {
	padding: 0;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.pulse-footer .wp-block-navigation .wp-block-navigation__container {
	gap: 0.55rem;
}

/* Every search field (the footer, the 404 page, the search page) in the page's own colours, in either scheme. */
.wp-block-search__input,
.pulse-footer .wp-block-search__input {
	min-height: 2.75rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
}

/* The publishers' notices: one colour whatever game a line belongs to (a line's data-game scope must not repaint it
   with that game's ink, which faded the Path of Exile line on light pages), two columns on wide screens. */
.pulse-legal {
	/* Resolved here, in the footer's scope: a line's data-game scope redefines the preset colours. */
	--pulse-legal-ink: var(--wp--preset--color--muted);
	--pulse-legal-strong: var(--wp--preset--color--ink);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.pulse-legal .gp-legal {
	display: contents;
}

.pulse-legal:has(.gp-legal__line) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.pulse-legal:has(.gp-legal__line) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pulse-legal__heading {
		grid-column: 1 / -1;
	}
}

.pulse-legal__heading {
	margin-bottom: 0.25rem;
}

.pulse-footer .pulse-legal .gp-legal__line[data-game],
.pulse-footer .pulse-legal .gp-legal__line {
	margin: 0;
	font-family: inherit;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--pulse-legal-ink);
	text-shadow: none;
	opacity: 1;
}

.pulse-footer .pulse-legal .gp-legal__line[data-game] a[href] {
	color: var(--pulse-legal-ink);
	font-family: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-shadow: none;
}

.pulse-footer .pulse-legal .gp-legal__line[data-game] a[href]:hover {
	color: var(--pulse-legal-strong);
}

/* Each game's band, tabs and nameplate tokens. */
.is-game-wow,
[data-game="wow"] {
	--gp-hero-bg:
		radial-gradient(60rem 18rem at 85% -4rem, rgba(96, 165, 250, 0.22), transparent 70%),
		radial-gradient(40rem 14rem at 10% 120%, rgba(212, 160, 23, 0.18), transparent 70%),
		linear-gradient(180deg, #0A1024, #121C3D);
	--gp-hero-rule: #D4A017;
	--gp-hero-accent: #F2CC5C;
	--gp-hero-title: #F6E7B8;
	--gp-hero-pill: rgba(212, 160, 23, 0.55);
	--gp-icon-ring: #B8901F;
	--gp-tabs-bg: #0A1024;
	--gp-tabs-rule: #6B5520;
	--gp-tabs-ink: #D8CFB6;
	--gp-tabs-active: #F2CC5C;
	--gp-plate-bg: linear-gradient(180deg, #1B2340, #0A1024);
	--gp-plate-border: #6B5520;
	--gp-plate-ink: #EDE6D3;
	--gp-plate-bar: linear-gradient(180deg, #A35BE0, #5C1F9E);
	--gp-plate-track: #1A1033;
}

.is-game-osrs,
[data-game="osrs"] {
	--gp-hero-bg:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 22px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 44px),
		linear-gradient(180deg, #4E4535, #3A3226);
	--gp-hero-rule: #1E1A13;
	--gp-hero-accent: #FF981F;
	--gp-hero-title: #FFFF00;
	--gp-hero-pill: #6B6B6B;
	--gp-hero-ink: #E8DCB5;
	--gp-icon-radius: 0;
	--gp-icon-ring: #5E5442;
	--gp-tabs-bg: #3E3529;
	--gp-tabs-rule: #1E1A13;
	--gp-tabs-ink: #FF981F;
	--gp-tabs-active: #FFFF00;
	--gp-plate-bg: #3E3529;
	--gp-plate-border: #1E1A13;
	--gp-plate-ink: #FFFF00;
	--gp-plate-bar: linear-gradient(180deg, #00C800, #007A00);
	--gp-plate-track: linear-gradient(180deg, #C80000, #7A0000);
}

.is-game-poe,
[data-game="poe"] {
	--gp-hero-bg:
		radial-gradient(50rem 16rem at 50% 130%, rgba(185, 28, 28, 0.35), transparent 70%),
		radial-gradient(30rem 12rem at 90% -10%, rgba(184, 150, 46, 0.16), transparent 70%),
		linear-gradient(180deg, #0B0A0C, #17110F);
	--gp-hero-rule: #B8962E;
	--gp-hero-accent: #D1AE4E;
	--gp-hero-title: #E5D3A1;
	--gp-hero-pill: rgba(184, 150, 46, 0.5);
	--gp-icon-radius: 0;
	--gp-icon-ring: #6E5714;
	--gp-tabs-bg: #0B0A0C;
	--gp-tabs-rule: #5A4520;
	--gp-tabs-ink: #C8B88A;
	--gp-tabs-active: #E5C76A;
	--gp-plate-bg: linear-gradient(180deg, #1B1416, #0B0A0C);
	--gp-plate-border: #5A4520;
	--gp-plate-ink: #E5D3A1;
	--gp-plate-bar: radial-gradient(120% 140% at 30% 20%, #FF6B57, #B01E1E 55%, #4A0E0E);
	--gp-plate-track: #1D1416;
}

.is-game-pirates,
[data-game="pirates"] {
	--wp--preset--color--primary: light-dark(#1F4E79, #E3C77A);
	--wp--preset--color--accent: light-dark(#8A5A12, #8EC5E8);
	--wp--preset--color--surface: light-dark(#F7F2E3, #0B1726);
	--wp--preset--color--surface-alt: light-dark(#EDE3C8, #10223A);
	--wp--preset--color--border: light-dark(#C9B88E, #24405F);
	--wp--preset--color--ink: light-dark(#13253A, #EEE4C8);
	--wp--preset--color--muted: light-dark(#4F5B66, #A9B6C4);
	--gp-head-font: var(--pulse-font-fantasy);
	--gp-hero-bg:
		repeating-radial-gradient(circle at 20% 140%, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 26px),
		linear-gradient(180deg, #0B1E33, #12324F);
	--gp-hero-rule: #C9A34A;
	--gp-hero-accent: #E3C77A;
	--gp-hero-title: #F5EAD0;
	--gp-tabs-bg: #0B1E33;
	--gp-tabs-rule: #24405F;
	--gp-tabs-ink: #D7CBA8;
	--gp-tabs-active: #E3C77A;
}

/* The home page's scope strip (2.2.1, owner 13 Nov 2026: "just show the scope of the website, like leaderboards and
   races"): what the site covers in one line of pills, the cross-game pages among them as links. One line that scrolls
   sideways on a phone, so the doors start in the first screen. */
.pulse-scope {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pulse-scope__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.95rem;
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.pulse-scope__item svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wp--preset--color--primary-text);
}

a.pulse-scope__item {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--border));
}

a.pulse-scope__item:hover,
a.pulse-scope__item:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--surface-alt));
}

@media (max-width: 640px) {
	.pulse-scope {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 0.25rem;
		scrollbar-width: none;
	}

	.pulse-scope li {
		scroll-snap-align: start;
	}
}

.pulse-hub__intro + .gp-doors,
.pulse-hub__intro ~ .gp-doors {
	margin-top: var(--wp--preset--spacing--40);
}

/* Yours (2.3, assets/js/hubs.js): followed games first, a visit streak and badges, kept in the visitor's browser. */
.gp-you {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem 1.5rem;
	align-items: center;
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: 1rem 1.25rem;
	max-width: 100%;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	text-align: left;
}

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

@media (min-width: 900px) {
	.gp-you {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

.gp-you__title {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-text);
}

.gp-you__body {
	display: grid;
	gap: 0.6rem;
}

.gp-you__stats {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

.gp-you__stats strong {
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}

.gp-you__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-you__badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 999px;
}

.gp-you__badge strong {
	color: var(--wp--preset--color--ink);
}

.gp-you__badge.is-earned {
	color: #1C1305;
	background: linear-gradient(180deg, #FCD34D, #F59E0B);
	border: 1px solid #B45309;
}

.gp-you__badge.is-earned strong {
	color: #1C1305;
}

.gp-you__badge.is-earned::before {
	content: "★";
	align-self: center;
}

.gp-you__note {
	margin: 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

/* The Follow button on each door, and a followed door's star. */
.gp-door {
	position: relative;
}

.gp-door__follow {
	position: absolute;
	top: clamp(0.8rem, 1.6vw, 1.1rem);
	right: clamp(0.8rem, 1.6vw, 1.1rem);
	min-height: 2rem;
	padding: 0.2rem 0.75rem;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gp-hero-title, #FFFFFF);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--gp-hero-pill, rgba(255, 255, 255, 0.35));
	border-radius: 999px;
	cursor: pointer;
}

.gp-door__follow:hover,
.gp-door__follow:focus-visible {
	background: rgba(0, 0, 0, 0.55);
}

.gp-door__follow[aria-pressed="true"] {
	color: #1C1305;
	background: var(--gp-hero-accent, #F59E0B);
	border-color: transparent;
}

.gp-door.is-followed {
	box-shadow: 0 0 0 2px var(--gp-hero-accent, #F59E0B);
}

.wp-block-navigation .gp-games__entry.is-followed .gp-games__name::after {
	content: " ★";
	color: var(--wp--preset--color--primary-text);
}

/* The home page's doors: one per game, each in its own night. w15: every door has the same five parts (head, live
   number, what the section gives, one featured entry, tabs) on rows it shares with its neighbour (subgrid), so a row
   of doors lines up part by part and no door is taller for nothing. */
.pulse-hub__intro h1 {
	margin-top: 0.25rem;
	text-wrap: balance;
}

.gp-doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

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

@media (min-width: 1180px) {
	.gp-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gp-door {
	color-scheme: dark;
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0.75rem;
	padding: 1.1rem;
	color: var(--gp-hero-ink, #F4EAD0);
	background: var(--gp-hero-bg, #111827);
	border: 1px solid var(--gp-tabs-rule, rgba(255, 255, 255, 0.15));
	border-bottom: 3px solid var(--gp-hero-rule, #D97706);
	border-radius: var(--gp-radius, 12px);
}

@supports not (grid-template-rows: subgrid) {
	.gp-door {
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}

	.gp-door__links {
		margin-top: auto !important;
	}
}

.gp-door > * {
	min-width: 0;
	margin: 0;
}

.gp-door__head {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.55rem;
}

.gp-door__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
}

.gp-door__icons img {
	width: auto;
	height: 26px;
	border-radius: var(--gp-icon-radius, 4px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gp-icon-ring, rgba(255, 255, 255, 0.18));
}

.gp-door__title {
	margin: 0;
	font-family: var(--gp-head-font, inherit);
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.2;
}

.gp-door__title a {
	color: var(--gp-hero-title, #FFFFFF);
	text-decoration: none;
}

.gp-door__title a:hover,
.gp-door__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* News since the visitor's last visit (2.2, assets/js/hubs.js): a small link under the title to that game's news. */
.gp-door__new {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.15rem 0.7rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #111827;
	background: var(--gp-hero-accent, #F59E0B);
	border-radius: 999px;
	text-decoration: none;
}

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

/* The live number: the first thing a door says, its trend (or its share) beside it. */
.gp-door__live {
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "num" "what";
	align-content: end;
	column-gap: 1.25rem;
	margin: 0;
}

.gp-door__live.has-trend {
	grid-template-columns: minmax(0, max-content) minmax(6rem, 1fr);
	grid-template-areas: "num trend" "what trend";
}

.gp-door__number {
	grid-area: num;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--gp-hero-title, #FFFFFF);
	overflow-wrap: anywhere;
}

.gp-door__what {
	grid-area: what;
	padding-top: 0.35rem;
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--gp-hero-accent, #F59E0B);
}

.gp-door__live .gp-kpi__spark {
	grid-area: trend;
	align-self: center;
	width: 100%;
	height: 2.75rem;
	margin: 0;
}

.gp-door__live .gp-kpi__spark-line {
	stroke: var(--gp-hero-accent, #F59E0B);
}

.gp-door__live .gp-kpi__spark-area {
	fill: color-mix(in srgb, var(--gp-hero-accent, #F59E0B) 18%, transparent);
}

.gp-door__meter {
	grid-area: trend;
	align-self: center;
	display: block;
	height: 0.7rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--gp-hero-accent, #F59E0B) 22%, transparent);
	border-radius: 999px;
}

.gp-door__meter > span {
	display: block;
	height: 100%;
	background: var(--gp-hero-accent, #F59E0B);
	border-radius: inherit;
}

.gp-door__text {
	grid-row: 3;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--gp-hero-ink, #F4EAD0) 88%, transparent);
}

/* One featured entry: its label on a line of its own, then the nameplate (or plates). */
.gp-door__feature {
	grid-row: 4;
	align-self: start;
}

.gp-door__leader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.gp-door__leader > span:first-child {
	flex: 1 0 100%;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gp-hero-accent, #F59E0B);
}

.gp-door__leader time,
.gp-door__leader small {
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--gp-hero-ink, #F4EAD0) 85%, transparent);
}

.gp-door__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-door__facts li {
	padding: 0.2rem 0.65rem;
	font-size: 0.85rem;
	border: 1px solid var(--gp-hero-pill, rgba(255, 255, 255, 0.3));
	border-radius: var(--gp-badge-radius, 999px);
}

.gp-door__links {
	grid-row: 5;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-door__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.3rem 0.85rem;
	color: var(--gp-tabs-active, #FBBF24);
	border: 1px solid var(--gp-hero-pill, rgba(255, 255, 255, 0.3));
	border-radius: var(--gp-badge-radius, 999px);
	text-decoration: none;
}

.gp-door__links a:hover,
.gp-door__links a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 6. Class pictures ------------------------------------------------------------ */

img.gp-class-glyph {
	width: 40px;
	height: auto;
	vertical-align: middle;
	border-radius: var(--gp-icon-radius, 4px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--class, transparent);
}

.gp-class-glyph--initial {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-weight: 700;
	color: #0B0A0C;
	background: var(--class, #C8B88A);
}

.gp-skill-icon {
	vertical-align: -4px;
}
/* 7. Badges and the crown card --------------------------------------------- */

/* Drawn marks for alive and dead (the word still says it). */
:root .gp-badge--alive::before,
:root .gp-badge--dead::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
}

/* Written out per badge: a url() inside a custom property would resolve against the page, not this file. */
:root .gp-badge--alive::before {
	-webkit-mask: url("../svg/glyph-alive.svg") center / contain no-repeat;
	mask: url("../svg/glyph-alive.svg") center / contain no-repeat;
}

:root .gp-badge--dead::before {
	-webkit-mask: url("../svg/glyph-dead.svg") center / contain no-repeat;
	mask: url("../svg/glyph-dead.svg") center / contain no-repeat;
}

:is(.is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"]) .gp-badge--dead {
	color: #FFFFFF;
	background: #9F1C1C;
	border-color: #5E0F0F;
}

:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) .gp-badge--dead {
	color: #F3E3C3;
	background: #7F1D1D;
	border-color: #B8962E;
	font-variant: small-caps;
}

:is(.is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) .gp-badge--alive {
	color: light-dark(#2E6B3A, #7FC08A);
	border-color: #B8962E;
	font-variant: small-caps;
}

/* The crown card is night in every scheme, in each game's own night. */
:is(.is-game-wow, [data-game="wow"], .gp-race[data-race="wow"], .is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"], .is-game-poe, [data-game="poe"], .gp-race[data-race="poe"]) .gp-leader {
	color-scheme: dark;
	color: var(--wp--preset--color--ink);
	--gp-leader-bg: var(--gp-panel-bg);
}

:is(.is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"]) .gp-leader {
	border: 2px solid;
	border-color: #6B6B6B #151515 #151515 #6B6B6B;
}

:is(.is-game-osrs, [data-game="osrs"], .gp-race[data-race="osrs"]) .gp-leader-name {
	color: #F2D27A;
	text-shadow: 2px 2px 0 #000000;
}

:is(.is-game-wow, [data-game="wow"], .gp-race[data-race="wow"]) .gp-leader-name {
	color: #F6E7B8;
}

/* One alignment for the whole site (owner, 7 Nov 2026: "all text is off centered"). Every block is either the centred
   content column (reading text) or the centred wide box (panels, tables, maps); the hero band and the section tabs are
   centred on the same axis, so headings, text and panels share one centre line. */
.gp-hero__inner {
	justify-items: center;
	text-align: center;
}

.gp-hero__eyebrow,
.gp-hero__facts,
.gp-hero__icons {
	justify-content: center;
}

.gp-subnav ul {
	justify-content: safe center;
}

.pulse-hub__intro {
	text-align: center;
}

.pulse-hub__intro > * {
	margin-inline: auto !important;
}

/* 6. The header's Games menu (owner, 8 Nov 2026: "Games should be one menu with a drop down selector") ------------
 *
 * The Game Pulse plugin prints .gp-games in the primary navigation: a disclosure button (aria-expanded,
 * aria-controls) and a panel listing every game section with its icon, name and a live line. Without JavaScript the
 * button stays hidden, a "Games" link shows, and the panel opens on hover and on keyboard focus. In the phone menu
 * the panel flows inside the open menu. */

.wp-block-navigation .gp-games {
	position: relative;
}

.wp-block-navigation .gp-games > :is(.gp-games__link, .gp-games__toggle) {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.375rem 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-navigation .gp-games > [hidden] {
	display: none;
}

.gp-games__chevron {
	transition: transform var(--wp--custom--transition, 180ms ease);
}

.gp-games__toggle[aria-expanded="true"] .gp-games__chevron {
	transform: rotate(180deg);
}

.wp-block-navigation .gp-games.is-current-section > :is(.gp-games__link, .gp-games__toggle) {
	color: var(--wp--preset--color--primary-text);
}

.wp-block-navigation .gp-games__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	z-index: 60;
	box-sizing: border-box;
	width: min(36rem, calc(100vw - 2rem));
	padding: 0.75rem;
	transform: translateX(-50%);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	text-align: left;
}

/* Without JavaScript: a plain list of links, opened by hover or by focus on any of its links. */
.wp-block-navigation .gp-games:not(.is-enhanced) .gp-games__panel {
	display: none;
}

.wp-block-navigation .gp-games:not(.is-enhanced):is(:hover, :focus-within) .gp-games__panel {
	display: block;
}

.wp-block-navigation .gp-games__panel[hidden] {
	display: none;
}

.wp-block-navigation .gp-games__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-navigation .gp-games__entry {
	display: block;
	margin: 0;
}

.wp-block-navigation .gp-games__item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

.wp-block-navigation .gp-games__item:hover,
.wp-block-navigation .gp-games__item:focus-visible {
	background: var(--wp--preset--color--surface-alt);
}

.wp-block-navigation .gp-games__item[aria-current] {
	background: var(--wp--preset--color--primary-soft);
}

.gp-games__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
}

.gp-games__icon :is(img, svg) {
	max-width: 28px;
	max-height: 28px;
}

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

.gp-games__name {
	font-weight: 650;
	line-height: 1.3;
}

.gp-games__fact {
	overflow: hidden;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The phone menu fills the screen: the header's frosted backdrop would make it the containing block of the fixed
   menu (which was then clipped to the header's 64 px), so the backdrop is dropped while the menu is open. */
html.has-modal-open .pulse-header,
.pulse-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--wp--preset--color--surface);
}

/* The phone menu (w15): full-width rows read from the left, each a 48 px tap target with a rule between them, instead
   of a right-aligned column of small links. */
.pulse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 3.25rem;
}

.pulse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.pulse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pulse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 3rem;
	padding: 0.5rem 0.25rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* The phone menu: the games flow in the open menu, one per line. */
.wp-block-navigation__responsive-container.is-menu-open .gp-games {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .gp-games__panel {
	position: static;
	width: 100%;
	padding: 0.25rem 0 0;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .gp-games__list {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 599px) {
	.wp-block-navigation .gp-games__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 9. Phone standard (2.2, wave 16 plan section 5) ---------------------------------------------------------------
 *
 * Touch targets of at least 44 px wherever a finger is the pointer (or the window is phone-narrow), and the safe areas
 * of a notched phone: the viewport covers the whole screen (viewport-fit=cover, theme functions.php), so the header,
 * the open phone menu, the page and the footer keep their content clear of the notch, the rounded corners and the
 * home indicator. */
@media (pointer: coarse), (max-width: 640px) {
	.gp-subnav a,
	.gp-door__links a,
	.gp-toc a,
	.gp-stat-chart__ranges a,
	.pulse-footer__games a,
	.pulse-footer .wp-block-navigation-item__content,
	.wp-block-navigation .gp-games__item {
		display: inline-flex;
		align-items: center;
		min-height: 44px !important;
	}

	.gp-chip,
	.gp-seg label,
	.gp-filters select,
	.gp-filters input[type="search"],
	.gp-filters button,
	.gp-btn,
	.gp-about > summary,
	.gp-switch > summary,
	.gp-hero select,
	.wp-block-search__input,
	.wp-block-search__button,
	.wp-element-button,
	.gp-find__field {
		min-height: 44px !important;
	}

	.gp-chip,
	.gp-seg label,
	.gp-about > summary,
	.gp-switch > summary {
		display: inline-flex;
		align-items: center;
	}

	.pulse-scheme-toggle,
	.gp-find__open,
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
	}

	/* A floor under every control a finger presses, whatever size a game's look gives it. */
	:is(button, select, summary, [role="button"], input[type="search"], input[type="text"], input[type="email"], textarea),
	.gp-switch select,
	.gp-pc-peek,
	.gp-p2-card__head button {
		min-height: 44px !important;
	}

	:is(button, [role="button"]):not(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
		min-width: 44px;
	}

	/* Links that sit in a line of text or a nameplate keep their place in the layout and get a taller hit area. */
	.wp-block-site-title a,
	.gp-hero__eyebrow a,
	.gp-plate__name a,
	.gp-p2-card li > a,
	.gp-pc-card li > a {
		display: inline-block;
		padding-block: 13px;
		margin-block: -13px;
	}

	/* The footer's lists: each row is its own target, so the rows need no gap between them. */
	.pulse-footer .wp-block-navigation .wp-block-navigation__container,
	.pulse-footer__games {
		gap: 0;
	}
}

.wp-site-blocks {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

.wp-site-blocks > header .pulse-header {
	padding-top: max(var(--wp--preset--spacing--20), env(safe-area-inset-top, 0px)) !important;
}

.pulse-footer {
	padding-bottom: max(var(--wp--preset--spacing--40), calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
	padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
	padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
	padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
}

/* The directory puts tracking tools before visit badges. Use the existing WordPress layout and game tokens. */
.pulse-hub {
	padding-top: 1.5rem !important;
	padding-bottom: 2.5rem !important;
}
.pulse-hub__intro { text-align: left; }
.pulse-hub .pulse-hub__intro > * { margin-inline: 0 !important; }
.pulse-hub__intro h1 { font-size: clamp(1.65rem, 3vw, 2.1rem); margin-bottom: 0.35rem; }
.pulse-hub__description { max-width: 75ch; margin-top: 0; font-size: 0.95rem; color: var(--wp--preset--color--muted); }
.pulse-hub .pulse-scope { justify-content: flex-start; flex-wrap: wrap; overflow: visible; margin-block: 1rem; }
.pulse-hub .pulse-scope__item { min-height: 44px; padding: 0.25rem 0.75rem; font-size: 0.85rem; border-radius: 6px; }
.pulse-hub .gp-you { display: block; padding: 0; margin-block: 0.75rem; border: 0; background: none; }
.pulse-hub .gp-you[hidden], .gp-directory[hidden], .gp-door[hidden], .gp-directory__empty[hidden] { display: none; }
.pulse-hub .gp-you summary { min-height: 44px; align-content: center; cursor: pointer; font-size: 0.85rem; font-weight: 650; }
.pulse-hub .gp-you summary span { color: var(--wp--preset--color--muted); font-weight: 400; }
.pulse-hub .gp-you__body { padding: 0.75rem 1rem; border-left: 2px solid var(--wp--preset--color--border); }
.gp-directory { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding-top: 0.8rem; border-top: 1px solid var(--wp--preset--color--border); }
.gp-directory label { font-size: 0.9rem; font-weight: 650; }
.gp-directory input { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.9rem; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.gp-directory__views { display: flex; gap: 0.25rem; }
.gp-directory button { min-height: 44px; padding: 0.5rem 0.7rem; font: inherit; font-size: 0.85rem; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); cursor: pointer; }
.gp-directory button[aria-pressed="true"] { border-color: var(--wp--preset--color--primary-text); background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-text); }
.gp-directory__count { font-size: 0.8rem; color: var(--wp--preset--color--muted); }
.gp-directory__empty { padding: 1rem; background: var(--wp--preset--color--surface-alt); }
.pulse-hub__data-note { margin-block: 0.65rem 0 !important; font-size: 0.8rem; color: var(--wp--preset--color--muted); }
.pulse-hub .gp-doors { gap: 1rem; margin-top: 1rem; }
.pulse-hub .gp-door__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.6rem; }
.pulse-hub .gp-door__icons { grid-column: 1; display: flex; gap: 0.15rem; min-height: 30px; margin: 0; }
.pulse-hub .gp-door__icons img { width: 24px; height: 24px; object-fit: contain; }
.pulse-hub .gp-door__title { grid-column: 1 / -1; margin: 0; font-size: 1.2rem; line-height: 1.3; }
.pulse-hub .gp-door__follow { position: static; grid-column: 2; grid-row: 1; min-height: 44px; padding: 0.25rem 0.65rem; margin-top: -0.35rem; }
.pulse-hub .gp-door__live { column-gap: 0.6rem; row-gap: 0.25rem; align-content: start; }
.pulse-hub .gp-door__live.has-trend { grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.8fr); grid-template-areas: "num trend" "what what" "reading reading"; }
.pulse-hub .gp-door__live:not(.has-trend) { grid-template-areas: "num" "what" "reading"; }
.gp-door__reading { grid-area: reading; display: block; margin-top: 0.35rem; font: 0.72rem/1.5 var(--wp--preset--font-family--body); color: var(--gp-hero-ink, #F4EAD0); opacity: 0.9; }
.gp-door__reading a { color: inherit; text-decoration: underline; }
.gp-door__reading.is-stale { font-weight: 700; }
.pulse-hub .gp-door__number { font-size: 2.1rem; }
.pulse-hub .gp-door__text { font: 0.875rem/1.5 var(--wp--preset--font-family--body); }
.pulse-hub .gp-door__links { gap: 0.4rem; }
.pulse-hub .gp-door__links a { min-height: 44px; padding: 0.25rem 0.6rem; font-size: 0.85rem; }

/* A solid header cannot trap the fixed WordPress dialog in a backdrop-filter containing block.
   Open the mobile menu before the desktop links and search can collide on tablets. */
.pulse-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--surface); }
.pulse-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; transform: none; opacity: 1; inset: 0; box-sizing: border-box; min-height: 100dvh; }
.wp-block-navigation .gp-games__panel { max-height: min(32rem, calc(100dvh - 6rem)); overflow-y: auto; }
@media (max-width: 1099px) {
	.pulse-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.pulse-header .wp-block-navigation__responsive-container-open { display: flex !important; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
	.pulse-header .wp-block-navigation__responsive-container.is-menu-open { display: block !important; }
	.pulse-header .is-menu-open .gp-games__panel { position: static; transform: none; width: 100%; max-height: none; box-shadow: none; margin-block: 0.5rem; }
	.pulse-header .is-menu-open .gp-games__toggle { min-height: 48px; width: 100%; justify-content: space-between; }
	.pulse-header .is-menu-open .gp-games__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.pulse-header .is-menu-open .gp-games__list { grid-template-columns: minmax(0, 1fr); }
	.pulse-hub .gp-you summary span { display: none; }
	.gp-directory label { flex-basis: 100%; }
	.gp-directory input { flex-basis: 100%; }
	.gp-directory__count { margin-left: auto; }
	.pulse-hub .pulse-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
	.pulse-hub .pulse-scope__item { display: flex; height: 100%; box-sizing: border-box; white-space: normal; }
}