/*
 * Game Pulse look: osrs (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="osrs"] and .is-game-osrs, then the game's own ornaments, all scoped to this game.
 *
 * Old School RuneScape's classic interface, drawn in CSS: brown-grey stone panels with bevelled light and dark edges
 * and a black outline, dark inner wells, window titles in the interface orange and headings in yellow with a 1 px black
 * shadow, the red side-stone of the selected tab, hitpoints-style green-on-red bars, the pale yellow hover box of the
 * skills tab, and tables laid out like the official hiscores (parchment rows in the light scheme, stone wells in the
 * dark one). The only game art is Jagex's skill and status icons bundled under ../official/osrs/.
 *
 * Font: Pixelify Sans (regular and bold, latin subset), SIL Open Font License 1.1, Copyright 2021 The Pixelify Sans
 * Project Authors (https://github.com/eifetx/Pixelify-Sans), from the npm package @fontsource/pixelify-sans 5.3.0;
 * licence text in ../fonts/osrs/OFL.txt. It sets titles and numbers; body text stays in the theme's system stack.
 */

@font-face {
	font-family: "Pixelify Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/osrs/pixelify-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Pixelify Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/osrs/pixelify-sans-latin-700-normal.woff2") format("woff2");
}

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

body.pulse-game.is-game-osrs,
.is-game-osrs,
[data-game="osrs"] {
	/* The interface stone and its edges. */
	--osrs-stone: #3E3529;
	--osrs-stone-2: #4A4033;
	--osrs-stone-3: #5A4F3E;
	--osrs-edge-light: #6B5F4A;
	--osrs-edge-dark: #1E1A13;
	--osrs-outline: #000000;
	--osrs-well: #2B2419;
	--osrs-yellow: #FFFF00;
	--osrs-orange: #FF981F;
	--osrs-cyan: #00FFFF;
	--osrs-red-tab: #6F1E13;
	--osrs-hp-green: #00C800;
	--osrs-hp-red: #C80000;
	--osrs-tip: #FFFFA0;
	--osrs-parchment: light-dark(#ECE2C8, #2A241B);
	--osrs-parchment-2: light-dark(#E2D6B8, #312A20);
	--osrs-stone-bevel:
		inset 1px 1px 0 var(--osrs-edge-light),
		inset -1px -1px 0 var(--osrs-edge-dark);

	/* The look contract. */
	--gp-surface: var(--osrs-parchment);
	--gp-surface-2: light-dark(#F3EBD6, #352D22);
	--gp-surface-sunk: light-dark(#DCCFAE, #1F1A12);
	--gp-ink: light-dark(#2A2116, #E8DDC2);
	--gp-ink-muted: light-dark(#564832, #BCAF92);
	--gp-ink-strong: light-dark(#140F08, #FFF6DA);
	--gp-accent: light-dark(#8A4B00, #FF981F);
	--gp-accent-ink: #000000;
	--gp-accent-2: light-dark(#1F6B1F, #4FD84F);
	--gp-title-ink: var(--osrs-yellow);
	--gp-title-shadow: 1px 1px 0 #000000;
	--gp-head-font: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
	--gp-body-font: inherit;
	--gp-num-font: "Pixelify Sans", ui-monospace, "Cascadia Mono", monospace;
	--gp-frame-border: 2px solid var(--osrs-outline);
	--gp-frame-radius: 0;
	--gp-frame-shadow:
		inset 0 0 0 2px var(--osrs-stone),
		inset 3px 3px 0 0 var(--osrs-edge-light),
		inset -3px -3px 0 0 var(--osrs-edge-dark),
		3px 3px 0 rgba(0, 0, 0, 0.45);
	--gp-frame-image: none;
	--gp-tab-bg: linear-gradient(180deg, #4D4335, #3A3127);
	--gp-tab-ink: var(--osrs-orange);
	--gp-tab-active-bg: linear-gradient(180deg, #8A2A1B, var(--osrs-red-tab));
	--gp-tab-active-ink: var(--osrs-yellow);
	--gp-tab-shape: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
	--gp-btn-bg: linear-gradient(180deg, #554A3A, #3E3529);
	--gp-btn-ink: var(--osrs-orange);
	--gp-btn-border: 1px solid var(--osrs-outline);
	--gp-btn-hover-bg: linear-gradient(180deg, #635643, #4A4033);
	--gp-table-head-bg: linear-gradient(180deg, #4A4033, #3A3127);
	--gp-table-head-ink: var(--osrs-orange);
	--gp-row-alt: var(--osrs-parchment-2);
	--gp-row-hover: light-dark(#F8F0DB, #3D3428);
	--gp-grid-line: light-dark(#B8A780, #120F0A);
	--gp-good: light-dark(#14700F, #4FD84F);
	--gp-bad: light-dark(#A00000, #FF5A4A);
	--gp-warn: light-dark(#8A5A00, #FFB000);
	--gp-pop-bg: var(--osrs-tip);
	--gp-pop-border: 1px solid #000000;
	--gp-pop-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
	--gp-hero-bg:
		radial-gradient(60rem 12rem at 50% 120%, rgba(255, 152, 31, 0.12), transparent 70%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 20px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 46px),
		repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 0, 0, 0.1) 23px 25px, transparent 25px 46px),
		linear-gradient(180deg, #554A3A, #3A3127 70%, #2E271E);

	/* The theme's own tokens, in the same palette. */
	--wp--preset--color--primary: light-dark(#7A4300, #FF981F);
	--wp--preset--color--primary-soft: light-dark(#E2D6B8, #2E271E);
	--wp--preset--color--primary-bright: light-dark(#9A5600, #FFB24F);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #000000);
	--wp--preset--color--accent: light-dark(#1F6B1F, #4FD84F);
	--wp--preset--color--ink: var(--gp-ink);
	--wp--preset--color--muted: var(--gp-ink-muted);
	--wp--preset--color--surface: light-dark(#D9CDAF, #15120D);
	--wp--preset--color--surface-alt: var(--osrs-parchment);
	--wp--preset--color--border: light-dark(#9E8C66, #4A4033);
	--pulse-header-bg: light-dark(rgba(217, 205, 175, 0.92), rgba(21, 18, 13, 0.9));
	--gp-radius: 0;
	--gp-radius-sm: 0;
	--gp-badge-radius: 0;
	--gp-panel-border: var(--osrs-outline);
	--gp-panel-bg: var(--osrs-parchment);
	--gp-panel-alt-bg: var(--gp-surface-2);
	--gp-panel-title: var(--osrs-orange);
	--gp-bar: linear-gradient(180deg, #2CEB2C, var(--osrs-hp-green) 45%, #007A00);
	--gp-bar-track: linear-gradient(180deg, #E52A2A, var(--osrs-hp-red) 45%, #7A0000);
	--gp-bar-radius: 0;
	--gp-tabs-bg: linear-gradient(180deg, #3E3529, #2E271E);
	--gp-tabs-rule: var(--osrs-outline);
	--gp-tabs-ink: var(--osrs-orange);
	--gp-tabs-active: var(--osrs-yellow);
	--gp-hero-rule: var(--osrs-outline);
	--gp-hero-accent: var(--osrs-orange);
	--gp-hero-title: var(--osrs-yellow);
	--gp-hero-ink: #E8DDC2;
	--gp-hero-pill: #000000;
	--gp-plate-bg: linear-gradient(180deg, #4A4033, #3A3127);
	--gp-plate-border: var(--osrs-outline);
	--gp-plate-ink: var(--osrs-yellow);
	--gp-plate-bar: linear-gradient(180deg, #2CEB2C, var(--osrs-hp-green) 45%, #007A00);
	--gp-plate-track: linear-gradient(180deg, #E52A2A, var(--osrs-hp-red) 45%, #7A0000);
	color: var(--gp-ink);
}

/* The page itself: the parchment of the official site in the light scheme, the dark of the game world in the dark. */
body.pulse-game.is-game-osrs {
	background:
		radial-gradient(circle at 1px 1px, light-dark(rgba(90, 70, 40, 0.08), rgba(255, 255, 255, 0.025)) 1px, transparent 1.5px) 0 0 / 6px 6px,
		var(--wp--preset--color--surface);
}

/* 2. The hero and the tabs: the interface stone, the yellow title, the red side-stone of the selected tab ---------- */

.gp-hero.is-game-osrs {
	border-bottom: 0;
	box-shadow: inset 0 -3px 0 var(--osrs-edge-dark), inset 0 -4px 0 var(--osrs-edge-light), 0 2px 0 #000000;
}

.gp-hero.is-game-osrs .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--osrs-yellow);
	text-shadow: 2px 2px 0 #000000;
}

.gp-hero.is-game-osrs .gp-hero__eyebrow {
	font-family: var(--gp-head-font);
	letter-spacing: 0.06em;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
}

.gp-hero.is-game-osrs .gp-hero__facts li {
	font-family: var(--gp-head-font);
	color: var(--osrs-yellow);
	background: var(--osrs-well);
	border: 1px solid #000000;
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6), 1px 1px 0 var(--osrs-edge-light);
	text-shadow: 1px 1px 0 #000000;
}

.gp-hero.is-game-osrs .gp-hero__icons li {
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
}

.gp-hero.is-game-osrs .gp-hero__icons img {
	padding: 3px;
	background: var(--osrs-stone);
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light), inset -1px -1px 0 var(--osrs-edge-dark), 0 0 0 1px #000000;
	image-rendering: pixelated;
}

.gp-subnav.is-game-osrs {
	border-bottom: 2px solid #000000;
	box-shadow: inset 0 1px 0 var(--osrs-edge-light);
}

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

.gp-subnav.is-game-osrs a {
	padding: 0.5rem 0.95rem 0.45rem;
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 1rem;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
	background: var(--gp-tab-bg);
	border: 1px solid #000000;
	border-bottom: 0;
	clip-path: var(--gp-tab-shape);
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light);
}

.gp-subnav.is-game-osrs a:hover,
.gp-subnav.is-game-osrs a:focus-visible {
	color: #FFFFFF;
	background: linear-gradient(180deg, #5E5240, #463C2F);
}

.gp-subnav.is-game-osrs a[aria-current="page"] {
	color: var(--osrs-yellow);
	background: var(--gp-tab-active-bg);
	border-bottom-color: transparent;
	box-shadow: inset 1px 1px 0 #B04A35, inset -1px 0 0 #3A0E08;
}

/* 3. Panels: a stone window with a black outline and bevels, the title on the stone in the interface orange -------- */

:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel {
	--osrs-pad: clamp(0.85rem, 1.8vw, 1.25rem);
	position: relative;
	padding: 0 var(--osrs-pad) var(--osrs-pad);
	color: var(--gp-ink);
	background: var(--gp-surface);
	border: var(--gp-frame-border);
	border-radius: 0;
	box-shadow:
		inset 0 0 0 4px var(--osrs-stone),
		inset 5px 5px 0 0 var(--osrs-edge-light),
		inset -5px -5px 0 0 var(--osrs-edge-dark),
		inset 0 0 0 6px #000000,
		3px 3px 0 rgba(0, 0, 0, 0.4);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel > :not(.gp-panel__title) {
	position: relative;
	margin-inline: 4px;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel__title {
	margin: 0 calc(-1 * var(--osrs-pad)) 0.9rem;
	padding: 0.55rem calc(var(--osrs-pad) + 6px) 0.5rem;
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
	background:
		repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, 0.12) 38px 40px),
		linear-gradient(180deg, #554A3A, var(--osrs-stone) 60%, #342C21);
	border-bottom: 2px solid #000000;
	box-shadow: inset 2px 2px 0 var(--osrs-edge-light), inset -2px 0 0 var(--osrs-edge-dark);
}

/* The two little rivets the game's windows carry in their title bars. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel__title::before,
:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel__title::after {
	content: "";
	position: absolute;
	top: 0.85rem;
	width: 6px;
	height: 6px;
	background: radial-gradient(circle at 35% 35%, #9C8A68, #4A4033 60%, #1E1A13);
	box-shadow: 0 0 0 1px #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel__title::before {
	left: 8px;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-panel__title::after {
	right: 8px;
}

:is(body.is-game-osrs) .gp-lead {
	color: var(--gp-ink);
}

:is(body.is-game-osrs) .gp-about > summary {
	font-family: var(--gp-head-font);
	color: var(--gp-accent);
	cursor: pointer;
}

:is(body.is-game-osrs) .gp-sources-line {
	border-top: 2px solid var(--wp--preset--color--border);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-panel, .gp-osrs-section) a:not(.wp-element-button, .gp-chip, [aria-current]) {
	color: var(--gp-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

:is(body.is-game-osrs, [data-game="osrs"]) :where(h2, h3, h4):where(:not(.gp-panel__title, .gp-hero__title)) {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: var(--gp-ink-strong);
}

:is(body.is-game-osrs, [data-game="osrs"]) :focus-visible {
	outline: 2px solid var(--osrs-yellow);
	outline-offset: 1px;
	box-shadow: 0 0 0 3px #000000;
}

/* The chart's range switch: stone buttons, the chosen range on the red selected-tab stone. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-stat-chart__ranges {
	border: 1px solid #000000;
	border-radius: 0;
	background: #000000;
	gap: 1px;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stat-chart__ranges a {
	font-family: var(--gp-head-font);
	color: var(--osrs-orange) !important;
	background: linear-gradient(180deg, #554A3A, #3E3529);
	border-radius: 0;
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stat-chart__ranges a[aria-current="true"] {
	color: var(--osrs-yellow) !important;
	background: linear-gradient(180deg, #8A2A1B, var(--osrs-red-tab));
}

/* 4. Tables: the official hiscores. A stone head in orange, parchment (or stone well) rows, numbers in the pixel face */

:is(body.is-game-osrs, [data-game="osrs"]) .gp-table-wrap {
	border: 2px solid #000000;
	border-radius: 0;
	background: var(--gp-surface-2);
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 var(--osrs-edge-light);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-table {
	border-collapse: collapse;
	color: var(--gp-ink);
	background: var(--gp-surface-2);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-table caption {
	padding: 0.45rem 0.6rem;
	font-family: var(--gp-head-font);
	font-size: 0.95rem;
	text-align: left;
	color: var(--gp-ink-muted);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-table thead th {
	padding: 0.5rem 0.65rem;
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
	background: var(--gp-table-head-bg);
	border-bottom: 2px solid #000000;
	box-shadow: inset 0 1px 0 var(--osrs-edge-light);
}

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

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

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-table :is(.gp-num, td.gp-num) {
	font-family: var(--gp-num-font);
	font-size: 1.02em;
	font-variant-numeric: tabular-nums;
}

/* The race board's rank: the hiscores' bold rank number. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-race-table tbody td:first-child {
	font-family: var(--gp-num-font);
	font-weight: 700;
	color: var(--gp-ink-strong);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-race-table tbody tr:nth-child(-n + 3) td:first-child {
	color: light-dark(#8A4B00, #FFFF00);
	text-shadow: 1px 1px 0 light-dark(transparent, #000000);
}

/* Sortable headings. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-sort {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-sort:hover,
:is(body.is-game-osrs, [data-game="osrs"]) .gp-sort:focus-visible {
	color: var(--osrs-yellow);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-sort__mark::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: rgba(255, 152, 31, 0.45);
	transform: translateY(2px);
}

:is(body.is-game-osrs, [data-game="osrs"]) [aria-sort="descending"] .gp-sort__mark::after {
	border-top-color: var(--osrs-yellow);
}

:is(body.is-game-osrs, [data-game="osrs"]) [aria-sort="ascending"] .gp-sort__mark::after {
	border-top-color: transparent;
	border-bottom-color: var(--osrs-yellow);
	transform: translateY(-2px);
}

/* 5. Numbers, stats and the KPI strip: stone wells with the numbers in yellow ---------------------------------- */

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stat, .gp-kpi) {
	position: relative;
	padding: 0.65rem 0.75rem;
	color: #E8DDC2;
	background: linear-gradient(180deg, #2E271E, var(--osrs-well));
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.7), inset -1px -1px 0 #4A4033, 2px 2px 0 rgba(0, 0, 0, 0.35);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stat-value, .gp-kpi__value) {
	font-family: var(--gp-num-font);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--osrs-yellow);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stat-label, .gp-kpi__label) {
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stat-note, .gp-kpi__note) {
	color: #C9BD9F;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__note a,
:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__value a,
:is(body.is-game-osrs, [data-game="osrs"]) .gp-stat a {
	color: var(--osrs-cyan) !important;
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi {
	display: grid;
	align-content: start;
	gap: 0.15rem;
	min-width: 0;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__label {
	font-family: var(--gp-head-font);
	font-size: 0.85rem;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__value {
	font-size: 1.45rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__value :is(a, button) {
	font: inherit;
	color: var(--osrs-yellow) !important;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__value :is(a, button):hover {
	color: #FFFFFF !important;
	text-decoration: underline;
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__delta.is-up {
	color: #4FD84F;
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__note {
	font-size: 0.78rem;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-kpi__spark {
	display: block;
	width: 100%;
	height: 22px;
	margin-top: 0.2rem;
	color: var(--osrs-orange);
	background: linear-gradient(180deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%);
}

/* 6. Bars: the hitpoints bar, green over red with a black outline -------------------------------------------- */

:is(body.is-game-osrs, [data-game="osrs"]) .gp-progress {
	height: 12px;
	padding: 0;
	background: var(--gp-bar-track);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-progress > span {
	height: 100%;
	background: var(--gp-bar);
	border-radius: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* The leader card: a stone window of its own. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-leader {
	color: #E8DDC2;
	background: linear-gradient(180deg, #4A4033, var(--osrs-stone) 50%, #342C21);
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: inset 2px 2px 0 var(--osrs-edge-light), inset -2px -2px 0 var(--osrs-edge-dark), 3px 3px 0 rgba(0, 0, 0, 0.4);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-leader-label {
	font-family: var(--gp-head-font);
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-leader-meta, .gp-leader-source, .gp-leader-sub) {
	color: #E8DDC2;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-leader a {
	color: var(--osrs-yellow);
}

/* 7. Badges and world pills: little stone buttons ------------------------------------------------------------- */

:is(body.is-game-osrs, [data-game="osrs"]) .gp-badge {
	font-family: var(--gp-head-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--osrs-yellow);
	background: var(--osrs-stone);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-badge--dead, .gp-badge--missing) {
	color: #FFFFFF;
	background: linear-gradient(180deg, #A01A0E, #6F1E13);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-badge--ranked, .gp-badge--live, .gp-badge--p2p) {
	color: var(--osrs-yellow);
	background: linear-gradient(180deg, #2F6B1F, #1C4A12);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-badge--f2p {
	color: #FFFFFF;
	background: linear-gradient(180deg, #5A5A5A, #3A3A3A);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-world-pill {
	font-family: var(--gp-num-font);
	color: var(--osrs-yellow);
	background: var(--osrs-stone);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light);
	text-shadow: 1px 1px 0 #000000;
}

/* 8. Buttons, inputs and the filter bar: stone buttons, dark wells for fields, the red side-stone for "selected" */

:is(body.is-game-osrs, [data-game="osrs"]) :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-filters button, .gp-stars__filters button, .gp-osrs-map__search button, .gp-death-form button, .gp-form button) {
	font-family: var(--gp-head-font);
	font-weight: 400;
	color: var(--osrs-orange);
	background: var(--gp-btn-bg);
	border: var(--gp-btn-border);
	border-radius: 0;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light), inset -1px -1px 0 var(--osrs-edge-dark), 2px 2px 0 rgba(0, 0, 0, 0.45);
	text-shadow: 1px 1px 0 #000000;
	cursor: pointer;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.wp-element-button, .wp-block-button__link, .gp-filter-submit, .gp-filters button, .gp-stars__filters button, .gp-osrs-map__search button):hover {
	color: #FFFFFF;
	background: var(--gp-btn-hover-bg);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.wp-element-button, .wp-block-button__link, .gp-filters button, .gp-stars__filters button):active {
	box-shadow: inset 1px 1px 0 var(--osrs-edge-dark), inset -1px -1px 0 var(--osrs-edge-light);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-filter input, .gp-filter select, .gp-filters input, .gp-filters select, .gp-stars__field input, .gp-stars__field select, .gp-osrs-map__search input, .gp-form input, .gp-death-form input, .gp-death-form select, .gp-death-form textarea) {
	font: inherit;
	color: var(--osrs-yellow);
	background: var(--osrs-well);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 var(--osrs-edge-light);
	color-scheme: dark;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-filters, .gp-race-filters) input::placeholder {
	color: #B5A888;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-race-filters, .gp-filters:not(.gp-stars__filters--lands)) {
	padding: 0.65rem 0.75rem;
	background: linear-gradient(180deg, #4A4033, var(--osrs-stone));
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: inset 2px 2px 0 var(--osrs-edge-light), inset -2px -2px 0 var(--osrs-edge-dark);
	color: #E8DDC2;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-race-filters, .gp-filters) :is(label, legend, .gp-filter > label) {
	font-family: var(--gp-head-font);
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__filters--lands :is(label, legend) {
	color: var(--gp-ink);
	text-shadow: none;
}

/* The segmented control: stone buttons in a row; the checked one is the red selected-tab stone. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg legend {
	padding: 0;
	margin-bottom: 0.2rem;
	font-size: 0.85rem;
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg__option {
	border: 1px solid #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-filters, .gp-race-filters) :is(input, select) {
	box-sizing: border-box;
	max-width: 100%;
}

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

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg__option span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 2rem;
	padding: 0.25rem 0.6rem;
	font-family: var(--gp-head-font);
	font-size: 0.92rem;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
	background: linear-gradient(180deg, #554A3A, #3E3529);
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light), inset -1px -1px 0 var(--osrs-edge-dark);
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg__option input:checked + span {
	color: var(--osrs-yellow);
	background: linear-gradient(180deg, #8A2A1B, var(--osrs-red-tab));
	box-shadow: inset 1px 1px 0 #B04A35, inset -1px -1px 0 #3A0E08;
}

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

:is(body.is-game-osrs, [data-game="osrs"]) .gp-seg__icon {
	width: 18px;
	height: 18px;
	image-rendering: pixelated;
}

/* Chips (the map layers): stone buttons that light up when on. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2rem;
	padding: 0.2rem 0.65rem;
	font-family: var(--gp-head-font);
	font-size: 0.92rem;
	color: #B5A888;
	background: linear-gradient(180deg, #4A4033, #342C21);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light), inset -1px -1px 0 var(--osrs-edge-dark);
	text-shadow: 1px 1px 0 #000000;
	cursor: pointer;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-chip[aria-pressed="true"] {
	color: var(--osrs-yellow);
	background: linear-gradient(180deg, #8A2A1B, var(--osrs-red-tab));
	box-shadow: inset 1px 1px 0 #B04A35, inset -1px -1px 0 #3A0E08;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-chip[aria-pressed="false"] .gp-chip__icon {
	filter: grayscale(1) brightness(0.7);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-chip--action {
	color: var(--osrs-cyan);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-chip__count {
	min-width: 1.4em;
	padding: 0 0.3em;
	font-family: var(--gp-num-font);
	text-align: center;
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.45);
}

/* 9. Nameplates: the Hardcore ironman helm, the yellow name, a hitpoints bar ----------------------------------- */

.gp-plate--osrs {
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light, #6B5F4A), inset -1px -1px 0 var(--osrs-edge-dark, #1E1A13);
}

.gp-plate--osrs .gp-plate__name {
	font-family: "Pixelify Sans", system-ui, sans-serif;
	font-weight: 700;
	color: #FFFF00;
	text-shadow: 1px 1px 0 #000000;
}

.gp-plate--osrs .gp-plate__name a {
	color: inherit;
}

.gp-plate--osrs :is(.gp-plate__meta, .gp-plate__sub) {
	color: #E8DDC2;
}

.gp-plate--osrs .gp-plate__bar {
	height: 8px;
	border: 1px solid #000000;
	border-radius: 0;
	background: linear-gradient(180deg, #E52A2A, #C80000 45%, #7A0000);
}

.gp-plate--osrs .gp-plate__fill {
	border-radius: 0;
	background: linear-gradient(180deg, #2CEB2C, #00C800 45%, #007A00);
}

.gp-plate--osrs.is-dead .gp-plate__name {
	color: #B5A888;
	text-decoration: line-through;
}

/* 10. Previews: the pale yellow hover box of the game, holding the skills tab ---------------------------------- */

:is(body.is-game-osrs, [data-game="osrs"]) .gp-pop,
.gp-pop:has(> .gp-osrs-pv) {
	color: #000000;
	background: var(--gp-pop-bg, #FFFFA0);
	border: var(--gp-pop-border, 1px solid #000000);
	border-radius: 0;
	box-shadow: var(--gp-pop-shadow, 3px 3px 0 rgba(0, 0, 0, 0.55));
}

.gp-osrs-pv {
	display: grid;
	gap: 0.45rem;
	width: min(19rem, 86vw);
	padding: 0.35rem;
	font-size: 0.85rem;
	color: #000000;
}

.gp-osrs-pv__head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-family: "Pixelify Sans", system-ui, sans-serif;
}

.gp-osrs-pv__helm {
	width: 22px;
	height: 22px;
	background: url("../official/osrs/status/hardcore-ironman.png") center / contain no-repeat;
	image-rendering: pixelated;
}

.gp-osrs-pv.is-dead .gp-osrs-pv__helm {
	background-image: url("../official/osrs/status/skull.png");
}

.gp-osrs-pv__name {
	font-size: 1.05rem;
}

.gp-osrs-pv__status {
	margin-left: auto;
	font-size: 0.78rem;
	color: #3A3A3A;
}

/* The skills tab: the stone, three columns, each skill a bevelled slot with its icon and the level twice in yellow. */
.gp-osrs-skills {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	margin: 0;
	padding: 3px;
	list-style: none;
	background: #3E3529;
	border: 1px solid #000000;
	box-shadow: inset 1px 1px 0 #6B5F4A, inset -1px -1px 0 #1E1A13;
}

.gp-osrs-skills li {
	position: relative;
	display: grid;
	grid-template-columns: 26px 1fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	height: 36px;
	padding: 0 4px 0 2px;
	background: linear-gradient(180deg, #4A4033, #3A3127);
	border: 1px solid #1E1A13;
	box-shadow: inset 1px 1px 0 #5E5442;
}

.gp-osrs-skills li::before {
	content: "";
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	background: var(--skill) center / contain no-repeat;
	image-rendering: pixelated;
}

.gp-osrs-skills i {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.gp-osrs-skills b {
	grid-column: 2;
	justify-self: end;
	font-family: "Pixelify Sans", ui-monospace, monospace;
	font-weight: 400;
	font-size: 0.82rem;
	line-height: 1;
	color: #FFFF00;
	text-shadow: 1px 1px 0 #000000;
}

.gp-osrs-skills b:first-of-type {
	align-self: end;
	margin-right: 0.55rem;
}

.gp-osrs-skills b + b {
	align-self: start;
	position: relative;
}

.gp-osrs-skills b + b::before {
	content: "/";
	position: absolute;
	left: -0.5rem;
	top: -0.45rem;
	color: #FFFF00;
	transform: rotate(-12deg);
}

.gp-osrs-skills li.is-99 {
	box-shadow: inset 1px 1px 0 #5E5442, inset 0 0 0 1px rgba(255, 255, 0, 0.35);
}

.gp-osrs-skills__total {
	margin: 0;
	padding: 0.2rem 0.4rem;
	font-family: "Pixelify Sans", ui-monospace, monospace;
	text-align: center;
	color: #FFFF00;
	background: #3A3127;
	border: 1px solid #000000;
	text-shadow: 1px 1px 0 #000000;
}

.s-attack { --skill: url("../official/osrs/skills/attack.png"); }
.s-hitpoints { --skill: url("../official/osrs/skills/hitpoints.png"); }
.s-mining { --skill: url("../official/osrs/skills/mining.png"); }
.s-strength { --skill: url("../official/osrs/skills/strength.png"); }
.s-agility { --skill: url("../official/osrs/skills/agility.png"); }
.s-smithing { --skill: url("../official/osrs/skills/smithing.png"); }
.s-defence { --skill: url("../official/osrs/skills/defence.png"); }
.s-herblore { --skill: url("../official/osrs/skills/herblore.png"); }
.s-fishing { --skill: url("../official/osrs/skills/fishing.png"); }
.s-ranged { --skill: url("../official/osrs/skills/ranged.png"); }
.s-thieving { --skill: url("../official/osrs/skills/thieving.png"); }
.s-cooking { --skill: url("../official/osrs/skills/cooking.png"); }
.s-prayer { --skill: url("../official/osrs/skills/prayer.png"); }
.s-crafting { --skill: url("../official/osrs/skills/crafting.png"); }
.s-firemaking { --skill: url("../official/osrs/skills/firemaking.png"); }
.s-magic { --skill: url("../official/osrs/skills/magic.png"); }
.s-fletching { --skill: url("../official/osrs/skills/fletching.png"); }
.s-woodcutting { --skill: url("../official/osrs/skills/woodcutting.png"); }
.s-runecraft { --skill: url("../official/osrs/skills/runecraft.png"); }
.s-slayer { --skill: url("../official/osrs/skills/slayer.png"); }
.s-farming { --skill: url("../official/osrs/skills/farming.png"); }
.s-construction { --skill: url("../official/osrs/skills/construction.png"); }
.s-hunter { --skill: url("../official/osrs/skills/hunter.png"); }
.s-sailing { --skill: url("../official/osrs/skills/sailing.png"); }

.gp-osrs-pv__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.1rem 0.6rem;
	margin: 0;
}

.gp-osrs-pv__facts dt {
	font-weight: 700;
}

.gp-osrs-pv__facts dd {
	margin: 0;
}

.gp-osrs-pv__link {
	margin: 0;
}

.gp-osrs-pv__link a {
	color: #000080 !important;
}

/* The names that open a preview: a dotted underline says "there is more on hover". */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-osrs-name {
	font: inherit;
	color: inherit;
	text-decoration: underline dotted 1px;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	padding: 0;
	cursor: help;
}

/* 11. The section's own views ---------------------------------------------------------------------------------- */

/* Movers: one stone row per player. */
.gp-osrs-movers {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mover;
}

.gp-osrs-mover {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr) auto;
	grid-template-areas: "move who xp" "move who levels";
	align-items: center;
	gap: 0 0.6rem;
	padding: 0.4rem 0.6rem;
	color: #E8DDC2;
	background: linear-gradient(180deg, #4A4033, var(--osrs-stone, #3E3529));
	border: 1px solid #000000;
	box-shadow: inset 1px 1px 0 #6B5F4A, inset -1px -1px 0 #1E1A13;
}

.gp-osrs-mover__move {
	grid-area: move;
	font-family: "Pixelify Sans", ui-monospace, monospace;
	font-size: 1.05rem;
	text-align: center;
	text-shadow: 1px 1px 0 #000000;
}

.gp-osrs-mover__move.is-up {
	color: #4FD84F;
}

.gp-osrs-mover__move.is-down {
	color: #FF7A6A;
}

.gp-osrs-mover__move.is-held {
	color: #B5A888;
	font-size: 0.85rem;
}

.gp-osrs-mover__who {
	grid-area: who;
	display: grid;
	min-width: 0;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-osrs-mover__who .gp-osrs-name {
	font-family: "Pixelify Sans", system-ui, sans-serif;
	font-weight: 700;
	color: #FFFF00 !important;
	text-shadow: 1px 1px 0 #000000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gp-osrs-mover__place {
	font-size: 0.78rem;
	color: #C9BD9F;
}

.gp-osrs-mover__xp {
	grid-area: xp;
	justify-self: end;
	font-family: "Pixelify Sans", ui-monospace, monospace;
	color: #FFFF00;
	text-shadow: 1px 1px 0 #000000;
}

.gp-osrs-mover__xp abbr {
	text-decoration: none;
	color: #FF981F;
}

.gp-osrs-mover__levels {
	grid-area: levels;
	justify-self: end;
	font-size: 0.78rem;
	color: #00FFFF;
	text-shadow: 1px 1px 0 #000000;
}

/* The deaths log: the skull before each name. */
.gp-osrs-deaths__skull {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 0.35rem;
	vertical-align: -3px;
	background: url("../official/osrs/status/skull.png") center / contain no-repeat;
	image-rendering: pixelated;
}

.gp-osrs-deaths__time {
	display: block;
	font-size: 0.8em;
	color: var(--gp-ink-muted);
}

/* The star tracker: the size column's star art pixel-sharp, gone stars faded, the summary chips as stone slots. */
:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-star-icon, .gp-chip__icon) {
	image-rendering: pixelated;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__row.is-gone {
	opacity: 0.72;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__tier strong {
	font-family: var(--gp-num-font);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__sizes li {
	padding: 0.15rem 0.5rem 0.15rem 0.2rem;
	font-family: var(--gp-head-font);
	color: var(--osrs-yellow);
	background: var(--osrs-stone);
	border: 1px solid #000000;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light);
	text-shadow: 1px 1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stars__best, .gp-stars__how, .gp-stars__timeline, .gp-stars__upcoming, .gp-stars__map, .gp-osrs-records, .gp-osrs-page__worlds) {
	padding: 0.75rem;
	background: var(--gp-surface);
	border: 2px solid #000000;
	box-shadow: inset 0 0 0 3px var(--osrs-stone), inset 4px 4px 0 0 var(--osrs-edge-light), inset -4px -4px 0 0 var(--osrs-edge-dark), 3px 3px 0 rgba(0, 0, 0, 0.35);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-stars__best, .gp-stars__how, .gp-stars__timeline, .gp-stars__upcoming, .gp-stars__map) > h3 {
	margin: -0.75rem -0.75rem 0.75rem;
	padding: 0.5rem 0.9rem;
	font-size: 1.1rem;
	color: var(--osrs-orange);
	text-shadow: 1px 1px 0 #000000;
	background: linear-gradient(180deg, #554A3A, var(--osrs-stone) 60%, #342C21);
	border-bottom: 2px solid #000000;
	box-shadow: inset 2px 2px 0 var(--osrs-edge-light);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__bar {
	fill: var(--osrs-orange);
	stroke: #000000;
	stroke-width: 1;
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__bar:hover,
:is(body.is-game-osrs, [data-game="osrs"]) .gp-stars__bar:focus {
	fill: var(--osrs-yellow);
}

/* The map: a stone frame around the game's own map, region names in the map's yellow. */
:is(body.is-game-osrs, [data-game="osrs"]) .gp-osrs-map__canvas {
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: 0 0 0 3px var(--osrs-stone), 0 0 0 4px #000000, 3px 3px 0 4px rgba(0, 0, 0, 0.35);
}

:is(body.is-game-osrs, [data-game="osrs"]) .gp-osrs-region span {
	font-family: var(--gp-head-font);
	color: #FFFF00;
	text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) .leaflet-popup-content-wrapper,
:is(body.is-game-osrs, [data-game="osrs"]) .leaflet-tooltip {
	color: #000000;
	background: var(--osrs-tip);
	border: 1px solid #000000;
	border-radius: 0;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

:is(body.is-game-osrs, [data-game="osrs"]) .leaflet-popup-tip {
	background: var(--osrs-tip);
	box-shadow: none;
	border: 1px solid #000000;
}

:is(body.is-game-osrs, [data-game="osrs"]) .leaflet-bar a {
	color: var(--osrs-orange);
	background: var(--osrs-stone);
	border-color: #000000;
	border-radius: 0 !important;
	box-shadow: inset 1px 1px 0 var(--osrs-edge-light);
}

/* 12. Notes and sources keep the theme's muted ink (AA on both page colours). */
:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-note, .gp-source, .gp-stars__sub, .gp-race-count) {
	color: var(--gp-ink-muted);
}

:is(body.is-game-osrs, [data-game="osrs"]) :is(.gp-leader, .gp-stat, .gp-kpi, .gp-osrs-mover, .gp-race-filters, .gp-filters) .gp-note {
	color: #C9BD9F;
}

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

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

	.gp-subnav.is-game-osrs a {
		padding: 0.45rem 0.7rem 0.4rem;
		font-size: 0.95rem;
	}

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

	.gp-osrs-mover {
		grid-template-columns: 2.6rem minmax(0, 1fr) auto;
	}
}