/*
 * Game Pulse look: lol (2.4). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="lol"] and .is-game-lol, then the game's own touches, all scoped to this game.
 *
 * League of Legends, our own take on its night blue and gold: deep navy panels with a thin gold frame and a dark inner
 * line, bevelled tab corners, gold small-capital titles in a classical serif, a teal second colour. Drawn in CSS with
 * system fonts; no Riot logo, typeface or art.
 */

[data-game="lol"],
.is-game-lol {
	--gp-surface: light-dark(#F5F1E8, #0D1A2E);
	--gp-surface-2: light-dark(#FFFFFF, #12223A);
	--gp-surface-sunk: light-dark(#E9E3D6, #08111F);
	--gp-ink: light-dark(#10192B, #E9E1CC);
	--gp-ink-muted: light-dark(#4A5468, #A8B2C4);
	--gp-ink-strong: light-dark(#070C17, #FFFFFF);
	--gp-accent: #C8A55A;
	--gp-accent-ink: #0A1222;
	--gp-accent-2: light-dark(#1D6F7A, #5FC9D3);
	--gp-title-ink: light-dark(#6E5317, #E0BE72);
	--gp-title-shadow: none;
	--gp-head-font: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: "Bahnschrift", "Segoe UI", "Roboto Condensed", system-ui, sans-serif;
	--gp-frame-border: 1px solid light-dark(#C9B27A, #6A5527);
	--gp-frame-radius: 3px;
	--gp-frame-shadow: inset 0 0 0 1px light-dark(rgba(255, 255, 255, 0.7), rgba(5, 11, 23, 0.85)), 0 14px 30px -22px rgba(0, 0, 0, 0.75);
	--gp-frame-image: none;
	--gp-tab-bg: #0A1426;
	--gp-tab-ink: #CFC6AE;
	--gp-tab-active-bg: #C8A55A;
	--gp-tab-active-ink: #0A1222;
	--gp-tab-shape: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
	--gp-tabbar-bg: #0A1426;
	--gp-tabbar-rule: #6A5527;
	--gp-btn-bg: light-dark(#FFFFFF, #12223A);
	--gp-btn-ink: light-dark(#10192B, #E9E1CC);
	--gp-btn-border: 1px solid light-dark(#BFAF8A, #45567A);
	--gp-btn-hover-bg: light-dark(#F1E7CF, #1A2E4B);
	--gp-table-head-bg: #0A1426;
	--gp-table-head-ink: #E0BE72;
	--gp-row-alt: light-dark(rgba(16, 25, 43, 0.035), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(200, 165, 90, 0.14), rgba(200, 165, 90, 0.1));
	--gp-grid-line: light-dark(#DCD2BC, #24344F);
	--gp-good: light-dark(#1C6B3C, #7FD69B);
	--gp-bad: light-dark(#A12A1F, #FF9C88);
	--gp-warn: light-dark(#855A00, #F2C25C);
	--gp-pop-bg: light-dark(#FFFFFF, #12223A);
	--gp-pop-border: 1px solid #C8A55A;
	--gp-pop-shadow: 0 18px 40px -14px rgba(3, 8, 18, 0.7);
	--gp-series-1: #C8A55A;
	--gp-series-2: light-dark(#1D6F7A, #5FC9D3);
	--gp-bar: #C8A55A;
	--gp-radius-inner: 2px;
	--gp-hero-bg:
		radial-gradient(36rem 16rem at 88% -4rem, rgba(200, 165, 90, 0.3), transparent 70%),
		radial-gradient(28rem 14rem at 4% 125%, rgba(63, 184, 196, 0.2), transparent 70%),
		repeating-linear-gradient(60deg, rgba(200, 165, 90, 0.05) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(-60deg, rgba(200, 165, 90, 0.05) 0 1px, transparent 1px 22px),
		linear-gradient(160deg, #050B17 0%, #0B1A31 55%, #13233B 100%);
	--gp-hero-rule: #C8A55A;
	--gp-hero-accent: #E0BE72;
	--gp-hero-title: #F3EBD7;
	--gp-hero-ink: #CBD3DF;
	--gp-hero-pill: rgba(200, 165, 90, 0.55);
	--gp-tabs-bg: #0A1426;
	--gp-tabs-rule: #6A5527;
	--gp-tabs-ink: #CFC6AE;
	--gp-tabs-active: #E0BE72;
}

/* Titles in gold small capitals over a fading gold rule. */
:is([data-game="lol"], .is-game-lol) :is(.gp-panel__title, .gp-hero__title, .gp-door__title) {
	font-family: var(--gp-head-font);
	font-variant-caps: small-caps;
	letter-spacing: 0.05em;
}

:is([data-game="lol"], .is-game-lol) .gp-panel__title {
	padding-bottom: 0.35rem;
	background: linear-gradient(90deg, #C8A55A, rgba(200, 165, 90, 0) 70%) no-repeat left bottom / 100% 1px;
}

/* The hero's title sits on a gold hairline with a small diamond, our own ornament. */
:is([data-game="lol"], .is-game-lol) .gp-hero__title {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

:is([data-game="lol"], .is-game-lol) .gp-hero__eyebrow::after {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: 0.5rem;
	border: 1px solid #C8A55A;
	transform: rotate(45deg);
	vertical-align: middle;
}

/* Buttons and chips: square, gold-edged; the checked one filled with gold. */
:is([data-game="lol"], .is-game-lol) .gp-btn {
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.82rem;
	font-weight: 700;
}

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