/*
 * Game Pulse look: pubg (2.3). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="pubg"] and .is-game-pubg, then the game's own touches, all scoped to this game.
 *
 * PUBG: Battlegrounds, olive drab and khaki with the battle royale yellow; crate planks in the hero; condensed stencil-like
 * uppercase titles. Drawn in CSS; no game art.
 */

[data-game="pubg"],
.is-game-pubg {
	--gp-surface: light-dark(#F3EFE4, #1A1A15);
	--gp-surface-2: light-dark(#FFFCF3, #22221B);
	--gp-surface-sunk: light-dark(#E6DFCB, #121210);
	--gp-ink: light-dark(#22201A, #ECE6D3);
	--gp-ink-muted: light-dark(#5C5747, #B5AE97);
	--gp-ink-strong: light-dark(#110F0A, #FFFBEF);
	--gp-accent: #F2A900;
	--gp-accent-ink: #15140F;
	--gp-accent-2: light-dark(#556B2F, #A3B86C);
	--gp-title-ink: light-dark(#3A3523, #F2C447);
	--gp-title-shadow: none;
	--gp-head-font: "Bahnschrift", "Agency FB", "Roboto Condensed", "Arial Narrow", sans-serif;
	--gp-frame-border: 1px solid light-dark(#C9BE9C, #3A382B);
	--gp-frame-radius: 2px;
	--gp-frame-shadow: inset 0 3px 0 #F2A900, 0 10px 24px -18px rgba(0, 0, 0, 0.6);
	--gp-tab-bg: #1B1B14;
	--gp-tab-ink: #D9D2BC;
	--gp-tab-active-bg: #F2A900;
	--gp-tab-active-ink: #15140F;
	--gp-btn-bg: light-dark(#FFFCF3, #22221B);
	--gp-btn-ink: light-dark(#22201A, #ECE6D3);
	--gp-btn-border: 1px solid light-dark(#C9BE9C, #4A4736);
	--gp-btn-hover-bg: light-dark(#F5E7B8, #2E2D23);
	--gp-grid-line: light-dark(#DCD3B9, #34322A);
	--gp-pop-bg: light-dark(#FFFCF3, #22221B);
	--gp-pop-border: 1px solid #F2A900;
	--gp-series-1: #F2A900;
	--gp-hero-bg:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 64px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 22px),
		radial-gradient(36rem 12rem at 80% -2rem, rgba(242, 169, 0, 0.25), transparent 70%),
		linear-gradient(180deg, #1B1B14, #2E2C1F);
	--gp-hero-rule: #F2A900;
	--gp-hero-accent: #F2C447;
	--gp-hero-title: #FFF7E0;
	--gp-hero-ink: #E4DCC4;
	--gp-hero-pill: rgba(242, 169, 0, 0.55);
	--gp-tabs-bg: #1B1B14;
	--gp-tabs-rule: #3A382B;
	--gp-tabs-ink: #D9D2BC;
	--gp-tabs-active: #F2C447;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
	--gp-frame-image: none;
	--gp-tab-shape: none;
	--gp-table-head-bg: #1B1B14;
	--gp-table-head-ink: #F2C447;
	--gp-row-alt: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
	--gp-good: light-dark(#1F6B35, #7AD69A);
	--gp-bad: light-dark(#A12A1F, #FF9C88);
	--gp-warn: light-dark(#8A5A00, #F2C25C);
	--gp-pop-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

:is([data-game="pubg"], .is-game-pubg) :is(.gp-panel__title, .gp-hero__title, .gp-door__title) {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* The "About this page" fold sits on the page, not on a panel: the accent as text, at 4.5:1 in either scheme. */
:is(body.is-game-pubg, [data-game="pubg"]) .gp-about > summary {
	color: light-dark(#7A5A00, #F2A900);
}