/*
 * Game Pulse: RuneScape 3 (the /rs3/ section, includes/rs3.php).
 *
 * The game's modern interface: dark slate-blue panels with gold trim and soft glows, bright gold lettering. The scope
 * is the body of a section page (.is-game-rs3, set by the theme from the plugin's section registry) and every
 * [data-game="rs3"] root the plugin prints (the panels' components, the door on the home page, the nameplates). The
 * look's ornaments (frames, tabs, the Double XP event banner) are in look-rs3.css. The icons are Jagex's, bundled
 * under ../official/rs3/ (assets-manifest-rs3.json); nothing is loaded from anywhere else.
 */

body.pulse-game.is-game-rs3,
.is-game-rs3,
[data-game="rs3"] {
	--wp--preset--color--primary: light-dark(#7A5A0E, #F2C55C);
	--wp--preset--color--primary-soft: light-dark(#E6ECF3, #16263A);
	--wp--preset--color--primary-bright: light-dark(#9A7414, #FFD978);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #0B1522);
	--wp--preset--color--primary-text: var(--wp--preset--color--primary);
	--wp--preset--color--accent: light-dark(#1D5D8C, #7CC4F2);
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--wp--preset--color--ink: light-dark(#17222F, #E3EAF2);
	--wp--preset--color--muted: light-dark(#475569, #A9B8C9);
	--wp--preset--color--surface: light-dark(#E9EEF4, #0A121C);
	--wp--preset--color--surface-alt: light-dark(#F6F8FB, #121E2C);
	--wp--preset--color--border: light-dark(#B9C5D3, #2C3E55);
	--pulse-header-bg: light-dark(rgba(233, 238, 244, 0.9), rgba(10, 18, 28, 0.88));
	--gp-tone: light-dark(#7A5A0E, #F2C55C);
	--gp-rule: #C89B3C;
	--gp-radius: 8px;
	--gp-radius-sm: 6px;
	--gp-badge-radius: 999px;
	--gp-head-font: "Cinzel", "Trajan Pro", Georgia, serif;
	--gp-panel-border: light-dark(#C9A55A, #7A6230);
	--gp-panel-bg: light-dark(#F8FAFC, #132132);
	--gp-panel-alt-bg: light-dark(#EEF2F7, #18283B);
	--gp-panel-shadow:
		inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.9), rgba(242, 197, 92, 0.18)),
		0 0 0 1px light-dark(rgba(122, 90, 14, 0.12), rgba(0, 0, 0, 0.7)),
		0 10px 28px -14px light-dark(rgba(23, 34, 47, 0.35), rgba(0, 0, 0, 0.9));
	--gp-bar: linear-gradient(180deg, #FFE08A, #D9A63A 55%, #A3741C);
	--gp-bar-track: light-dark(#D7DEE7, #08111B);
	--gp-bar-radius: 999px;
	--gp-live-bg: light-dark(#7A5A0E, #F2C55C);
	--gp-live-ink: light-dark(#FFFFFF, #0B1522);
	--gp-crown-light: #FFE08A;
	--gp-crown: #F2C55C;
	--gp-crown-dark: #7A5A0E;
	--gp-series-1: light-dark(#9A7414, #F2C55C);
	--gp-series-2: light-dark(#1D5D8C, #7CC4F2);
	--gp-series-3: light-dark(#8A2B1A, #F08A6C);
	--gp-series-4: light-dark(#475569, #A9B8C9);
	--gp-series-5: light-dark(#2F6B3A, #8FD19E);
	--gp-ink: light-dark(#17222F, #E3EAF2);
	--gp-grid: light-dark(#D7DEE7, #22344A);
	--gp-hero-bg:
		radial-gradient(40rem 14rem at 18% 120%, rgba(124, 196, 242, 0.18), transparent 70%),
		radial-gradient(40rem 12rem at 85% -20%, rgba(242, 197, 92, 0.2), transparent 70%),
		linear-gradient(180deg, #1A2B40, #0D1826 70%, #091320);
	--gp-hero-rule: #C89B3C;
	--gp-hero-accent: #F2C55C;
	--gp-hero-title: #FFD978;
	--gp-hero-pill: rgba(200, 155, 60, 0.7);
	--gp-hero-ink: #E3EAF2;
	--gp-icon-radius: 6px;
	--gp-icon-ring: #7A6230;
	--gp-tabs-bg: #0D1826;
	--gp-tabs-rule: #7A6230;
	--gp-tabs-ink: #C9D6E4;
	--gp-tabs-active: #FFD978;
	--gp-plate-bg: linear-gradient(180deg, #1E3047, #101C2B);
	--gp-plate-border: #7A6230;
	--gp-plate-ink: #FFD978;
	--gp-plate-bar: linear-gradient(180deg, #FFE08A, #D9A63A 55%, #A3741C);
	--gp-plate-track: #08111B;
	color: var(--wp--preset--color--ink);
}

/* Headings and the tabs in the interface's gold. */
:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel__title {
	color: #FFD978;   /* on the slate title bar of look-rs3.css, in both schemes */
	font-family: var(--gp-head-font);
	letter-spacing: 0.01em;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3 h3 {
	color: var(--wp--preset--color--primary);
	font-family: var(--gp-head-font);
	letter-spacing: 0.01em;
}

:is(.is-game-rs3, [data-game="rs3"]) .gp-table thead th {
	background: light-dark(#1E3047, #1B2C41);
	color: #FFD978;
	border-bottom: 2px solid #C89B3C;
}

:is(.is-game-rs3, [data-game="rs3"]) .gp-table caption {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-align: center;
}

/* The nameplate: the generic plate, with the Hardcore Ironman helm (or the Hardcore death icon, or the RuneScore
   for a main account) in place of the initial. */
.gp-plate--rs3 {
	border-width: 1px;
	box-shadow: inset 0 1px 0 rgba(255, 217, 120, 0.2), 0 0 12px -4px rgba(242, 197, 92, 0.45);
}

.gp-plate--rs3 .gp-plate__name {
	color: #FFD978;
	text-shadow: 1px 1px 0 #000000;
}

.gp-plate--rs3 .gp-plate__initial {
	width: 30px;
	height: 36px;
	color: transparent;
	background: url("../official/rs3/status/runescore.png") center / 22px auto no-repeat;
}

.gp-rs3-plate.is-hardcore .gp-plate__initial {
	background-image: url("../official/rs3/status/hardcore-helm.png");
	background-size: 26px auto;
}

.gp-rs3-plate.is-ironman .gp-plate__initial {
	background-image: url("../official/rs3/status/ironman.png");
	background-size: 20px auto;
	image-rendering: pixelated;
}

.gp-rs3-plate.is-dead .gp-plate__initial {
	background-image: url("../official/rs3/status/hardcore-death.png");
	background-size: 22px auto;
	image-rendering: pixelated;
}

.gp-plate--rs3.is-dead .gp-plate__name {
	color: #A9B8C9;
}

/* Small official icons: the badges are 11 px and 13 px sprites, kept crisp when drawn larger. */
.gp-rs3-icon {
	vertical-align: -0.2em;
	image-rendering: pixelated;
}

.gp-hero.is-game-rs3 .gp-hero__crest {
	image-rendering: pixelated;
}

/* The race board. */
.gp-rs3-board th[scope="row"] {
	font-weight: 400;
	min-width: 14rem;
}

.gp-rs3-board tr.is-dead td {
	opacity: 0.8;
}

.gp-rs3-place {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.gp-rs3-muted {
	color: var(--wp--preset--color--muted);
	font-size: 0.85em;
}

.gp-rs3-note {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.gp-rs3-chip {
	display: inline-block;
	padding: 0 0.4rem;
	font-size: 0.72rem;
	line-height: 1.6;
	color: light-dark(#5A420A, #FFD978);
	background: light-dark(#F3EAD2, #1B2C41);
	border: 1px solid var(--gp-panel-border);
	border-radius: var(--gp-badge-radius);
}

.gp-rs3-count {
	font-size: 0.8em;
	color: var(--wp--preset--color--muted);
}

/* The overview's top five and the capped players. */
.gp-rs3-top {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-rs3-top li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.gp-rs3-capped,
.gp-rs3-more {
	margin: 0.75rem 0 0;
}

/* The Double XP banner, while Jagex's news says it is running. */
.gp-rs3-dxp {
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid #C79A2B;
	border-radius: 6px;
	background: rgba(245, 207, 107, 0.12);
}

.gp-rs3-dxp strong {
	margin-right: 0.35rem;
	color: #C79A2B;
}

/* The activity feed. */
.gp-rs3-feed {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-rs3-activity {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.gp-rs3-activity:last-child {
	border-bottom: 0;
}

.gp-rs3-activity__body {
	display: grid;
	gap: 0.15rem;
}

.gp-rs3-activity__meta {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.gp-rs3-activity.is-cap .gp-rs3-chip,
.gp-rs3-activity.is-drop .gp-rs3-chip {
	color: #0B1522;
	background: #F2C55C;
}

/* Leaders, tables and the market: side by side where there is room. */
.gp-rs3-leaders,
.gp-rs3-tables,
.gp-rs3-market {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.gp-rs3-leaders h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

.gp-rs3-leaders ol {
	margin: 0;
	padding-left: 1.4rem;
}

.gp-rs3-up {
	color: light-dark(#2F6B2A, #9CC48F);
	font-weight: 700;
}

.gp-rs3-down {
	color: light-dark(#8A2B1A, #E07A5F);
	font-weight: 700;
}

.gp-rs3-roster {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding-left: 1.2rem;
}

.gp-rs3-bars {
	color: var(--wp--preset--color--primary);
}

/* The door on the home page. */
.gp-door.is-game-rs3 {
	background: linear-gradient(180deg, #1A2B40, #0D1826);
	border-color: #7A6230;
}

.gp-door.is-game-rs3 .gp-door__title a {
	color: #FFD978;
}

@media (max-width: 600px) {
	.gp-rs3-board th[scope="row"] {
		min-width: 11rem;
	}
}