/*
 * Game Pulse: the Old School map (Leaflet on the OSRS Wiki's tiles) and the shooting star tracker.
 * Colours come from the theme and the --gp-* tokens (see pulse.css), so [data-game="osrs"] styling applies.
 */

.gp-osrs-map {
	margin: var(--wp--preset--spacing--40, 1.5rem) 0;
}

.gp-osrs-map__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.gp-osrs-map__search input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--gp-panel-border, var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius-sm, 8px);
	font: inherit;
}

.gp-osrs-map__search button,
.gp-stars__filters button {
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: var(--gp-radius-sm, 8px);
	background: var(--gp-tone, var(--wp--preset--color--primary, #D97706));
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.gp-osrs-map__status {
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	color: var(--wp--preset--color--muted, #64748B);
}

.gp-osrs-map__canvas {
	position: relative;
	height: 600px;
	max-height: 75vh;
	border: 1px solid var(--gp-panel-border, var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius, 20px);
	overflow: hidden;
	background: #1b3a5c;   /* the sea colour of the game's map, behind tiles still loading */
}

.gp-osrs-map--compact .gp-osrs-map__canvas {
	height: 420px;
}

.gp-osrs-map__canvas:focus-visible,
.gp-osrs-map .leaflet-marker-icon:focus-visible {
	outline: 3px solid var(--gp-tone, #D97706);
	outline-offset: 2px;
}

.gp-osrs-map__credit,
.gp-osrs-notice {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	color: var(--wp--preset--color--muted, #64748B);
}

.gp-osrs-map .leaflet-container {
	font: inherit;
	background: #1b3a5c;
}

/* Markers */
.gp-osrs-star {
	background: none;
	border: 0;
}

.gp-osrs-star img {
	display: block;
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.gp-osrs-star__label {
	position: absolute;
	left: 50%;
	top: 28px;
	transform: translateX(-50%);
	padding: 1px 5px;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.85);
	color: #FDE68A;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Countdown labels once zoomed in; the marker's popup and hover title carry them further out. */
.gp-osrs-map--mid .gp-osrs-star__label {
	display: none;
}

.gp-osrs-map--mid .gp-osrs-star img {
	width: 20px;
	height: 20px;
}

.gp-osrs-star__label .is-gone {
	color: #FCA5A5;
}

.gp-osrs-dot {
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.gp-osrs-dot--deaths {
	background: #DC2626;
}

.gp-osrs-dot--places {
	background: #F59E0B;
}

.gp-osrs-dot--sites {
	background: #A78BFA;
}

.gp-osrs-map--far .gp-osrs-dot--places,
.gp-osrs-map--far .gp-osrs-dot--sites {
	transform: scale(0.7);
}

.gp-osrs-region {
	background: none;
	border: 0;
	pointer-events: none;
}

.gp-osrs-region span {
	display: inline-block;
	transform: translate(-50%, -50%);
	color: #FEF3C7;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-shadow: 0 0 3px #000, 0 0 6px #000;
	white-space: nowrap;
}

.gp-osrs-map--near .gp-osrs-region span {
	opacity: 0.55;
}

/* The no-script overview: the wiki's tiles laid out with percentages, markers on top. */
.gp-osrs-mosaic {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #1b3a5c;
}

.gp-osrs-mosaic__tile {
	position: absolute;
	display: block;
	max-width: none;
	image-rendering: auto;
}

.gp-osrs-mosaic__pin {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #F59E0B;
}

.gp-osrs-mosaic__pin--star {
	background: #FDE047;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
}

.gp-osrs-mosaic__pin--death {
	background: #DC2626;
}

/* Beside the map */
.gp-osrs-page__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: var(--wp--preset--spacing--40, 1.5rem) 0;
}

.gp-osrs-page__side > *,
.gp-osrs-places {
	min-width: 0;
	overflow-x: auto;
}

@media (min-width: 1000px) {
	.gp-osrs-page__side {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

.gp-osrs-map .leaflet-control-attribution {
	font-size: 11px;
	line-height: 1.4;
}

.gp-osrs-worlds__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-osrs-worlds__players {
	opacity: 0.75;
	font-size: 0.85em;
}

.gp-osrs-records__list {
	margin: 0;
	padding-left: 2.25rem;   /* room for two-digit numbers inside the scrolling column */
}

.gp-osrs-records__list li {
	margin: 0 0 0.5rem;
}

.gp-osrs-records__detail,
.gp-osrs-records__source,
.gp-stars__sub {
	display: block;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	color: var(--wp--preset--color--muted, #64748B);
}

.gp-osrs-places {
	margin: var(--wp--preset--spacing--40, 1.5rem) 0;
}

/* The tracker */
.gp-stars__summary p {
	margin: 0 0 0.5rem;
}

.gp-stars__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.gp-stars__sizes li {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.gp-star-icon {
	width: 28px;
	height: 28px;
	vertical-align: middle;
	object-fit: contain;
}

.gp-stars__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.75rem;
	border: 1px solid var(--gp-panel-border, var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius, 20px);
	background: var(--gp-panel-alt-bg, var(--wp--preset--color--surface-alt, #F8FAFC));
}

/* The filter bars (r12): rows of segmented controls, a search box and selects, applied at once. */
.gp-osrs-section .gp-filters,
.gp-stars .gp-filters {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.gp-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem 1rem;
}

.gp-stars__filters--lands {
	padding: 0;
	border: 0;
	background: none;
}

.gp-seg {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gp-seg legend {
	padding: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.gp-seg__options {
	display: inline-flex;
	flex-wrap: wrap;
}

.gp-seg__option {
	position: relative;
	display: inline-flex;
}

.gp-seg__option input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gp-seg__option span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--wp--preset--color--border, #CBD5E1);
}

.gp-seg__option input:checked + span {
	background: var(--gp-tone, #D97706);
	color: #FFFFFF;
}

.gp-search,
.gp-select {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.gp-search input {
	min-width: 13rem;
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: 0.95rem;
}

.gp-select select {
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: 0.95rem;
}

.gp-stars__field--mining input {
	width: 6rem;
}

/* With the script on, every change applies at once: the Apply button stays reachable for the keyboard but out of sight. */
.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;
}

.gp-filters {
	position: relative;
}

.gp-filters__reset[hidden],
.gp-osrs-map__layers[hidden],
.gp-stars__table tr[hidden],
.gp-osrs-deaths__table tr[hidden] {
	display: none !important;
}

/* The map's layer chips. */
.gp-osrs-map__layers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}

.gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font: inherit;
	cursor: pointer;
}

.gp-chip__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.gp-chip__dot.gp-osrs-dot--regions {
	border-radius: 0;
	background: #FFFF00;
}

/* The KPI strip, the movers and the deaths log (the look draws them; this is their layout). */
.gp-osrs-section .gp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.gp-osrs-now .gp-kpis {
	margin: 0;
}

.gp-kpi {
	display: grid;
	align-content: start;
	gap: 0.15rem;
	min-width: 0;
}

.gp-kpi__spark {
	display: block;
	width: 100%;
	height: 22px;
}

.gp-osrs-deaths__table td,
.gp-osrs-deaths__table th {
	vertical-align: top;
}

.gp-osrs-movers-wrap .gp-source {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.gp-stars__field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.gp-stars__field select,
.gp-stars__field input {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--gp-panel-border, var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius-sm, 8px);
	font: inherit;
	font-size: 0.95rem;
}

.gp-stars__field input {
	width: 6rem;
}

.gp-stars__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

@media (min-width: 1100px) {
	.gp-stars__grid {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

.gp-table-wrap {
	overflow-x: auto;
}

.gp-stars__table td {
	vertical-align: top;
}

.gp-stars__tier > .gp-star-icon {
	float: left;
	margin-right: 0.4rem;
}

.gp-stars__tier > span {
	display: block;
	overflow: hidden;
}

.gp-stars__gone {
	color: #B91C1C;
}

.gp-stars__pin {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.gp-badge--p2p {
	background: #FEF3C7;
	color: #92400E;
}

.gp-badge--f2p {
	background: #E0F2FE;
	color: #075985;
}

.gp-stars__best {
	padding: 1rem;
	border: 1px solid var(--gp-panel-border, var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius, 20px);
	background: var(--gp-panel-alt-bg, var(--wp--preset--color--surface-alt, #F8FAFC));
}

.gp-stars__best h3 {
	margin-top: 0;
}

.gp-stars__best-list {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.gp-stars__best-list li {
	margin: 0 0 0.4rem;
}

.gp-stars__chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 240px;
}

.gp-stars__bar {
	fill: var(--gp-tone, #D97706);
}

.gp-stars__bar:hover,
.gp-stars__bar:focus {
	fill: var(--wp--preset--color--accent, #059669);
	outline: none;
}

.gp-stars__axis {
	fill: var(--wp--preset--color--muted, #64748B);
	font-size: 11px;
}

.gp-stars__base {
	stroke: var(--wp--preset--color--border, #CBD5E1);
}

@media (max-width: 600px) {
	.gp-osrs-map__canvas {
		height: 440px;
	}

	.gp-osrs-map--compact .gp-osrs-map__canvas {
		height: 340px;
	}

	.gp-stars__field {
		flex: 1 1 calc(50% - 0.75rem);
		min-width: 0;
	}

	.gp-stars__field select,
	.gp-stars__field input {
		width: 100%;
	}

	.gp-stars__table thead {
		display: none;
	}

	.gp-stars__table tr {
		display: block;
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #E2E8F0);
	}

	/* A star as a compact card: world and size side by side, the place across, the call and the time left side by
	   side, the scouts in small type. */
	.gp-stars__table tr.gp-stars__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.25rem 0.5rem;
	}

	.gp-stars__table tr.gp-stars__row[hidden] {
		display: none;
	}

	.gp-stars .gp-stars__table .gp-stars__row td {
		border: 0;
		padding: 0.1rem 0.5rem;
	}

	.gp-stars__table .gp-stars__row td:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.gp-stars__table .gp-stars__row td:nth-child(3) {
		grid-row: 1;
		grid-column: 2;
	}

	.gp-stars__table .gp-stars__row td:nth-child(6) {
		grid-column: 1 / -1;
		font-size: 0.8rem;
		opacity: 0.85;
	}

	.gp-search,
	.gp-search input {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.gp-filters__row > .gp-search {
		flex: 1 1 100%;
	}

	.gp-stars .gp-stars__table td {
		display: block;
		padding: 0.15rem 0.5rem;
		border: 0;
	}

	.gp-stars .gp-stars__table td:first-child {
		padding-top: 0.5rem;
	}
}