/* GTA 6 Interactive Map. Phones first: full-screen map with a bottom sheet;
   from 900 px a fixed panel on the left. Touch targets are at least 44 px. */

:root {
	--bg: #0b0f14;
	--panel: #12171f;
	--panel-2: #1a212b;
	--line: #263040;
	--text: #e9eef4;
	--muted: #95a3b3;
	--accent: #ff4f8b;
	--accent-2: #ffb84d;
	--ok: #3ddc97;
	--ad-overlay: 64px;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* The page is two rows that fill the screen exactly: Raptive's header ad
   (when it is there) and the map. Everything else Raptive adds to the page
   (its privacy footer: "Do not sell or share…", "A Raptive partner site")
   goes to a zero-height row below the screen, as on the SoT map, so it never
   takes room from the map. Its links are offered in the panel's About section
   instead (app.js). Raptive's floating units (sticky footer ad, video) are
   fixed-position and unaffected.
   Every child is placed in column 1 explicitly, so they overlap in that row:
   given a row alone, grid would give each its own new column to the right,
   and the map's column would shrink by their combined width. */
body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	grid-auto-rows: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
body > * { grid-row: 3; grid-column: 1; }

a { color: #ff8fb5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; color: inherit; }

.icon { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Ads (pages with a Raptive id carry body.has-ads). No ad markup of our own:
   Raptive's site rules place the header ad just before #rt_map on pages that
   contain #map, as on the Sea of Thieves map, in its own box that reserves
   its height (Raptive's adthrive-ad-cls). In this flex column it takes its
   room from the map area, which resizes to fit (map.js, sheet.js). The
   footer ad is Raptive's dismissible overlay: no room is taken for it, but
   the panel ends with space to scroll its last item above it. */
body > .adthrive-header { grid-row: 1; }
@media (min-width: 768px) {
	:root { --ad-overlay: 100px; }
}

/* The id is Raptive's: their map header rule inserts the ad before #rt_map. */
#rt_map { grid-row: 2; position: relative; min-height: 0; overflow: hidden; }
#map { position: absolute; inset: 0; }
/* The map takes keyboard focus (arrows pan, + and - zoom): outline it then, not on a click. */
.leaflet-container { font: inherit; }
.leaflet-container:focus:not(:focus-visible) { outline: none; }
.leaflet-container:focus-visible { outline-offset: -3px; }

/* Map buttons */
.map-controls {
	position: absolute;
	right: calc(12px + env(safe-area-inset-right));
	top: calc(12px + env(safe-area-inset-top));
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.map-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(18, 23, 31, 0.92);
	color: var(--text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

/* Markers */
.pin, .cluster { background: none; border: 0; }
/* Marker names on hover (mouse only, map.js). */
.leaflet-tooltip.pin-tip {
	padding: 4px 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(18, 23, 31, 0.96);
	color: var(--text);
	font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.leaflet-tooltip-top.pin-tip::before { border-top-color: rgba(18, 23, 31, 0.96); }
.pin__dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c, var(--accent));
	border: 2px solid var(--bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bg);
}
.pin__dot .icon { width: 18px; height: 18px; }
.pin__dot.is-found { opacity: 0.55; filter: saturate(0.4); }
.pin__dot--blank { background: var(--accent); }
.pin--selected { pointer-events: none; }
.pin--selected .pin__dot { position: absolute; left: 8px; top: 8px; transform: scale(1.15); opacity: 1; filter: none; }
.pin__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 3px rgba(255, 79, 139, 0.6);
	animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
	0% { transform: scale(0.85); opacity: 1; }
	100% { transform: scale(1.35); opacity: 0; }
}
.cluster span {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 23, 31, 0.92);
	border: 2px solid var(--accent);
	color: var(--text);
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* The panel: a bottom sheet on phones */
.sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	height: var(--sheet-h, 85%);
	transform: translateY(var(--sheet-y, 40%));
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
	will-change: transform;
}
.sheet.is-animating { transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet__grip {
	flex: none;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;
}
.sheet__grip span { width: 40px; height: 5px; border-radius: 3px; background: #3a4656; }
.sheet__head { flex: none; padding: 0 12px 10px; touch-action: none; }
.sheet__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* --sheet-hidden: how much of the sheet is below the screen at its
	   current height (sheet.js). Padded, so the end of the panel can always
	   be scrolled up into view, at half height too. */
	padding: 4px 16px calc(24px + var(--sheet-hidden, 0px) + env(safe-area-inset-bottom));
}
.has-ads .sheet__body { padding-bottom: calc(24px + var(--ad-overlay) + var(--sheet-hidden, 0px) + env(safe-area-inset-bottom)); }
/* A phone on its side: clear of the notch. */
.sheet__head, .sheet__body { margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); }

@media (min-width: 900px) {
	.sheet {
		top: 12px;
		bottom: 12px;
		left: 12px;
		right: auto;
		width: 380px;
		height: auto;
		transform: none;
		border-radius: 14px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	}
	.sheet__grip { display: none; }
	.sheet__head { padding-top: 12px; }
	.sheet__body { padding-bottom: 24px; }
	.has-ads .sheet__body { padding-bottom: calc(24px + var(--ad-overlay)); }

	/* Hide/show: the panel slides out to the left; its toggle stays on the
	   window's edge to bring it back. */
	.sheet { transition: transform 0.22s ease; }
	.sheet.is-collapsed { transform: translateX(calc(-100% - 12px)); box-shadow: none; }
	.sheet__toggle {
		display: flex;
		position: absolute;
		top: 16px;
		right: -36px;
		width: 36px;
		height: 48px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--line);
		border-left: 0;
		border-radius: 0 10px 10px 0;
		background: var(--panel);
		color: var(--muted);
		cursor: pointer;
		box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.35);
	}
	.sheet__toggle .icon { transition: transform 0.22s ease; }
	.sheet.is-collapsed .sheet__toggle .icon { transform: rotate(180deg); }
	.sheet.is-instant, .sheet.is-instant .sheet__toggle .icon { transition: none; }
}

/* Large screens: a little more room for the panel's text beside a big map. */
@media (min-width: 1600px) {
	.sheet { width: 420px; }
}

@media (max-width: 899px) {
	.sheet__toggle { display: none; }
}

/* Search */
.search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 6px 0 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--panel-2);
	color: var(--muted);
}
.search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 16px; /* under 16 px, iOS zooms the page on focus */
}
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
	width: 36px;
	height: 36px;
	border: 0;
	background: none;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.search__clear[hidden] { display: none; }
/* The "/" shortcut hint, for keyboards only, while the box is empty and not in use. */
.search__kbd {
	display: none;
	min-width: 22px;
	padding: 1px 6px;
	margin-right: 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--muted);
	font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
	text-align: center;
}
@media (hover: hover) and (pointer: fine) {
	.search input:placeholder-shown ~ .search__kbd { display: inline-block; }
	.search:focus-within .search__kbd { display: none; }
}

/* Views */
.view__title { font-size: 22px; line-height: 1.2; margin: 6px 0 10px; display: flex; align-items: center; gap: 10px; }
.view__subtitle { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 4px 0; }
.view p { margin: 0 0 12px; }
.empty { color: var(--muted); padding: 8px 0; }

.notice {
	margin: 12px 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 79, 139, 0.35);
	background: linear-gradient(135deg, rgba(255, 79, 139, 0.16), rgba(255, 184, 77, 0.12));
}
.notice p:last-child { margin-bottom: 0; }
.view .notice__date { font-weight: 700; color: #ffd0e0; margin-bottom: 6px; }

.options { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 4px; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.switch .icon { width: 18px; height: 18px; vertical-align: -3px; }
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

.group__head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.group__head h2, .about h2 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 10px 0 10px 12px; cursor: pointer; }

.cats { list-style: none; margin: 4px 0 0; padding: 0; }
.cat { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.cat__toggle { display: flex; align-items: center; gap: 10px; min-height: 52px; padding-right: 10px; cursor: pointer; }
.cat__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 52px; color: var(--text); text-decoration: none; }
.cat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat__count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.cat__chev { width: 16px; height: 16px; color: var(--muted); }

.badge {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c);
	color: var(--bg);
}
.badge .icon { width: 18px; height: 18px; }

.about { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.about h2 { margin-bottom: 8px; }
.view .disclaimer { font-size: 12px; }
/* Our privacy policy link, then Raptive's (app.js), all in one wrapping row. */
.privacy-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.privacy-links [data-privacy-links] { display: contents; }
.privacy-links [data-privacy-links][hidden] { display: none; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--muted); text-decoration: none; }
.crumbs .icon { width: 16px; height: 16px; }
.crumbs__sep { opacity: 0.5; }

.progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.progress__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.progress__text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.markers { list-style: none; margin: 0; padding: 0; }
.mk { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mk a { flex: 1; min-width: 0; padding: 13px 0; color: var(--text); text-decoration: none; }
.mk.is-found a { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(149, 163, 179, 0.5); }
.mk__found { width: 44px; height: 44px; flex: none; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mk__found .icon { width: 24px; height: 24px; padding: 2px; border-radius: 50%; border: 2px solid var(--line); fill: transparent; }
.mk__found[aria-pressed="true"] .icon { background: var(--ok); border-color: var(--ok); fill: var(--bg); }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c) 18%, transparent);
	color: var(--c);
	font-size: 13px;
	font-weight: 600;
}
.view .chip { margin: 0 0 12px; }
.chip .icon { width: 16px; height: 16px; }

.shot { margin: 0 0 12px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--panel-2); }
.desc { margin-bottom: 4px; }
.desc--loading {
	min-height: 3em;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--panel-2), #222b36, var(--panel-2));
	background-size: 200% 100%;
	animation: shimmer 1.2s linear infinite;
	margin-bottom: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--panel-2);
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary.is-on { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--muted); }

.results { list-style: none; margin: 0; padding: 0; }
.results a { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.results__title { flex: 1; min-width: 0; }
.results small { color: var(--muted); }

.toast {
	position: fixed;
	left: 50%;
	top: calc(16px + env(safe-area-inset-top));
	z-index: 2000;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 12px;
	background: #1f2833;
	color: var(--text);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	transform: translate(-50%, -160%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
	pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* Mouse and trackpad: show what is clickable. Never on touch screens, where
   hover styles stick after a tap. */
@media (hover: hover) and (pointer: fine) {
	.pin__dot, .cat, .mk, .results a, .btn, .map-btn, .sheet__toggle, .cat__chev { transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease; }
	.pin:hover .pin__dot { transform: scale(1.12); }
	.cluster:hover span { background: #1f2833; }
	.cat:hover, .mk:hover, .results a:hover { background: rgba(255, 255, 255, 0.04); }
	.cat__link:hover .cat__name, .mk a:hover { color: #fff; }
	.cat__link:hover .cat__chev { color: var(--text); transform: translateX(2px); }
	.crumbs a:hover, .link-btn:hover, .btn--ghost:hover { color: var(--text); }
	.btn:hover { border-color: #3a4656; background: #202834; }
	.btn--primary:hover { border-color: #ff6a9c; background: #ff6a9c; }
	.btn--primary.is-on:hover { border-color: #52e3a6; background: #52e3a6; }
	.btn--ghost:hover { background: transparent; }
	.map-btn:hover, .sheet__toggle:hover { background: #1f2833; color: #fff; }
	.mk__found:hover .icon { border-color: var(--ok); }
	.search:hover { border-color: #3a4656; }
	.switch:hover span, .cat__toggle:hover .badge { filter: brightness(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.sheet.is-animating, .toast { transition: none; }
	.pin__ring, .desc--loading { animation: none; }
}