/*
 * NiteZ website
 * Layout: an app frame - top bar, then either the squad map (side panel + full-bleed map)
 * or the leaderboard (table + server column). Deliberately single-theme: a night map.
 */
:root {
	/* colour: night-time map ink, a road-flare amber for "you / act here", status colours */
	--ink: #0c1113;          /* page */
	--ink-2: #121a1c;        /* panels */
	--ink-3: #192326;        /* raised rows, inputs */
	--line: #263336;         /* hairlines */
	--fg: #dfe7e3;
	--fg-dim: #95a5a0;
	--fg-faint: #62716d;
	--flare: #f2a33a;        /* accent */
	--flare-ink: #1b1204;    /* text on the accent */
	--alive: #7ccf86;
	--dead: #e0634a;
	--offline: #6e7b78;
	--warn: #e2c048;         /* online, but something needs a look (hive late, old mod version) */
	--sea: #0f1d24;
	--moon: #efe7cb;         /* moonlight: the brand mark and the moon card */
	--moon-shadow: #1c2427;

	/* squad member colours (you are always flare) */
	--m1: #f2a33a;
	--m2: #5fc8e8;
	--m3: #e889c9;
	--m4: #b7e36b;
	--m5: #a99bff;
	--m6: #f2f2e8;

	/* type */
	--font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
	--font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--step--1: 0.8125rem;
	--step-0: 0.9375rem;
	--step-1: 1.125rem;
	--step-2: 1.5rem;
	--step-3: 2.25rem;

	--radius: 6px;
	--topbar-h: 56px;
	--gutter-l: max(16px, env(safe-area-inset-left, 0px));
	--gutter-r: max(16px, env(safe-area-inset-right, 0px));

	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* phones: never enlarge text on their own */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top, 0px);
	z-index: 1000;
	background: var(--ink);
}

[hidden] { display: none !important; }

a { color: var(--flare); }

:focus-visible {
	outline: 2px solid var(--flare);
	outline-offset: 2px;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--fg-dim); }

.eyebrow {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

/* ------------------------------------------------------------------------------------------ */
/* App frame                                                                                   */
/* ------------------------------------------------------------------------------------------ */
.app {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

/* header and banner keep their content height; only the view below gives way */
.topbar,
.demo-banner { flex-shrink: 0; }

.topbar {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--topbar-h);
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	padding-block: 8px;
	background: var(--ink);
	border-bottom: 1px solid var(--line);
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--fg);
	text-decoration: none;
}

.brand-mark {
	width: 26px;
	height: 26px;
	flex: none;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--moon) 45%, transparent));
}

.brand-moon { fill: var(--moon); }

.brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.625rem;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

.brand-name span { color: var(--flare); }

.tabs {
	display: flex;
	gap: 4px;
}

.tab {
	position: relative;
	padding: 8px 12px;
	color: var(--fg-dim);
	text-decoration: none;
	font-weight: 500;
	border-radius: var(--radius);
}

@media (hover: hover) { .tab:hover { color: var(--fg); background: var(--ink-3); } }

.tab[aria-current="page"] { color: var(--fg); }

.tab[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -9px;
	height: 2px;
	background: var(--flare);
}

.server-pill {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--fg-dim);
	white-space: nowrap;
}

.server-pill .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--offline);
}

.server-pill[data-state="online"] .dot {
	background: var(--alive);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--alive) 22%, transparent);
}

.server-pill[data-state="offline"] .dot { background: var(--dead); }

.server-pill[data-state="warn"] .dot {
	background: var(--warn);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}

.demo-banner {
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	padding-block: 8px;
	background: color-mix(in srgb, var(--flare) 12%, var(--ink));
	border-bottom: 1px solid color-mix(in srgb, var(--flare) 35%, var(--ink));
	font-size: var(--step--1);
	color: var(--fg);
}

.demo-banner strong {
	margin-right: 8px;
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--flare);
}

.view {
	flex: 1 1 auto;
	min-height: 0;
}

/* ------------------------------------------------------------------------------------------ */
/* Buttons and inputs                                                                          */
/* ------------------------------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-3);
	color: var(--fg);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

@media (hover: hover) { .btn:hover { border-color: var(--fg-faint); } }

.btn-primary {
	background: var(--flare);
	border-color: var(--flare);
	color: var(--flare-ink);
	font-weight: 600;
}

@media (hover: hover) { .btn-primary:hover { background: color-mix(in srgb, var(--flare) 88%, white); } }

.btn-primary[disabled] { opacity: 0.6; cursor: progress; }

.btn-ghost { background: transparent; }

.btn-small { min-height: 34px; padding: 5px 11px; font-size: var(--step--1); }

.btn[aria-pressed="true"] {
	border-color: var(--flare);
	color: var(--flare);
}

/* ------------------------------------------------------------------------------------------ */
/* Squad map                                                                                   */
/* ------------------------------------------------------------------------------------------ */
.view-map {
	display: grid;
	grid-template-columns: minmax(300px, 360px) 1fr;
	min-height: 0;
}

.panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 24px 20px 20px var(--gutter-l);
	background: var(--ink-2);
	border-right: 1px solid var(--line);
	overflow-y: auto;
}

.panel-title {
	margin: 4px 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--step-3);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.login {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.login > p { margin: 0; }

.code-form {
	display: flex;
	gap: 8px;
}

.code-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: 1.25rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.code-input::placeholder { color: var(--fg-faint); opacity: 0.5; }

.code-input:focus { border-color: var(--flare); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--flare) 25%, transparent); }

.form-error {
	margin: 0;
	padding: 8px 12px;
	border-left: 2px solid var(--dead);
	background: color-mix(in srgb, var(--dead) 10%, transparent);
	color: var(--fg);
	font-size: var(--step--1);
}

.howto {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	display: grid;
	gap: 10px;
	font-size: var(--step--1);
	color: var(--fg-dim);
}

.howto li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 8px;
}

.howto li::before {
	content: counter(step);
	font-family: var(--font-mono);
	color: var(--flare);
}

.squad {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.squad-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.squad-empty p {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--fg-dim);
	font-size: var(--step--1);
}

.roster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.member {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--ink-3);
	cursor: pointer;
	text-align: left;
	width: 100%;
	color: inherit;
	font: inherit;
}

@media (hover: hover) { .member:hover { border-color: var(--line); } }

.member[data-selected="true"] { border-color: var(--mc); }

.member-swatch {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--mc);
	display: grid;
	place-items: center;
}

.member-swatch::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mc);
}

.member[data-state="offline"] .member-swatch { border-style: dashed; opacity: 0.55; }
.member[data-state="offline"] .member-swatch::after { background: transparent; }

.member-main { min-width: 0; }

.member-name {
	display: block;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.member-name .you {
	margin-left: 6px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--flare);
}

.member-sub {
	display: block;
	font-size: var(--step--1);
	color: var(--fg-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.member-meta {
	text-align: right;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	color: var(--fg-dim);
	white-space: nowrap;
}

.member-meta strong {
	display: block;
	color: var(--fg);
	font-weight: 500;
}

.map-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.life {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.life div {
	padding: 10px 12px;
	background: var(--ink-2);
}

.life dt {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.life dd {
	margin: 2px 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.3125rem;
	white-space: nowrap;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.panel-foot {
	margin: auto 0 0;
	font-size: 0.75rem;
}

.map-wrap {
	position: relative;
	min-width: 0;
	min-height: 0;
}

.map {
	position: absolute;
	inset: 0;
	background: var(--sea);
}

.map-readout {
	position: absolute;
	left: calc(12px + env(safe-area-inset-left, 0px));
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 500;
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--ink) 85%, transparent);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.grid-ref { color: var(--flare); letter-spacing: 0.06em; }

/* Leaflet overrides */
.leaflet-container {
	background: var(--sea);
	font-family: var(--font-body);
	outline: none;
}

.leaflet-container.map-tiles { background: var(--ink); }

.leaflet-control-zoom a,
.leaflet-bar a {
	background: var(--ink-2) !important;
	color: var(--fg) !important;
	border-color: var(--line) !important;
}

.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: none !important; }

.leaflet-control-scale-line {
	background: color-mix(in srgb, var(--ink) 80%, transparent);
	border-color: var(--fg-dim);
	color: var(--fg-dim);
	font-family: var(--font-mono);
}

.leaflet-control-attribution {
	background: color-mix(in srgb, var(--ink) 75%, transparent) !important;
	color: var(--fg-faint) !important;
	font-size: 10px;
}

.leaflet-control-attribution a { color: var(--fg-dim); }

.leaflet-top { top: env(safe-area-inset-top, 0px); }
.leaflet-right { right: env(safe-area-inset-right, 0px); }
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }

/* Place names */
.place {
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #e8eee9;
	text-shadow: 0 0 3px #000, 0 0 8px #000;
	font-family: var(--font-body);
	line-height: 1;
}

.place::before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	margin: 0 auto 4px;
	background: currentColor;
	opacity: 0.8;
}

.place-city { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; }
.place-town { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.place-village { font-size: 11.5px; color: #c9d3cd; }
.place-airfield { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #f6c983; }
.place-poi { font-size: 11px; font-style: italic; color: #a9b8b2; }
.place-poi::before { border-radius: 50%; }
.place-airfield::before { width: 7px; height: 2px; }

[data-zoom="far"] .place-village,
[data-zoom="far"] .place-poi,
[data-zoom="far"] .place-airfield,
[data-zoom="mid"] .place-poi { display: none; }

.grid-label {
	transform: translate(-50%, -50%);
	font-family: var(--font-mono);
	font-size: 10px;
	color: rgba(223, 231, 227, 0.45);
	pointer-events: none;
	text-shadow: 0 0 3px #000;
}

/* Squad markers */
.survivor {
	--mc: var(--m1);
	position: relative;
	width: 0;
	height: 0;
}

.survivor-cone {
	position: absolute;
	left: -22px;
	top: -22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: conic-gradient(from -28deg, color-mix(in srgb, var(--mc) 55%, transparent) 0 56deg, transparent 56deg);
	transform: rotate(var(--dir, 0deg));
	transition: transform 0.4s linear;
}

.survivor-dot {
	position: absolute;
	left: -8px;
	top: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--mc);
	border: 2px solid #0c1113;
	box-shadow: 0 0 0 2px var(--mc);
}

.survivor-self .survivor-dot::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid var(--mc);
	animation: ping 2.2s ease-out infinite;
}

.survivor-veh .survivor-dot { border-radius: 3px; }

.survivor-label {
	position: absolute;
	left: 14px;
	top: -9px;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(12, 17, 19, 0.82);
	color: #f2f5f3;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	border-left: 2px solid var(--mc);
}

.survivor.label-left .survivor-label {
	left: auto;
	right: 14px;
	border-left: 0;
	border-right: 2px solid var(--mc);
}

.survivor.label-none .survivor-label { display: none; }

.survivor-offline .survivor-dot {
	background: transparent;
	border: 2px dashed var(--mc);
	box-shadow: none;
	opacity: 0.7;
}

.survivor-offline .survivor-cone { display: none; }
.survivor-offline .survivor-label { color: #aab5b1; font-weight: 500; }

@keyframes ping {
	0% { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ------------------------------------------------------------------------------------------ */
/* Leaderboard                                                                                 */
/* ------------------------------------------------------------------------------------------ */
.view-board {
	overflow-y: auto;
}

.board-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	padding-block: 32px 48px;
}

.board { min-width: 0; }

.board-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.board-title {
	margin: 4px 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.search {
	min-height: 40px;
	width: min(260px, 100%);
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-2);
	color: var(--fg);
	font: inherit;
}

.search:focus { border-color: var(--flare); outline: none; }

/* 16px or more: iPhones zoom the whole page into a focused field with smaller text */
.search, .code-input { font-size: max(16px, 1rem); }
.code-input { font-size: 1.25rem; }

.board-tools { min-width: 0; }

.sort {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.chip {
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--fg-dim);
	font: inherit;
	font-size: var(--step--1);
	cursor: pointer;
}

@media (hover: hover) { .chip:hover { color: var(--fg); border-color: var(--fg-faint); } }

.chip[aria-selected="true"] {
	background: var(--flare);
	border-color: var(--flare);
	color: var(--flare-ink);
	font-weight: 600;
}

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-2);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.table th,
.table td {
	padding: 11px 14px;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--line);
}

.table tbody tr:last-child td { border-bottom: 0; }

.table th {
	position: sticky;
	top: 0;
	background: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.table th[data-active="true"] { color: var(--flare); }

.table td { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-dim); }

.table td.sorted { color: var(--fg); font-weight: 500; font-size: var(--step-0); }

.table th:nth-child(1), .table td:nth-child(1) { text-align: left; width: 48px; }
.table th:nth-child(2), .table td:nth-child(2) { text-align: left; }

.table td.rank { color: var(--fg-faint); }

.table tr.top td.rank {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--step-1);
	color: var(--flare);
}

.table td.name {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--fg);
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table tr.me td { background: color-mix(in srgb, var(--flare) 8%, transparent); }

.status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: 2px;
	background: transparent;
	border: 1px solid var(--fg-faint);
}

.status-dot[data-state="alive"] { background: var(--alive); border-color: var(--alive); }
.status-dot[data-state="online"] { background: var(--offline); border-color: var(--offline); }

.table .empty td {
	padding: 40px 16px;
	text-align: center;
	font-family: var(--font-body);
	color: var(--fg-dim);
	white-space: normal;
}

.board-note { font-size: 0.75rem; margin: 12px 0 0; }

.side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.card {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-2);
}

.side-title {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.moon-card { overflow: hidden; }

.moon-row {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 16px;
	align-items: center;
}

.moon {
	width: 76px;
	height: 76px;
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--moon) 30%, transparent));
}

.moon-dark { fill: var(--moon-shadow); }
.moon-lit { fill: var(--moon); }
.moon-crater { fill: #000; opacity: 0.09; }

.moon-text { min-width: 0; }

.moon-phase {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-2);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--moon);
}

.moon-detail {
	margin: 4px 0 0;
	font-size: var(--step--1);
	color: var(--fg-dim);
}

.totals-grid {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
}

.totals-grid dt { font-size: var(--step--1); color: var(--fg-dim); }

.totals-grid dd {
	margin: 2px 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-2);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.totals-grid .big { grid-column: 1 / -1; }
.totals-grid .big dd { font-size: var(--step-3); color: var(--flare); font-weight: 800; }

.feed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.feed-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
}

.feed-list li:first-child { border-top: 0; padding-top: 0; }

.feed-who { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.feed-when { font-family: var(--font-mono); color: var(--fg-faint); text-align: right; }
.feed-how { grid-column: 1 / -1; color: var(--fg-dim); }
.feed-how .cause { color: var(--dead); }
.feed-empty { color: var(--fg-dim); font-size: var(--step--1); }

/* ------------------------------------------------------------------------------------------ */
/* My survivor                                                                                 */
/* ------------------------------------------------------------------------------------------ */
.view-me { overflow-y: auto; }

.me-layout {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	padding-block: 32px 48px;
}

.me-login {
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.me-login > p { margin: 0; }

.me-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.me-head-text { min-width: 0; }

.me-name { overflow-wrap: anywhere; }

.me-status {
	margin: 8px 0 0;
	color: var(--fg-dim);
	font-size: var(--step--1);
}

.me-grid {
	display: grid;
	grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.me-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	min-height: 24px;
}

.card-head .side-title { margin: 0; }

.card-note {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--fg-faint);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-empty {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--fg-dim);
	font-size: var(--step--1);
	list-style: none;
}

/* condition */
.flags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.flags:not(:empty) { margin-bottom: 14px; }

.flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--step--1);
	font-weight: 600;
}

.flag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.flag-bad {
	color: #ff9c87;
	background: color-mix(in srgb, var(--dead) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--dead) 55%, transparent);
}

.flag-bad::before { animation: blink 1.2s ease-in-out infinite; }

@keyframes blink { 50% { opacity: 0.25; } }

.vitals {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.meter {
	--meter: #8fb3a6;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 4px 10px;
}

.meter[data-level="warn"] { --meter: var(--flare); }
.meter[data-level="bad"] { --meter: var(--dead); }

.meter-label { font-weight: 600; }

.meter-state {
	font-size: var(--step--1);
	color: var(--fg-dim);
}

.meter[data-level="bad"] .meter-state { color: #ff9c87; }

.meter-value {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

.meter-bar {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 3px;
	background: var(--ink-3);
	overflow: hidden;
}

.meter-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--meter);
	transition: width 0.6s ease;
}

.air {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 2px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
}

.air-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.air strong {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
}

/* gear */
.gear,
.item-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gear { display: flex; flex-direction: column; gap: 2px; }

.item-children {
	margin: 2px 0 6px 9px;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.item-row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	border-radius: 4px;
}

.item > .item-row { border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }

.item-icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--fg-dim);
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.item[data-kind="weapon"] > .item-row .item-icon,
.item[data-kind="mag"] > .item-row .item-icon { stroke: var(--flare); }

.item-main { min-width: 0; }

.item-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--step--1);
	font-weight: 500;
}

.item[data-kind="cloth"] > .item-row .item-name,
.item[data-kind="weapon"] > .item-row .item-name { font-size: var(--step-0); font-weight: 600; }

.item-sub {
	display: block;
	font-size: 0.75rem;
	color: var(--fg-faint);
}

.badge {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	padding: 2px 7px;
	border-radius: 3px;
	border: 1px solid var(--line);
	color: var(--fg-dim);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.badge[data-level="warn"] { color: var(--flare); border-color: color-mix(in srgb, var(--flare) 45%, transparent); }
.badge[data-level="bad"] { color: #ff9c87; border-color: color-mix(in srgb, var(--dead) 55%, transparent); }

/* records */
.records {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
}

.records dt { font-size: var(--step--1); color: var(--fg-dim); }

.records dd {
	margin: 2px 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-2);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.rank-tag {
	display: block;
	margin-top: 2px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--flare);
	letter-spacing: 0.04em;
}

.records-note { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; }

/* route map */
.select {
	min-height: 34px;
	max-width: 60%;
	padding: 4px 30px 4px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2395a5a0' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 10px;
	color: var(--fg);
	font: inherit;
	font-size: max(16px, 0.8125rem);
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
}

.select:focus { border-color: var(--flare); outline: none; }

.me-map-wrap {
	position: relative;
	height: 440px;
	margin: 0 -18px;
	border-block: 1px solid var(--line);
	background: var(--ink);
}

.me-map {
	position: absolute;
	inset: 0;
}

.me-map-empty {
	position: absolute;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--fg-dim);
	background: color-mix(in srgb, var(--ink) 55%, transparent);
	pointer-events: none;
}

.legend {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.75rem;
	color: var(--fg-dim);
}

.legend li { display: inline-flex; align-items: center; gap: 6px; }

.lg { display: inline-block; flex: none; }
.lg-route { width: 18px; height: 3px; border-radius: 2px; background: var(--flare); }
.lg-veh { width: 18px; height: 0; border-top: 3px dashed var(--m2); }
.lg-spawn { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--alive); }
.lg-zombie { width: 8px; height: 8px; border-radius: 50%; background: #c3cc99; border: 1.5px solid #0c1113; }
.lg-player { width: 9px; height: 9px; background: var(--flare); transform: rotate(45deg); }
.lg-death { width: 12px; height: 12px; position: relative; }
.lg-death::before, .lg-death::after { content: ""; position: absolute; left: 5px; top: -1px; width: 2.5px; height: 14px; background: var(--dead); transform: rotate(45deg); }
.lg-death::after { transform: rotate(-45deg); }

/* Leaflet paths: the colours live here (SVG presentation attributes cannot use CSS variables) */
.leaflet-pane path.route-casing { stroke: #0c1113; stroke-width: 6; stroke-opacity: 0.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-pane path.route { stroke: var(--flare); stroke-width: 3; stroke-opacity: 0.95; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-pane path.route-veh { stroke: var(--m2); stroke-dasharray: 7 6; }
.leaflet-pane path.shot { stroke: #e6ecd0; stroke-width: 1; stroke-opacity: 0.55; stroke-dasharray: 2 3; fill: none; }
.leaflet-pane path.shot-player { stroke: var(--flare); stroke-width: 1.5; stroke-opacity: 0.9; }
.leaflet-pane path.shot-death { stroke: var(--dead); stroke-width: 1.5; stroke-opacity: 0.9; stroke-dasharray: 5 4; }

.ev { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.ev-spawn { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--alive); background: color-mix(in srgb, var(--alive) 25%, #0c1113); box-shadow: 0 0 0 2px #0c1113; }
.ev-zombie { width: 9px; height: 9px; border-radius: 50%; background: #c3cc99; border: 1.5px solid #0c1113; }
.ev-player { width: 12px; height: 12px; background: var(--flare); border: 2px solid #0c1113; transform: translate(-50%, -50%) rotate(45deg); }
.ev-death { width: 20px; height: 20px; }
.ev-death::before, .ev-death::after { content: ""; position: absolute; left: 8px; top: -1px; width: 4px; height: 22px; border-radius: 2px; background: var(--dead); box-shadow: 0 0 0 1.5px #0c1113; transform: rotate(45deg); }
.ev-death::after { transform: rotate(-45deg); }

.leaflet-tooltip.ev-tip {
	background: var(--ink-2);
	border: 1px solid var(--line);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--step--1);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.leaflet-tooltip.ev-tip::before { border-top-color: var(--line); }

.events {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
	border-top: 1px solid var(--line);
}

.event-btn {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: 10px;
	width: 100%;
	padding: 8px 4px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--step--1);
	text-align: left;
	cursor: pointer;
}

@media (hover: hover) { .event-btn:hover { background: var(--ink-3); } }

.event-time { font-family: var(--font-mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.event-main { min-width: 0; }
.event-title { font-weight: 600; }
.event-detail { margin-left: 8px; color: var(--fg-dim); white-space: nowrap; }
.event[data-kind="death"] .event-title { color: #ff9c87; }
.event[data-kind="kill_player"] .event-title { color: var(--flare); }
.event[data-kind="deploy"] .event-title { color: var(--alive); }

/* curves */
.chart { min-height: 60px; }

.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-bg { fill: var(--ink-3); }
.chart-mid { stroke: var(--line); stroke-dasharray: 2 4; }
.chart-label { fill: var(--fg-dim); font-family: var(--font-body); font-size: 12px; }
.chart-area { fill: var(--flare); fill-opacity: 0.12; }
.chart-line { fill: none; stroke: var(--flare); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-value { fill: var(--fg); font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-axis { fill: var(--fg-faint); font-family: var(--font-mono); font-size: 11px; }
.chart-cross { stroke: var(--fg-dim); stroke-width: 1; }
.chart-dot { fill: var(--flare); stroke: var(--ink-2); stroke-width: 2; }
.chart-hit { fill: transparent; cursor: crosshair; }

/* lives */
.lives-table .life-row { cursor: pointer; }
@media (hover: hover) { .lives-table .life-row:hover td { background: var(--ink-3); } }
.lives-table .life-row[data-selected="true"] td { background: color-mix(in srgb, var(--flare) 9%, transparent); }
.lives-table .life-row[data-selected="true"] td.life-n { color: var(--flare); }
.lives-table td.life-end { text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.lives-table th:last-child { text-align: left; }
.lives-table td.life-end[data-cause="alive"] { color: var(--alive); }
.lives-table td.life-end[data-cause="player"],
.lives-table td.life-end[data-cause="zombie"] { color: #ff9c87; }

@media (max-width: 960px) {
	/* one column: condition and the map first, then gear, curves, lives, records */
	.me-grid { grid-template-columns: minmax(0, 1fr); }
	.me-col { display: contents; }
	.card-vitals { order: 1; }
	.card-route { order: 2; }
	.card-gear { order: 3; }
	.card-chart { order: 4; }
	.card-lives { order: 5; }
	.card-records { order: 6; }
}

@media (max-width: 760px) {
	.me-layout { padding-block: 20px 32px; }
	.me-head { align-items: flex-start; }
	.me-map-wrap { height: 340px; }
	.lives-table .opt-phone { display: none; }
	.event-detail { display: block; margin-left: 0; }
	.card-route .card-head { flex-wrap: wrap; }
	.card-route .select { max-width: 100%; flex: 1 1 180px; }
	.records dd { font-size: var(--step-1); }
}

/* ------------------------------------------------------------------------------------------ */
/* Narrow screens                                                                              */
/* ------------------------------------------------------------------------------------------ */
@media (max-width: 960px) {
	.board-layout { grid-template-columns: minmax(0, 1fr); }
	.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 760px) {
	.topbar { gap: 8px 12px; }
	.tabs { order: 3; width: 100%; }
	.tab { flex: 1; text-align: center; }
	.tab[aria-current="page"]::after { bottom: -8px; }
	.server-pill { font-size: 0.75rem; padding: 4px 10px; }

	/* map on top, squad below. The map track itself has the minimum height (a min-height on the map
	   box alone would let it spill over the panel); the panel scrolls inside its own maximum. */
	.view-map {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(40vh, 1fr) auto;
		grid-template-rows: minmax(40dvh, 1fr) auto;
	}
	.map-wrap { grid-row: 1; }
	.panel {
		grid-row: 2;
		max-height: 45vh;
		max-height: 45dvh;
		padding: 16px var(--gutter-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
		border-right: 0;
		border-top: 1px solid var(--line);
		gap: 14px;
	}
	.panel-title { font-size: 1.75rem; }
	.panel-foot { display: none; }
	.map-readout { display: none; }

	.board-layout { padding-block: 20px 32px; gap: 20px; }
	.table th, .table td { padding: 10px; }
	.table .opt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.survivor-self .survivor-dot::after { animation: none; opacity: 0; }
	.flag-bad::before { animation: none; }
	.meter-fill { transition: none; }
	.survivor-cone { transition: none; }
}

/* ------------------------------------------------------------------------------------------ */
/* Servers card (leaderboard column): one row per game server of the network                   */
/* ------------------------------------------------------------------------------------------ */
.server-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.server-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 2px 10px;
}

.server-row .srv-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--offline);
	align-self: center;
}

.server-row[data-state="green"] .srv-dot { background: var(--alive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alive) 20%, transparent); }
.server-row[data-state="yellow"] .srv-dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.server-row[data-state="red"] .srv-dot { background: var(--dead); }

.srv-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.srv-players { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-dim); text-align: right; white-space: nowrap; }
.srv-line { grid-column: 2 / -1; font-size: var(--step--1); color: var(--fg-dim); }
/* the label tells the hive link's own state; the dot tells the server as a whole */
.srv-sync[data-sync="synced"], .srv-sync[data-sync="local"] { color: var(--alive); }
.srv-sync[data-sync="delayed"], .srv-sync[data-sync="failing"] { color: var(--warn); }
.srv-sync[data-sync="offline"] { color: var(--dead); }
.srv-problems { grid-column: 2 / -1; margin: 2px 0 0; padding-left: 16px; font-size: var(--step--1); color: var(--warn); }