/*
 * Game Pulse look: rs3 (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="rs3"] and .is-game-rs3, then the game's own ornaments, all scoped to this game.
 *
 * RuneScape 3's modern interface, drawn in CSS: dark slate-blue windows with a thin gold trim and a soft glow, title
 * bars of deep blue with bright gold lettering, rounded tabs whose selected one lights up gold, gold-on-slate numbers,
 * and the Double XP banner as an event banner (a gold "2x" medallion, light rays, the time left). The light scheme keeps
 * the slate title bars and frames around pale panels. The only game art is Jagex's skill and status icons bundled under
 * ../official/rs3/.
 *
 * Font: Cinzel (bold, latin subset), SIL Open Font License 1.1, Copyright 2020 The Cinzel Project Authors
 * (https://github.com/NDISCOVER/Cinzel), from the npm package @fontsource/cinzel 5.3.0; licence text in
 * ../fonts/rs3/OFL.txt. It sets titles only; body text and numbers stay in the theme's system stack.
 */

@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/rs3/cinzel-latin-700-normal.woff2") format("woff2");
}

/* 1. Tokens ------------------------------------------------------------------------------------------------------ */

body.pulse-game.is-game-rs3,
.is-game-rs3,
[data-game="rs3"] {
	--rs3-slate: #132132;
	--rs3-slate-2: #1A2B40;
	--rs3-slate-3: #22374F;
	--rs3-deep: #0B1522;
	--rs3-gold: #F2C55C;
	--rs3-gold-bright: #FFD978;
	--rs3-gold-dark: #A3741C;
	--rs3-trim: #C89B3C;
	--rs3-glow: rgba(242, 197, 92, 0.28);
	--rs3-blue-glow: rgba(124, 196, 242, 0.22);

	--gp-surface: light-dark(#F8FAFC, #132132);
	--gp-surface-2: light-dark(#EEF2F7, #18283B);
	--gp-surface-sunk: light-dark(#E2E8F0, #0D1826);
	--gp-ink: light-dark(#17222F, #E3EAF2);
	--gp-ink-muted: light-dark(#475569, #A9B8C9);
	--gp-ink-strong: light-dark(#0B1522, #FFFFFF);
	--gp-accent: light-dark(#7A5A0E, #F2C55C);
	--gp-accent-ink: #0B1522;
	--gp-accent-2: light-dark(#1D5D8C, #7CC4F2);
	--gp-title-ink: var(--rs3-gold-bright);
	--gp-title-shadow: 0 1px 0 #000000, 0 0 12px rgba(242, 197, 92, 0.35);
	--gp-head-font: "Cinzel", "Trajan Pro", Georgia, serif;
	--gp-body-font: inherit;
	--gp-num-font: inherit;
	--gp-frame-border: 1px solid var(--rs3-trim);
	--gp-frame-radius: 10px;
	--gp-frame-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 1px rgba(255, 217, 120, 0.12),
		0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 22px -6px var(--rs3-glow);
	--gp-frame-image: none;
	--gp-tab-bg: linear-gradient(180deg, #1E3047, #142235);
	--gp-tab-ink: #C9D6E4;
	--gp-tab-active-bg: linear-gradient(180deg, #2B4462, #1A2B40);
	--gp-tab-active-ink: var(--rs3-gold-bright);
	--gp-tab-shape: none;
	--gp-btn-bg: linear-gradient(180deg, #2B4462, #1A2B40);
	--gp-btn-ink: var(--rs3-gold-bright);
	--gp-btn-border: 1px solid var(--rs3-trim);
	--gp-btn-hover-bg: linear-gradient(180deg, #355377, #213752);
	--gp-table-head-bg: linear-gradient(180deg, #1E3047, #142235);
	--gp-table-head-ink: var(--rs3-gold-bright);
	--gp-row-alt: light-dark(#F1F5F9, #16263A);
	--gp-row-hover: light-dark(#FFF7E3, #1E3249);
	--gp-grid-line: light-dark(#D7DEE7, #22344A);
	--gp-good: light-dark(#1F6B2E, #8FD19E);
	--gp-bad: light-dark(#A12A1A, #F08A6C);
	--gp-warn: light-dark(#7A5A0E, #F2C55C);
	--gp-pop-bg: linear-gradient(180deg, #1E3047, #101C2B);
	--gp-pop-border: 1px solid var(--rs3-trim);
	--gp-pop-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 18px -6px var(--rs3-glow);
	color: var(--gp-ink);
}

body.pulse-game.is-game-rs3 {
	background:
		radial-gradient(60rem 30rem at 10% -10%, light-dark(rgba(124, 196, 242, 0.12), rgba(124, 196, 242, 0.07)), transparent 70%),
		radial-gradient(50rem 26rem at 100% 10%, light-dark(rgba(242, 197, 92, 0.1), rgba(242, 197, 92, 0.05)), transparent 70%),
		var(--wp--preset--color--surface);
}

/* 2. The hero and the tabs ---------------------------------------------------------------------------------------- */

.gp-hero.is-game-rs3 {
	border-bottom: 1px solid var(--rs3-trim);
	box-shadow: 0 1px 0 #000000, 0 6px 24px -10px var(--rs3-glow);
}

.gp-hero.is-game-rs3 .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--rs3-gold-bright);
	text-shadow: 0 2px 0 #000000, 0 0 18px rgba(242, 197, 92, 0.45);
}

.gp-hero.is-game-rs3 .gp-hero__eyebrow {
	letter-spacing: 0.14em;
	color: var(--rs3-gold);
}

.gp-hero.is-game-rs3 .gp-hero__facts li {
	color: #E3EAF2;
	background: rgba(11, 21, 34, 0.6);
	border: 1px solid rgba(200, 155, 60, 0.7);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 217, 120, 0.12);
}

.gp-hero.is-game-rs3 .gp-hero__icons li {
	color: #C9D6E4;
}

.gp-hero.is-game-rs3 .gp-hero__icons img {
	padding: 4px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #2B4462, #0D1826);
	box-shadow: 0 0 0 1px #000000, 0 0 0 2px var(--rs3-trim), 0 0 12px -2px var(--rs3-glow);
}

.gp-subnav.is-game-rs3 {
	border-bottom: 1px solid var(--rs3-trim);
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.9);
}

.gp-subnav.is-game-rs3 ul {
	gap: 4px;
	padding-top: 6px;
}

.gp-subnav.is-game-rs3 a {
	padding: 0.5rem 1.05rem;
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	color: #C9D6E4;
	background: var(--gp-tab-bg);
	border: 1px solid #2C3E55;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
}

.gp-subnav.is-game-rs3 a:hover,
.gp-subnav.is-game-rs3 a:focus-visible {
	color: var(--rs3-gold-bright);
	border-color: #4A6380;
}

.gp-subnav.is-game-rs3 a[aria-current="page"] {
	color: var(--rs3-gold-bright);
	background: var(--gp-tab-active-bg);
	border-color: var(--rs3-trim);
	border-bottom-color: transparent;
	box-shadow: inset 0 2px 0 var(--rs3-gold), 0 -4px 14px -6px var(--rs3-glow);
	text-shadow: 0 0 10px rgba(242, 197, 92, 0.5);
}

/* 3. Panels: slate windows with a gold trim, a deep blue title bar and a soft glow --------------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel {
	--rs3-pad: clamp(0.9rem, 1.8vw, 1.3rem);
	overflow: hidden;
	padding: 0 var(--rs3-pad) var(--rs3-pad);
	color: var(--gp-ink);
	background: var(--gp-surface);
	border: var(--gp-frame-border);
	border-radius: var(--gp-frame-radius);
	box-shadow: var(--gp-frame-shadow);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel__title {
	position: relative;
	margin: 0 calc(-1 * var(--rs3-pad)) 1rem;
	padding: 0.65rem var(--rs3-pad) 0.6rem;
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: 0.04em;
	color: var(--rs3-gold-bright);
	text-shadow: 0 1px 0 #000000, 0 0 12px rgba(242, 197, 92, 0.35);
	background:
		radial-gradient(24rem 4rem at 50% 0, rgba(124, 196, 242, 0.16), transparent 70%),
		linear-gradient(180deg, #22374F, #142235);
	border-bottom: 1px solid var(--rs3-trim);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The gold line under the title fades out at both ends, like the interface's dividers. */
:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel__title::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--rs3-gold-bright), transparent);
	box-shadow: 0 0 8px var(--rs3-glow);
}

:is(body.is-game-rs3, [data-game="rs3"]) :where(h2, h3, h4):where(:not(.gp-panel__title, .gp-hero__title)) {
	font-family: var(--gp-head-font);
	letter-spacing: 0.02em;
	color: var(--gp-accent);
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-panel, .gp-rs3) a:not(.wp-element-button, [aria-current]) {
	color: var(--gp-accent-2);
}

:is(body.is-game-rs3, [data-game="rs3"]) :focus-visible {
	outline: 2px solid var(--rs3-gold-bright);
	outline-offset: 2px;
}

/* The chart's range switch: rounded slate tabs, the chosen range lit gold. */
:is(body.is-game-rs3, [data-game="rs3"]) .gp-stat-chart__ranges a[aria-current="true"] {
	color: #0B1522 !important;
	background: linear-gradient(180deg, #FFE08A, #E3AE45);
	box-shadow: 0 0 10px -2px rgba(255, 217, 120, 0.7);
}

/* 4. Tables ---------------------------------------------------------------------------------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) .gp-table-wrap {
	border: 1px solid light-dark(#C9D3DF, #2C3E55);
	border-radius: 8px;
	overflow: auto;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-table thead th {
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--rs3-gold-bright);
	background: var(--gp-table-head-bg);
	border-bottom: 1px solid var(--rs3-trim);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-table tbody tr:nth-child(even) {
	background: var(--gp-row-alt);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-table tbody tr:hover {
	background: var(--gp-row-hover);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-table :is(td, tbody th) {
	border-bottom: 1px solid var(--gp-grid-line);
	font-variant-numeric: tabular-nums;
}

/* 5. KPI strip and stats: slate cards, a gold top edge, the number in gold-white ------------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.7rem;
	margin: 0;
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-kpi, .gp-stat) {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.75rem 0.85rem 0.7rem;
	color: #E3EAF2;
	background:
		radial-gradient(14rem 5rem at 50% 0, rgba(124, 196, 242, 0.12), transparent 70%),
		linear-gradient(180deg, #1E3047, #101C2B);
	border: 1px solid #2C3E55;
	border-top: 2px solid var(--rs3-trim);
	border-radius: 8px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 18px -12px rgba(0, 0, 0, 0.9);
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-kpi__label, .gp-stat-label, .gp-stat > span:nth-child(2)) {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rs3-gold);
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-kpi__value, .gp-stat-value, .gp-stat > span:first-child) {
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: #FFF4D6;
	text-shadow: 0 0 14px rgba(242, 197, 92, 0.35);
	overflow-wrap: anywhere;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__value a {
	color: inherit !important;
	text-decoration: none;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__value a:hover {
	text-decoration: underline;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__delta {
	font-size: 0.82rem;
	color: #C9D6E4;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__delta.is-up {
	color: #8FD19E;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__delta.is-down {
	color: #F08A6C;
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-kpi__note, .gp-stat-note, .gp-stat > span:nth-child(3)) {
	font-size: 0.78rem;
	color: #A9B8C9;
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-kpi, .gp-stat) a {
	color: #9FD3F7 !important;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__spark {
	display: block;
	width: 100%;
	height: 24px;
	margin-top: 0.2rem;
	color: var(--rs3-gold);
	filter: drop-shadow(0 0 4px rgba(242, 197, 92, 0.5));
}

/* 6. The Double XP event banner ----------------------------------------------------------------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.9rem 1.1rem;
	margin: 0 0 1rem;
	padding: 0.95rem 1.2rem;
	overflow: hidden;
	color: #F4EEDD;
	background:
		repeating-conic-gradient(from 0deg at 3.6rem 50%, rgba(255, 217, 120, 0.09) 0deg 8deg, transparent 8deg 22deg),
		radial-gradient(18rem 10rem at 3.6rem 50%, rgba(255, 217, 120, 0.42), transparent 70%),
		linear-gradient(100deg, #2A1B4F 0%, #1B2C55 45%, #0F1B33 100%);
	border: 1px solid var(--rs3-gold);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(242, 197, 92, 0.18), 0 0 26px -6px rgba(242, 197, 92, 0.55);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
	pointer-events: none;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__emblem {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.8rem;
	height: 4.8rem;
	font-family: var(--gp-head-font);
	color: #3A2A06;
	background: radial-gradient(circle at 38% 30%, #FFF2B8, #FFD978 30%, #D9A63A 62%, #8C6416 100%);
	border-radius: 50%;
	box-shadow: 0 0 0 2px #5A420A, 0 0 0 4px #FFD978, 0 0 0 5px #5A420A, 0 0 22px 4px rgba(255, 217, 120, 0.55);
	line-height: 1;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__emblem b {
	grid-area: 1 / 1;
	margin-top: -0.6rem;
	margin-left: -0.6rem;
	font-size: 2.2rem;
	font-weight: 700;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__emblem i {
	grid-area: 1 / 1;
	margin-top: -0.25rem;
	margin-left: 1.3rem;
	font-size: 1.1rem;
	font-style: normal;
	font-weight: 700;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__emblem small {
	grid-area: 1 / 1;
	margin-top: 2.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp p {
	margin: 0;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9FD3F7;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6CF08A;
	box-shadow: 0 0 8px #6CF08A;
	animation: gp-rs3-live 1.6s ease-in-out infinite;
}

@keyframes gp-rs3-live {
	50% {
		opacity: 0.35;
	}
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__title strong {
	margin: 0;
	font-family: var(--gp-head-font);
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--rs3-gold-bright);
	text-shadow: 0 2px 0 #000000, 0 0 16px rgba(255, 217, 120, 0.6);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__when {
	font-size: 0.9rem;
	color: #E3EAF2;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp a {
	color: #FFE7A3 !important;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__timer {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.3rem !important;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__left {
	flex: none;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #FFF4D6;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__bar {
	flex: 1 1 auto;
	height: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 217, 120, 0.5);
	border-radius: 999px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #A3741C, #FFD978);
	box-shadow: 0 0 8px rgba(255, 217, 120, 0.8);
}

/* 7. Controls: rounded slate buttons with a gold edge; the selected segment glows gold -------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) :is(.wp-element-button, .wp-block-button__link, .gp-filters button) {
	font-weight: 700;
	color: var(--rs3-gold-bright);
	background: var(--gp-btn-bg);
	border: var(--gp-btn-border);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px -4px var(--rs3-glow);
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.wp-element-button, .wp-block-button__link, .gp-filters button):hover {
	background: var(--gp-btn-hover-bg);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.85rem;
	background: linear-gradient(180deg, #1A2B40, #101C2B);
	border: 1px solid #2C3E55;
	border-radius: 10px;
	color: #E3EAF2;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters :is(legend, .gp-search > span) {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rs3-gold);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters input[type="search"] {
	padding: 0.4rem 0.75rem;
	font: inherit;
	color: #E3EAF2;
	background: #0B1522;
	border: 1px solid #2C3E55;
	border-radius: 999px;
	color-scheme: dark;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters input[type="search"]::placeholder {
	color: #8A9BB0;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg {
	margin: 0;
	padding: 0;
	border: 0;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__options {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option {
	position: relative;
	display: inline-flex;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.8rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: #C9D6E4;
	background: #142235;
	border: 1px solid #2C3E55;
	border-radius: 999px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option:hover span {
	border-color: #4A6380;
	color: #FFFFFF;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option input:checked + span {
	color: #0B1522;
	background: linear-gradient(180deg, #FFE08A, #E3AE45);
	border-color: #FFD978;
	box-shadow: 0 0 12px -2px rgba(255, 217, 120, 0.7);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__option input:focus-visible + span {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg__count {
	min-width: 1.4em;
	padding: 0 0.35em;
	font-size: 0.75rem;
	text-align: center;
	color: inherit;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters__count {
	margin: 0;
	color: #A9B8C9;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters {
	position: relative;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem 1.1rem;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters .gp-search {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters .gp-search input {
	min-width: 14rem;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-seg legend {
	padding: 0;
	margin-bottom: 0.3rem;
}

/* With the script on, every change applies at once: the Apply button stays reachable for the keyboard, out of sight. */
:is(body.is-game-rs3, [data-game="rs3"]) .gp-filters.is-live .gp-filters__go {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The activity feed in two columns where there is room: the page reads in half the length. */
@media (min-width: 1000px) {
	:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel--wide .gp-rs3-feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
	}
}

/* The market's two tables stack in a half-width panel. */
:is(body.is-game-rs3, [data-game="rs3"]) .gp-panel:not(.gp-panel--wide) .gp-rs3-market {
	grid-template-columns: minmax(0, 1fr);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-market caption {
	padding: 0.45rem 0.6rem;
	text-align: left;
}

/* 8. The feed, chips, nameplates and folds -------------------------------------------------------------------- */

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-activity {
	align-items: center;
	padding: 0.5rem 0.6rem;
	border: 1px solid transparent;
	border-bottom-color: var(--gp-grid-line);
	border-radius: 8px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-activity:hover {
	background: var(--gp-row-hover);
	border-color: light-dark(#E8D6A8, #2C3E55);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-activity[hidden] {
	display: none;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-activity > img {
	flex: none;
	padding: 4px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #2B4462, #0D1826);
	box-shadow: 0 0 0 1px var(--rs3-trim);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-chip {
	border-radius: 999px;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-fold > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--gp-accent);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-fold[open] > summary {
	margin-bottom: 0.6rem;
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-plate--rs3 {
	border-radius: 8px;
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-progress, .gp-plate__bar) {
	border-radius: 999px;
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-progress > span, .gp-plate__fill) {
	border-radius: 999px;
	box-shadow: 0 0 8px rgba(242, 197, 92, 0.6);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-bars {
	color: var(--gp-accent);
}

:is(body.is-game-rs3, [data-game="rs3"]) :is(.gp-pop) {
	color: #E3EAF2;
	background: var(--gp-pop-bg);
	border: var(--gp-pop-border);
	border-radius: 10px;
	box-shadow: var(--gp-pop-shadow);
}

:is(body.is-game-rs3, [data-game="rs3"]) .gp-sources-line {
	border-top: 1px solid light-dark(#C9D3DF, #2C3E55);
}

@media (prefers-reduced-motion: reduce) {
	:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp__kicker::before {
		animation: none;
	}
}

@media (max-width: 640px) {
	:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(body.is-game-rs3, [data-game="rs3"]) .gp-rs3-dxp {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	:is(body.is-game-rs3, [data-game="rs3"]) .gp-kpi__value {
		font-size: 1.1rem;
	}

	.gp-subnav.is-game-rs3 a {
		padding: 0.45rem 0.8rem;
	}
}