/*
 * Game Pulse look: fortnite (2.4). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="fortnite"] and .is-game-fortnite, then the game's own touches, all scoped to this game.
 *
 * Fortnite, our own take on its bright, playful interface: a storm-violet and sky-blue band, chunky slanted
 * uppercase titles on ribbons, parallelogram tabs, thick outlines with a hard drop shadow, the sunny yellow as the
 * highlight in the dark scheme and electric violet in the light one. Drawn in CSS with system fonts (Impact and
 * condensed fallbacks; nothing bundled); no game art and no Epic marks.
 */

[data-game="fortnite"],
.is-game-fortnite {
	--gp-surface: light-dark(#F4F6FF, #151A45);
	--gp-surface-2: light-dark(#FFFFFF, #1D2460);
	--gp-surface-sunk: light-dark(#E4E9FB, #0E1235);
	--gp-ink: light-dark(#151A3F, #EEF1FF);
	--gp-ink-muted: light-dark(#4A5279, #B4BCE6);
	--gp-ink-strong: light-dark(#0A0D29, #FFFFFF);
	--gp-accent: light-dark(#4B2BD8, #FFD83D);
	--gp-accent-ink: light-dark(#FFFFFF, #19133F);
	--gp-accent-2: light-dark(#0A5BC4, #63C7FF);
	--gp-title-ink: light-dark(#2E1A9E, #FFE45C);
	--gp-title-shadow: 0 2px 0 light-dark(rgba(75, 43, 216, 0.16), #070A24);
	--gp-head-font: Impact, "Haettenschweiler", "Arial Narrow Bold", "Roboto Condensed", "Bahnschrift", sans-serif-condensed, sans-serif;
	--gp-num-font: Impact, "Haettenschweiler", "Arial Narrow Bold", "Roboto Condensed", "Bahnschrift", sans-serif-condensed, sans-serif;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-frame-border: 2px solid light-dark(#1B1650, #3E4AB8);
	--gp-frame-radius: 12px;
	--gp-frame-shadow: 0 4px 0 light-dark(#1B1650, #070A24);
	--gp-frame-image: none;
	--gp-radius-inner: 8px;
	--gp-tab-bg: #1B1650;
	--gp-tab-ink: #E3E7FF;
	--gp-tab-active-bg: #FFD83D;
	--gp-tab-active-ink: #19133F;
	--gp-tab-shape: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	--gp-btn-bg: light-dark(#FFFFFF, #1D2460);
	--gp-btn-ink: light-dark(#151A3F, #EEF1FF);
	--gp-btn-border: 2px solid light-dark(#1B1650, #4A57C9);
	--gp-btn-hover-bg: light-dark(#FFF3B8, #2A3380);
	--gp-table-head-bg: #1B1650;
	--gp-table-head-ink: #FFE45C;
	--gp-row-alt: light-dark(rgba(75, 43, 216, 0.04), rgba(255, 255, 255, 0.035));
	--gp-row-hover: light-dark(rgba(75, 43, 216, 0.08), rgba(255, 216, 61, 0.08));
	--gp-grid-line: light-dark(#D3D9F5, #2C3577);
	--gp-pop-bg: light-dark(#FFFFFF, #1D2460);
	--gp-pop-border: 2px solid light-dark(#4B2BD8, #FFD83D);
	--gp-pop-shadow: 0 6px 0 light-dark(#1B1650, #070A24), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
	--gp-good: light-dark(#14702E, #6EE08C);
	--gp-bad: light-dark(#B0261E, #FF8F85);
	--gp-warn: light-dark(#7F5200, #FFD24D);
	--gp-series-1: light-dark(#4B2BD8, #FFD83D);
	--gp-series-2: light-dark(#0A5BC4, #63C7FF);
	--gp-hero-bg:
		radial-gradient(30rem 16rem at 92% 130%, rgba(168, 70, 255, 0.55), transparent 70%),
		radial-gradient(24rem 12rem at 6% -30%, rgba(99, 199, 255, 0.40), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 22px),
		linear-gradient(160deg, #0B1C6B 0%, #2A1C9E 55%, #5B1FA8 100%);
	--gp-hero-rule: #FFD83D;
	--gp-hero-accent: #FFE45C;
	--gp-hero-title: #FFFFFF;
	--gp-hero-ink: #E3E8FF;
	--gp-hero-pill: rgba(255, 216, 61, 0.6);
	--gp-tabbar-bg: #1B1650;
	--gp-tabbar-rule: #FFD83D;
	--gp-tabs-bg: #1B1650;
	--gp-tabs-rule: #3E4AB8;
	--gp-tabs-ink: #E3E7FF;
	--gp-tabs-active: #FFE45C;
	--gp-table-head-font: var(--gp-head-font);
}

/* Titles: chunky, slanted, uppercase, like a lobby screen. */
:is([data-game="fortnite"], .is-game-fortnite) :is(.gp-hero__title, .gp-door__title) {
	font-family: var(--gp-head-font);
	font-style: italic;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.is-game-fortnite .gp-hero__title {
	text-shadow: 0 3px 0 #0A0D29;
}

/* Panel titles sit on a slanted ribbon in the highlight colour. */
:is([data-game="fortnite"], .is-game-fortnite) .gp-panel__title {
	display: inline-block;
	padding: 0.15em 0.75em 0.1em;
	font-family: var(--gp-head-font);
	font-style: italic;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gp-accent-ink);
	text-shadow: none;
	background: var(--gp-accent);
	clip-path: polygon(0.5em 0, 100% 0, calc(100% - 0.5em) 100%, 0 100%);
}

/* The tabs: parallelograms, the current one in sunny yellow. */
.is-game-fortnite .gp-subnav a {
	font-family: var(--gp-head-font);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* KPI numbers in the heavy condensed face, with a sky-blue cap on each tile. */
:is([data-game="fortnite"], .is-game-fortnite) .gp-kpi {
	border-top: 4px solid var(--gp-accent-2);
}

:is([data-game="fortnite"], .is-game-fortnite) .gp-kpi__value {
	font-family: var(--gp-num-font);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* The home page door. */
[data-game="fortnite"] .gp-door__leader > span {
	font-family: var(--gp-head-font);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

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

/* 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-fortnite, [data-game="fortnite"]) .gp-about > summary {
	color: light-dark(#4B2BD8, #FFD83D);
}