/*
 * Game Pulse look: wow (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="wow"] and .is-game-wow, then the game's own ornaments, all scoped to this game.
 *
 * Our own drawing of the classic-era interface, in CSS only: tooltip panels in deep navy with a thin light-grey
 * rounded border and a dark inner edge, gold titles, class colours on names, item-quality colours (poor, common,
 * uncommon, rare, epic, legendary) for highlights, red-lacquer buttons with gold text, and boards that read like the
 * Armory's ladder tables. Parchment stays only on the guides (the theme draws it). No game art beyond the bundled
 * official icons (assets/official/wow, with their notices); the fan-site notice stays.
 *
 * Font: Marcellus (weight 400, latin subset), SIL Open Font License 1.1 (assets/fonts/wow/OFL.txt), copyright 2012
 * Brian J. Bonislawsky DBA Astigmatic, Reserved Font Name "Marcellus"; from the @fontsource/marcellus npm package,
 * version 5.3.0. An open flared serif standing in for the game's own title face, which is commercial and not bundled.
 * Body text stays in the system stack.
 */

@font-face {
	font-family: "GP Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/wow/marcellus-latin-400-normal.woff2") format("woff2");
}

/* A Georgia fallback sized to Marcellus, so the swap does not shift the layout. */
@font-face {
	font-family: "GP Marcellus Fallback";
	src: local("Georgia");
	size-adjust: 98%;
	ascent-override: 98%;
	descent-override: 26%;
	line-gap-override: 0%;
}

[data-game="wow"],
.is-game-wow {
	/* Item quality, as the game colours item names (text-safe tints on the navy for rare and epic). */
	--gp-q-poor: #9D9D9D;
	--gp-q-common: #FFFFFF;
	--gp-q-uncommon: #1EFF00;
	--gp-q-rare: #3D9BFF;
	--gp-q-epic: #B868F5;
	--gp-q-legendary: #FF8000;
	--gp-wow-gold: #FFD100;
	--gp-wow-navy: #08102A;
	--gp-wow-edge: #BFC3CC;

	--gp-surface: linear-gradient(180deg, rgba(14, 24, 56, 0.97), rgba(5, 9, 26, 0.98));
	--gp-surface-2: rgba(22, 34, 72, 0.9);
	--gp-surface-sunk: rgba(0, 3, 14, 0.6);
	--gp-ink: #ECECEC;
	--gp-ink-muted: #B9BFCF;
	--gp-ink-strong: #FFFFFF;
	--gp-accent: #FFD100;
	--gp-accent-ink: #1A0D00;
	--gp-accent-2: #3D9BFF;
	--gp-title-ink: #FFD100;
	--gp-title-shadow: 0 1px 0 #000, 0 0 2px #000, 1px 1px 1px #000;
	--gp-head-font: "GP Marcellus", "GP Marcellus Fallback", "Palatino Linotype", Georgia, serif;
	--gp-num-font: "GP Marcellus", "GP Marcellus Fallback", Georgia, serif;
	--gp-frame-border: 1px solid var(--gp-wow-edge);
	--gp-frame-radius: 7px;
	--gp-frame-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 12px 26px -14px rgba(0, 0, 0, 0.85);
	--gp-frame-image: radial-gradient(120% 60% at 50% 0%, rgba(80, 120, 220, 0.12), transparent 60%);
	--gp-tab-bg: linear-gradient(180deg, #1B2340, #0A1024);
	--gp-tab-ink: #E8D9A0;
	--gp-tab-active-bg: linear-gradient(180deg, #C52A21 0%, #8E120C 55%, #5E0805 100%);
	--gp-tab-active-ink: #FFD100;
	--gp-tab-shape: none;
	--gp-btn-bg: linear-gradient(180deg, #C52A21 0%, #8E120C 55%, #5E0805 100%);
	--gp-btn-ink: #FFD100;
	--gp-btn-border: 1px solid #2A0402;
	--gp-btn-hover-bg: linear-gradient(180deg, #E0372C 0%, #A8180F 55%, #6E0A06 100%);
	--gp-table-head-bg: linear-gradient(180deg, #17224A, #0B1330);
	--gp-table-head-ink: #FFD100;
	--gp-row-alt: rgba(255, 255, 255, 0.035);
	--gp-row-hover: rgba(255, 209, 0, 0.08);
	--gp-grid-line: rgba(191, 195, 204, 0.16);
	--gp-good: #1EFF00;
	--gp-bad: #FF4A3D;
	--gp-warn: #FFD100;
	--gp-pop-bg: linear-gradient(180deg, rgba(14, 24, 56, 0.98), rgba(5, 9, 26, 0.99));
	--gp-pop-border: 1px solid var(--gp-wow-edge);
	--gp-pop-shadow: inset 0 0 0 1px #000, 0 10px 28px rgba(0, 0, 0, 0.75);
	--gp-hero-bg:
		radial-gradient(50rem 16rem at 80% -4rem, rgba(70, 120, 230, 0.32), transparent 70%),
		radial-gradient(36rem 14rem at 12% 120%, rgba(255, 209, 0, 0.14), transparent 70%),
		radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.6), transparent 2px),
		radial-gradient(1px 1px at 62% 18%, rgba(255, 255, 255, 0.5), transparent 2px),
		radial-gradient(1px 1px at 88% 62%, rgba(255, 255, 255, 0.45), transparent 2px),
		linear-gradient(180deg, #050A1E, #0E1838);

	/* The shared stylesheet's current names, until the r12 core merge reads only the tokens above. */
	--gp-panel-title: var(--gp-title-ink);
	--gp-panel-border: var(--gp-wow-edge);
	--gp-panel-bg: var(--gp-frame-image), var(--gp-surface);
	--gp-panel-alt-bg: var(--gp-surface-2);
	--gp-panel-shadow: var(--gp-frame-shadow);
	--gp-tabs-bg: #050A1E;
	--gp-tabs-ink: #E8D9A0;
	--gp-tabs-active: #FFD100;
	--gp-tabs-rule: #3A4466;
	--gp-hero-title: #FFD100;
	--gp-hero-rule: #FFD100;
	--gp-rule: #5A6380;
	--gp-radius: 7px;
}

/* ---- the hero band: a night sky, the title in gold ---- */

.gp-hero.is-game-wow {
	background: var(--gp-hero-bg);
	border-bottom: 1px solid #5A6380;
	box-shadow: inset 0 -1px 0 #000, 0 2px 0 rgba(255, 209, 0, 0.35);
}

.gp-hero.is-game-wow .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--gp-wow-gold);
	text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 22px rgba(255, 209, 0, 0.25);
}

.gp-hero.is-game-wow .gp-hero__eyebrow {
	font-family: var(--gp-head-font);
	color: #FFFFFF;
}

.gp-hero.is-game-wow .gp-hero__facts li {
	border: 1px solid var(--gp-wow-edge);
	border-radius: 5px;
	color: #FFFFFF;
	background: linear-gradient(180deg, rgba(14, 24, 56, 0.95), rgba(5, 9, 26, 0.95));
	box-shadow: inset 0 0 0 1px #000;
}

.gp-hero.is-game-wow .gp-hero__icons img {
	border-radius: 4px;
	box-shadow: 0 0 0 1px #000, 0 0 0 2px #6C717D, 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ---- section tabs: dark bars with gold text; the open tab is the red-lacquer button ---- */

.gp-subnav.is-game-wow {
	background: linear-gradient(180deg, #0A1024, #050A1E);
	border-bottom: 1px solid #3A4466;
}

.gp-subnav.is-game-wow a {
	font-family: var(--gp-head-font);
	color: var(--gp-tab-ink);
	border-radius: 4px 4px 0 0;
	text-shadow: 0 1px 0 #000;
}

.gp-subnav.is-game-wow a:hover {
	color: #FFFFFF;
	background: rgba(255, 209, 0, 0.08);
}

.gp-subnav.is-game-wow :is(a[aria-current="page"], .is-active > a, a.is-active) {
	color: var(--gp-tab-active-ink);
	background: var(--gp-tab-active-bg);
	box-shadow: inset 0 1px 0 rgba(255, 190, 150, 0.45), inset 0 0 0 1px #2A0402;
}

/* ---- panels: the classic tooltip ---- */

body.is-game-wow .gp-section .gp-panel {
	border: var(--gp-frame-border);
	border-radius: var(--gp-frame-radius);
	background: var(--gp-frame-image), var(--gp-surface);
	box-shadow: var(--gp-frame-shadow);
	color: var(--gp-ink);
	outline: none;
}

body.is-game-wow .gp-section .gp-panel__title {
	font-family: var(--gp-head-font);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

body.is-game-wow .gp-section .gp-panel :is(p, li, dd, td) {
	color: var(--gp-ink);
}

body.is-game-wow .gp-section .gp-panel a:not(.wp-element-button):not(.gp-btn) {
	color: var(--gp-q-rare);
}

body.is-game-wow .gp-section .gp-panel a:not(.wp-element-button):not(.gp-btn):hover {
	color: #8CC6FF;
}

/* Inside a tooltip every heading is gold and every label, caption and legend light, whatever the page scheme. */
body.is-game-wow .gp-section .gp-panel :is(h2, h3, h4):not(.gp-panel__title) {
	font-family: var(--gp-head-font);
	font-weight: 400;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

body.is-game-wow .gp-section .gp-panel :is(label, legend, figcaption, small, .gp-legend, .gp-bars__label, .gp-bars__value) {
	color: var(--gp-ink);
}

body.is-game-wow .gp-section .gp-panel :is(caption, .gp-bars__sub, .gp-source, .gp-note--honest) {
	color: var(--gp-ink-muted);
}

body.is-game-wow .gp-section .gp-panel :is(.gp-death-form, .gp-form, .gp-filter, .gp-race-filters) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	border: 1px solid #6C717D;
	border-radius: 4px;
	color: #FFFFFF;
	background: rgba(0, 3, 14, 0.75);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.is-game-wow .gp-section .gp-panel ::placeholder {
	color: #8D93A3;
}

/* A character's name keeps its class colour when it is a link. */
body.is-game-wow .gp-section .gp-panel :is(.gp-plate__name, .gp-racer-name, .gp-leader-name, .gp-class-leader__name) a:not(.wp-element-button) {
	color: var(--class, inherit);
}

body.is-game-wow .gp-section .gp-panel .gp-class-leader .gp-class-leader__class {
	font-family: var(--gp-head-font);
	letter-spacing: 0.04em;
	color: var(--class, var(--gp-wow-gold));
	text-shadow: var(--gp-title-shadow);
}

body.is-game-wow .gp-section .gp-panel strong {
	color: #FFFFFF;
}

/* Components inside a tooltip lose the theme's inner gold rule and their own card frame. */
body.is-game-wow .gp-section :is(.gp-widget, .gp-stat, .gp-leader, .gp-race-card, .gp-table-wrap, .gp-race-chart, .gp-stat-chart, .gp-countdown-part, .gp-class-leader, .gp-death-form, .gp-race-filters) {
	outline: none;
}

/* ---- stat tiles and countdowns: smaller tooltips inside the panel ---- */

body.is-game-wow .gp-section :is(.gp-stat, .gp-countdown-part, .gp-leader) {
	border: 1px solid rgba(191, 195, 204, 0.55);
	border-radius: 5px;
	background: linear-gradient(180deg, rgba(22, 34, 72, 0.85), rgba(8, 14, 36, 0.9));
	box-shadow: inset 0 0 0 1px #000;
	color: var(--gp-ink);
}

body.is-game-wow .gp-section :is(.gp-stat-value, .gp-countdown-part strong) {
	font-family: var(--gp-head-font);
	font-weight: 400;
	color: var(--gp-wow-gold);
	text-shadow: var(--gp-title-shadow);
}

body.is-game-wow .gp-section :is(.gp-stat-label, .gp-stat-note, .gp-countdown-part span, .gp-note) {
	color: var(--gp-ink-muted);
}

/* ---- boards: the Armory's ladder tables ---- */

body.is-game-wow .gp-section .gp-table-wrap {
	border: 1px solid rgba(191, 195, 204, 0.5);
	border-radius: 5px;
	background: rgba(0, 3, 14, 0.45);
	box-shadow: inset 0 0 0 1px #000;
}

body.is-game-wow .gp-section .gp-table {
	color: var(--gp-ink);
	font-variant-numeric: tabular-nums;
}

body.is-game-wow .gp-section .gp-table thead th {
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gp-table-head-ink);
	background: var(--gp-table-head-bg);
	border-bottom: 1px solid rgba(255, 209, 0, 0.45);
	text-shadow: 0 1px 0 #000;
}

body.is-game-wow .gp-section .gp-table tbody tr:nth-child(even) {
	background: var(--gp-row-alt);
}

body.is-game-wow .gp-section .gp-table tbody tr:hover {
	background: var(--gp-row-hover);
}

body.is-game-wow .gp-section .gp-table :is(td, th) {
	border-color: var(--gp-grid-line);
}

/* Ranks in item quality: first legendary, second and third epic, the top ten rare. */
body.is-game-wow .gp-section .gp-table tbody tr td:first-child {
	font-family: var(--gp-head-font);
	color: var(--gp-ink-muted);
}

body.is-game-wow .gp-section .gp-table tbody tr:nth-child(-n+10) td:first-child { color: var(--gp-q-rare); }
body.is-game-wow .gp-section .gp-table tbody tr:nth-child(-n+3) td:first-child { color: var(--gp-q-epic); }
body.is-game-wow .gp-section .gp-table tbody tr:first-child td:first-child { color: var(--gp-q-legendary); text-shadow: 0 0 8px rgba(255, 128, 0, 0.45); }

/* Names in their class colours (the plates and leaders already carry the class). */
body.is-game-wow .gp-section :is(.gp-racer-name, .gp-leader-name, .gp-class-leader__name, .gp-plate__name) {
	font-weight: 700;
	text-shadow: 0 1px 0 #000;
}

body.is-game-wow .gp-section :is(.gp-racer-sub, .gp-leader-sub, .gp-leader-meta, .gp-class-leader__meta, .gp-plate__meta) {
	color: var(--gp-ink-muted);
}

body.is-game-wow .gp-section .gp-plate--wow {
	border: 1px solid rgba(191, 195, 204, 0.6);
	border-radius: 5px;
	background: linear-gradient(180deg, rgba(22, 34, 72, 0.95), rgba(5, 9, 26, 0.95));
	box-shadow: inset 0 0 0 1px #000;
}

/* Alive in uncommon green, dead in poor grey, live in legendary orange. */
body.is-game-wow .gp-section .gp-badge {
	border-radius: 3px;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

body.is-game-wow .gp-section .gp-badge--alive {
	color: #062B00;
	background: var(--gp-q-uncommon);
}

body.is-game-wow .gp-section .gp-badge--dead {
	color: #FFFFFF;
	background: #555555;
}

body.is-game-wow .gp-section .gp-badge--live {
	color: #2A1400;
	background: var(--gp-q-legendary);
}

/* ---- class firsts: one tooltip per class ---- */

body.is-game-wow .gp-section .gp-class-leader {
	border: 1px solid rgba(191, 195, 204, 0.7);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(16, 26, 60, 0.97), rgba(5, 9, 26, 0.98));
	box-shadow: inset 0 0 0 1px #000, 0 6px 14px -8px rgba(0, 0, 0, 0.8);
	color: var(--gp-ink);
}

body.is-game-wow .gp-section .gp-class-leader__class {
	font-family: var(--gp-head-font);
	color: var(--gp-wow-gold);
	text-shadow: var(--gp-title-shadow);
}

body.is-game-wow .gp-section .gp-class-leader__level {
	color: #FFFFFF;
}

body.is-game-wow .gp-section .gp-class-leader__unclaimed {
	color: var(--gp-q-poor);
	font-style: italic;
}

/* ---- filters, forms and buttons: dark wells and red-lacquer buttons with gold text ---- */

body.is-game-wow .gp-section :is(.gp-race-filters, .gp-filter) {
	color: var(--gp-ink);
}

body.is-game-wow .gp-section :is(input[type="search"], input[type="text"], input[type="url"], input[type="email"], input[type="number"], select, textarea) {
	border: 1px solid #6C717D;
	border-radius: 4px;
	color: #FFFFFF;
	background: rgba(0, 3, 14, 0.75);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.is-game-wow .gp-section :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--gp-wow-gold);
	outline-offset: 1px;
}

body.is-game-wow .gp-section :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-death-form button, button[type="submit"], .gp-btn) {
	border: var(--gp-btn-border);
	border-radius: 4px;
	font-family: var(--gp-head-font);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--gp-btn-ink);
	background: var(--gp-btn-bg);
	box-shadow: inset 0 1px 0 rgba(255, 190, 150, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 209, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 0 #000;
}

body.is-game-wow .gp-section :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-death-form button, button[type="submit"], .gp-btn):hover {
	background: var(--gp-btn-hover-bg);
	color: #FFE45C;
}

body.is-game-wow .gp-section :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-death-form button, button[type="submit"], .gp-btn):focus-visible {
	outline: 2px solid var(--gp-wow-gold);
	outline-offset: 2px;
}

/* ---- the race chart, stat charts and bars ---- */

body.is-game-wow .gp-section :is(.gp-race-chart, .gp-stat-chart) {
	border: 1px solid rgba(191, 195, 204, 0.5);
	border-radius: 5px;
	background: rgba(0, 3, 14, 0.4);
	box-shadow: inset 0 0 0 1px #000;
}

body.is-game-wow .gp-section .gp-bar,
body.is-game-wow .gp-section .gp-progress {
	border-radius: 2px;
}

/* Bar lists (factions, deaths by class and level) as the experience bar: purple fill in a dark, segmented track. */
body.is-game-wow .gp-section .gp-bars {
	display: grid;
	gap: 0.35rem;
	margin: 0.5rem 0 1rem;
	padding: 0;
	list-style: none;
}

body.is-game-wow .gp-section .gp-bars__item {
	display: grid;
	grid-template-columns: minmax(7rem, 15rem) minmax(4rem, 1fr) minmax(4rem, auto);
	align-items: center;
	gap: 0.75rem;
	font-variant-numeric: tabular-nums;
}

body.is-game-wow .gp-section .gp-bars .gp-bar {
	height: 0.8rem;
	padding: 1px;
	border: 1px solid #000;
	color: #9A4DE0;
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.6) calc(10% - 1px) 10%),
		#1A1033;
	box-shadow: 0 0 0 1px rgba(191, 195, 204, 0.45);
}

/* The fill is drawn in currentColor by the markup: the colour picks it. */
body.is-game-wow .gp-section .gp-bars .gp-bar > span {
	height: 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

body.is-game-wow .gp-section .gp-bars--factions .gp-bars__item:first-child .gp-bar {
	color: #3F7FE8;   /* Alliance blue */
}

body.is-game-wow .gp-section .gp-bars--factions .gp-bars__item:nth-child(2) .gp-bar {
	color: #D0342A;   /* Horde red */
}

body.is-game-wow .gp-section .gp-bars__value {
	text-align: end;
	color: #FFFFFF;
}

/* ---- deaths: the dead in poor grey ---- */

body.is-game-wow .gp-section .gp-death__name {
	font-weight: 700;
	color: #FFFFFF;
}

body.is-game-wow .gp-section :is(.gp-death__when, .gp-death__source, .gp-death__detail) {
	color: var(--gp-ink-muted);
}

/* ---- news and guide lists ---- */

body.is-game-wow .gp-section .gp-post-item > a {
	font-family: var(--gp-head-font);
	color: var(--gp-wow-gold);
	text-shadow: 0 1px 0 #000;
}

body.is-game-wow .gp-section .gp-post-item > a:hover {
	color: #FFE45C;
}

/* ---- the door on the home page and the nameplates elsewhere ---- */

.gp-door.is-game-wow .gp-door__title a {
	font-family: var(--gp-head-font);
	color: light-dark(#7A5200, #FFD100);
}

@media (prefers-reduced-motion: reduce) {
	.is-game-wow * {
		scroll-behavior: auto;
	}
}

/* Integration (r12): the lead, the "About this page" fold and the on-this-page list sit on the page itself, not in a
   tooltip panel, so in the light scheme they take dark ink (the panel ink above is light for the navy panels). */
body.pulse-game.is-game-wow .gp-section__body > :is(p.gp-lead, details.gp-about, .gp-toc) {
	color: light-dark(#1f2433, #ececec);
}
body.pulse-game.is-game-wow .gp-section__body > details.gp-about > summary {
	color: light-dark(#7a5600, #ffd100);
}

/* w15 contrast: a checked segment or chip inside a tooltip panel takes the accent's own ink (the panel's light label
   ink on the gold accent read 1.2:1); the on-this-page title on the page itself takes the page's muted ink; a timeline
   pill on the light page is dark gold on parchment. */
body.is-game-wow .gp-section .gp-panel :is(.gp-seg label:has(input:checked), .gp-chip:has(input:checked), .gp-chip[aria-pressed="true"], .gp-chip.is-on),
body.is-game-wow .gp-section .gp-panel :is(.gp-seg label:has(input:checked), .gp-chip:has(input:checked), .gp-chip[aria-pressed="true"], .gp-chip.is-on) * {
	color: var(--gp-accent-ink);
}

body.pulse-game.is-game-wow .gp-section__body > .gp-toc .gp-toc__title {
	color: light-dark(#4A5068, #B9BFCF);
}

body.is-game-wow .gp-pill:not(.gp-pill--world-first, .gp-pill--record) {
	color: light-dark(#6B4A00, #FFD100);
}