/*
 * CraftStats – helles Pixel-Design: farbige Bänder, harte Kästen, Pixel-Schrift.
 * Schriften liegen lokal im web-Ordner (Lizenzen: assets/craftstats/licenses/).
 */

/* ---------- Schriften ---------- */

@font-face {
	font-family: "Monocraft";
	src: url("monocraft.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Monocraft";
	src: url("monocraft-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("bricolage.woff2") format("woff2-variations"), url("bricolage.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* ---------- Farben & Maße ---------- */

:root {
	--ink: #16120f;
	--ink-soft: #564b42;
	--cream: #fdf5e2;
	--paper: #fffbf2;
	--turq: #4de3d6;
	--green: #6fdc5a;
	--yellow: #ffd43b;
	--plum: #2a1d38;
	--plum-2: #3a2a4d;
	--lila: #c78be6;
	--coral: #ff6450;
	--sky: #8ccff8;
	--pink: #f0b6e4;
	--orange: #ff9a2e;
	--violet: #6d35d6;
	--violet-dark: #3d1a80;

	--border: 3px;
	--border-lg: 4px;
	--shadow: 6px 6px 0 var(--ink);
	--shadow-sm: 4px 4px 0 var(--ink);
	--shadow-xs: 3px 3px 0 var(--ink);

	--pixel: "Monocraft", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
	--text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

	--focus: var(--ink);
	--wrap: 1180px;
	--gutter: 24px;
	color-scheme: light;
}

/* Kartenfarben: --card = Fläche, --card-ink = Schrift, --rank-sq = Quadrat für Platz 1–3 */
.c-sky { --card: var(--sky); }
.c-turq { --card: var(--turq); }
.c-yellow { --card: var(--yellow); }
.c-green { --card: var(--green); }
.c-pink { --card: var(--pink); }
.c-orange { --card: var(--orange); }
.c-coral { --card: var(--coral); }
.c-lila { --card: var(--lila); }

.c-plum {
	--card: var(--plum);
	--card-ink: var(--cream);
	--rank-sq: var(--yellow);
	--rank-sq-ink: var(--ink);
	--icon-bg: var(--cream);
	--focus: var(--yellow);
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--cream);
	color: var(--ink);
	font: 400 16px/1.5 var(--text);
	overflow-x: hidden;
}

a {
	color: inherit;
}

button,
input,
select {
	font: inherit;
	color: inherit;
}

img,
svg {
	display: block;
}

p {
	margin: 0;
}

.num {
	font-variant-numeric: tabular-nums;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

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

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 20;
	padding: 10px 14px;
	background: var(--yellow);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-xs);
	font: 700 14px var(--pixel);
	text-decoration: none;
}

.skip:focus {
	top: 12px;
}

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.app {
	flex: 1;
	outline: none;
}

/* Pixel-Kästen */
.box {
	background: var(--paper);
	border: var(--border-lg) solid var(--ink);
	box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--btn-bg, var(--yellow));
	color: var(--ink);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-sm);
	font: 700 15px/1.2 var(--pixel);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}

.btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--ink);
}

.btn:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--ink);
}

.btn-light {
	--btn-bg: var(--cream);
}

.btn-small {
	padding: 7px 12px;
	font-size: 13.5px;
}

.btn[hidden] {
	display: none;
}

/* ---------- Kopfzeile ---------- */

.topbar {
	background: var(--turq);
	border-bottom: var(--border) solid var(--ink);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	min-width: 0;
}

.brand-logo {
	image-rendering: pixelated;
	flex: none;
}

.brand-text {
	font: 700 22.5px/1 var(--pixel);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.search {
	flex: 0 1 260px;
	min-width: 0;
}

.search input {
	width: 100%;
	padding: 8px 12px;
	background: var(--paper);
	border: var(--border) solid var(--ink);
	border-radius: 0;
	box-shadow: var(--shadow-xs);
	font: 500 15px/1.3 var(--text);
	outline: none;
}

.search input::placeholder {
	color: var(--ink-soft);
}

.search input:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* ---------- Hero ---------- */

.hero {
	background: var(--turq);
	padding: 84px 0 76px;
}

.kicker {
	margin: 0 0 14px;
	font: 700 15px/1.3 var(--pixel);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --longest: Zeichen im längsten Wort (setzt app.js), damit lange Namen nicht mitten im Wort umbrechen. */
.hero-title {
	margin: 0;
	font: 700 min(clamp(40px, 7.2vw, 81px), calc((100vw - 2 * var(--gutter) - 4px) / (var(--longest, 1) * 0.68)))/1.02 var(--pixel);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.hero-intro {
	max-width: 640px;
	margin: 22px 0 22px;
	font-size: 18px;
	line-height: 1.6;
}

.status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	font: 400 15px/1.5 var(--pixel);
}

.live {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
}

.live-dot {
	flex: none;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ink);
	background: var(--cream);
}

.live[data-mode="live"] .live-dot {
	background: var(--green);
}

.live[data-mode="stale"] .live-dot {
	background: var(--yellow);
}

.live[data-mode="offline"] .live-dot {
	background: var(--coral);
}

.updated:not(:empty)::before,
.since:not(:empty)::before {
	content: "· ";
}

.notice {
	max-width: 760px;
	margin-top: 22px;
	padding: 12px 16px;
	background: var(--yellow);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-sm);
	font-size: 16px;
	font-weight: 500;
}

.notice[data-kind="offline"] {
	background: var(--coral);
}

.notice[hidden] {
	display: none;
}

/* Spielerseite: kompakter Kopf */
body[data-page="player"] .hero {
	padding: 36px 0 34px;
}

body[data-page="player"] .hero-title {
	font-size: min(clamp(30px, 4.6vw, 45px), calc((100vw - 2 * var(--gutter) - 4px) / (var(--longest, 1) * 0.68)));
}

body[data-page="player"] .hero-intro {
	display: none;
}

body[data-page="player"] .status {
	margin-top: 14px;
}

/* ---------- Bänder ---------- */

.band {
	padding: 72px 0;
	background: var(--band-bg, var(--cream));
	color: var(--band-ink, var(--ink));
}

.band-cream { --band-bg: var(--cream); --band-note: var(--ink-soft); }
.band-yellow { --band-bg: var(--yellow); --band-note: var(--ink); }
.band-green { --band-bg: var(--green); --band-note: var(--ink); }
.band-ink { --band-bg: var(--ink); --band-ink: var(--cream); --band-note: #d9cfbd; --focus: var(--yellow); }
.band-plum { --band-bg: var(--plum); --band-ink: var(--cream); --band-note: #d9cfe6; --focus: var(--yellow); }

.band-glance {
	padding: 52px 0 60px;
}

.band-fact {
	padding: 52px 0 56px;
}

.band-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 32px;
}

.band-title {
	margin: 0;
	font: 700 clamp(30px, 4.4vw, 45px)/1.05 var(--pixel);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.band-title-square {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.band-title-square::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border: 4px solid currentColor;
	background: var(--paper);
}

.band-note {
	font-size: 15px;
	color: var(--band-note);
}

.band-label {
	margin: 0 0 22px;
	font: 700 15px/1.3 var(--pixel);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream);
}

.empty,
.board-empty,
.loading {
	margin: 0;
	font-size: 16px;
}

.band-plum .empty,
.band-ink .empty {
	color: var(--cream);
}

/* ---------- Auf einen Blick ---------- */

.tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.tile {
	--tv: clamp(36px, 3.9vw, 54px);
	container-type: inline-size;
	min-height: 150px;
	padding: 26px 22px 20px;
	background: var(--card);
	color: var(--ink);
}

/* Große Pixel-Zahl; lange Zahlen werden so weit verkleinert, dass sie in die Kachel passen (--chars aus app.js). */
.tile-value {
	display: flex;
	align-items: flex-end;
	height: var(--tv);
	font: 700 min(var(--tv), calc(100cqi / (var(--chars, 4) * 0.68)))/1 var(--pixel);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.tile-label {
	margin-top: 18px;
	font: 700 15px/1.3 var(--pixel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tile-sub {
	margin-top: 4px;
	font-size: 14px;
}

/* ---------- Wusstest du? ---------- */

.factbox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px 28px;
	padding: 24px 26px 26px;
	background: var(--yellow);
	border: var(--border-lg) solid var(--ink);
	box-shadow: var(--shadow);
}

.box-label {
	margin: 0 0 14px;
	font: 700 15px/1.3 var(--pixel);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fact {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 40px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.45;
}

.fact-media {
	flex: none;
}

.fact-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--ink);
}

.fact-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fact b {
	font-weight: 750;
}

/* ---------- Spielernamen-Links ---------- */

.plink {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.plink:hover {
	text-decoration-thickness: 3px;
}

/* ---------- Köpfe ---------- */

.head {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	overflow: hidden;
	color: #fff;
	font: 700 15px/1 var(--pixel);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
	image-rendering: pixelated;
}

.head img {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

.head-sm {
	width: 26px;
	height: 26px;
	font-size: 14px;
}

.head-md {
	width: 34px;
	height: 34px;
	font-size: 18px;
}

.head-xl {
	width: 104px;
	height: 104px;
	font-size: 54px;
	border: var(--border-lg) solid var(--ink);
	box-shadow: var(--shadow-sm);
}

/* ---------- Gerade online ---------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 5px 14px 5px 5px;
	background: var(--violet);
	color: #fff;
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-xs);
}

.chip-main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	min-width: 0;
}

.chip-name {
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.chip-name:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Fokus zeigt den ganzen Chip (dunkler Rahmen auf Grün statt auf Lila) */
.chip:has(.chip-name:focus-visible) {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.chip-name:focus-visible {
	outline: none;
}

.chip-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 6px;
	font: 400 13.5px/1.5 var(--pixel);
}

.chip-sep {
	opacity: 0.8;
}

.dim-badge {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid var(--ink);
	background: #6ab04c;
}

.dim-badge[data-dim="minecraft:the_nether"] {
	background: #e0533f;
}

.dim-badge[data-dim="minecraft:the_end"] {
	background: #e9e3a6;
}

.ping {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.ping-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid var(--ink);
}

.ping-good .ping-dot {
	background: var(--green);
}

.ping-ok .ping-dot {
	background: var(--yellow);
}

.ping-bad .ping-dot {
	background: var(--coral);
}

/* ---------- Events ---------- */

.event-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.events-all {
	max-height: 78vh;
	overflow-y: auto;
	padding: 4px 12px 12px 4px;
	margin: -4px -12px -12px -4px;
	scrollbar-color: var(--cream) var(--plum-2);
}

.event {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 14px 18px 14px 14px;
	background: var(--cream);
	color: var(--ink);
	border: var(--border) solid var(--ink);
	box-shadow: 5px 5px 0 #0c0811;
	--focus: var(--ink);
}

.event-media {
	position: relative;
	align-self: center;
	margin-bottom: 8px;
}

.event-flag {
	background: var(--paper);
	border: 2px solid var(--ink);
}

.event-icon {
	position: absolute;
	right: -9px;
	bottom: -11px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--paper);
	border: 2px solid var(--ink);
}

.event-body {
	min-width: 0;
}

.event-text {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.adv {
	display: inline;
	padding: 1px 6px;
	background: var(--green);
	border: 2px solid var(--ink);
	font: 400 12.6px/1.9 var(--pixel);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.event-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-top: 4px;
	font-size: 14px;
	color: var(--ink-soft);
}

.new-tag {
	padding: 1px 6px;
	background: var(--ink);
	color: var(--yellow);
	font: 700 12px/1.5 var(--pixel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.event-new {
	background: #fff1b8;
	box-shadow: 5px 5px 0 var(--yellow);
}

@media (prefers-reduced-motion: no-preference) {
	.event-new {
		animation: event-pop 700ms steps(4) 1;
	}

	@keyframes event-pop {
		0% {
			background: var(--yellow);
		}

		100% {
			background: #fff1b8;
		}
	}
}

.more-row:not(:empty) {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* ---------- Bestenlisten ---------- */

.boards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.board {
	min-width: 0;
	padding: 18px 16px 10px;
	background: var(--card);
	color: var(--card-ink, var(--ink));
	border: var(--border-lg) solid var(--ink);
	box-shadow: var(--shadow);
}

.board-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.board-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--icon-bg, var(--ink));
}

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

.board-title {
	margin: 0;
	font: 700 24px/1.1 var(--pixel);
	letter-spacing: 0.01em;
}

.board-sub {
	margin-top: 3px;
	font-size: 15px;
	font-weight: 500;
}

.ranking {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rank-row {
	display: grid;
	grid-template-columns: 30px 26px minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	padding: 8px 0;
	border-top: 2px solid color-mix(in srgb, var(--card-ink, var(--ink)) 26%, transparent);
}

.rank-row:first-child {
	border-top: 0;
}

.rank {
	font: 700 15px/28px var(--pixel);
	text-align: center;
}

.rank-row.top .rank {
	height: 28px;
	background: var(--rank-sq, var(--ink));
	color: var(--rank-sq-ink, var(--card));
}

.rank-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rank-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.rank-name:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.rank-row.top .rank-name {
	font-weight: 750;
}

.rank-value {
	font: 700 13.5px/1.3 var(--pixel);
	text-align: right;
	white-space: nowrap;
}

.unit-icon {
	display: inline-block;
	margin-left: 5px;
	vertical-align: -1px;
}

.rank-extra {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.board-empty {
	padding: 6px 0 12px;
}

/* ---------- Spielerseite ---------- */

.band-profile {
	padding: 40px 0 64px;
}

.back {
	margin-bottom: 28px;
}

.profile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 32px;
	padding: 26px;
}

.profile-main {
	flex: 1 1 260px;
	min-width: 0;
}

.profile .kicker {
	margin-bottom: 8px;
	color: var(--ink-soft);
}

.profile-name {
	margin: 0;
	font: 700 clamp(30px, 4.6vw, 45px)/1.05 var(--pixel);
	overflow-wrap: anywhere;
}

.profile-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 14px;
	font-size: 15px;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 10px;
	background: var(--cream);
	border: var(--border) solid var(--ink);
	font: 700 13.5px/1.4 var(--pixel);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pill-on {
	background: var(--green);
}

.pill-dot {
	width: 8px;
	height: 8px;
	background: var(--ink);
}

.pill-text {
	font: 400 14.4px/1.4 var(--pixel);
}

.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	flex: 1 1 420px;
	margin: 0;
}

.facts > div {
	min-width: 0;
	padding-left: 12px;
	border-left: 4px solid var(--ink);
}

.fact-label {
	font: 700 12.6px/1.4 var(--pixel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.fact-value {
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 650;
	overflow-wrap: anywhere;
}

.metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.metric {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 16px;
	min-width: 0;
	padding: 18px 18px 16px;
	background: var(--card);
	color: var(--card-ink, var(--ink));
}

.metric-body {
	min-width: 0;
}

.metric-title {
	margin: 0;
	font: 700 18px/1.2 var(--pixel);
}

.metric-label {
	font-size: 14px;
	font-weight: 500;
}

.metric-value {
	margin-top: 10px;
	font: 700 18px/1.2 var(--pixel);
	overflow-wrap: anywhere;
}

.metric-num {
	font-size: 31.5px;
	line-height: 1.1;
}

.metric-unit {
	white-space: nowrap;
}

.metric-rank {
	margin-top: 8px;
	font-size: 15px;
}

.metric-rank b {
	font: 700 14.4px/1.4 var(--pixel);
}

.metric-rank.top b {
	padding: 2px 8px;
	background: var(--rank-sq, var(--ink));
	color: var(--rank-sq-ink, var(--card));
}

.metric-extra {
	margin-top: 4px;
	font-size: 14px;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tab {
	padding: 7px 12px;
	background: var(--paper);
	border: var(--border) solid var(--ink);
	box-shadow: var(--shadow-xs);
	font: 700 13.5px/1.2 var(--pixel);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.tab:hover {
	background: var(--cream);
}

.tab[aria-pressed="true"] {
	background: var(--ink);
	color: var(--yellow);
}

.chart-card {
	padding: 18px 18px 14px;
}

.chart {
	width: 100%;
	height: auto;
}

.chart .bar {
	fill: var(--violet);
}

.chart .bar:hover {
	fill: var(--ink);
}

.chart .bar.today {
	fill: #23a04a;
}

.chart .grid {
	stroke: #e3d8c2;
	stroke-width: 1;
	stroke-dasharray: 4 4;
}

.chart .baseline {
	stroke: var(--ink);
	stroke-width: 3;
}

.chart .axis {
	fill: var(--ink-soft);
	font: 400 12.6px var(--pixel);
}

.chart-summary {
	margin-top: 8px;
	font-size: 15px;
	color: var(--ink-soft);
}

.chart-summary b {
	color: var(--ink);
}

.legend-today {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 2px 0 0;
	vertical-align: -1px;
	background: #23a04a;
}

.table-card {
	overflow: hidden;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: var(--border) solid var(--ink);
	background: var(--cream);
}

.input,
.select {
	min-width: 0;
	padding: 8px 12px;
	background: var(--paper);
	border: var(--border) solid var(--ink);
	border-radius: 0;
	box-shadow: var(--shadow-xs);
	font-size: 15px;
}

.input:focus-visible,
.select:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.input {
	flex: 1 1 220px;
}

.select {
	flex: 0 1 auto;
	max-width: 100%;
	cursor: pointer;
}

.count {
	margin-left: auto;
	font: 400 13.5px/1.4 var(--pixel);
	color: var(--ink-soft);
}

.table-wrap {
	max-height: 600px;
	overflow: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

th,
td {
	padding: 9px 16px;
	text-align: left;
	border-bottom: 2px solid #eadfca;
}

th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--ink);
	color: var(--cream);
	font: 700 13.5px/1.3 var(--pixel);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	--focus: var(--yellow);
}

th:focus-visible {
	outline-offset: -5px;
}

th[aria-sort="ascending"]::after {
	content: " ▲";
	color: var(--yellow);
}

th[aria-sort="descending"]::after {
	content: " ▼";
	color: var(--yellow);
}

td.value,
th.value {
	text-align: right;
}

td.value {
	font: 700 14.4px/1.4 var(--pixel);
	white-space: nowrap;
}

td.cat {
	white-space: nowrap;
	color: var(--ink-soft);
}

/* break-word statt anywhere: ganze Wörter bestimmen die Mindestbreite, sonst bricht „Geschwommene“ mitten durch. */
td.entry {
	overflow-wrap: break-word;
}

.cat-inline {
	display: none;
}

td .id {
	display: block;
	font: 12px/1.4 var(--mono);
	color: var(--ink-soft);
}

tbody tr:nth-child(even) {
	background: #fbf3e1;
}

tbody tr:hover {
	background: #fff1b8;
}

td.empty {
	padding: 22px 16px;
}

.empty-state {
	padding: 40px 28px;
	text-align: center;
}

.empty-state h2 {
	margin: 0 0 10px;
	font: 700 27px/1.2 var(--pixel);
}

.empty-state p {
	max-width: 560px;
	margin: 0 auto;
}

/* ---------- Fußzeile ---------- */

.footer {
	position: relative;
	padding: 66px 0 56px;
	background: var(--plum);
	color: var(--cream);
	font-size: 15px;
	--focus: var(--yellow);
}

/* gepixelte, gestrichelte Oberkante */
.footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 12px;
	background: repeating-linear-gradient(90deg, var(--green) 0 12px, transparent 12px 24px);
}

.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px 48px;
}

.footer-logo {
	image-rendering: pixelated;
	margin-bottom: 16px;
}

.footer-name {
	font: 700 27px/1.1 var(--pixel);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer-tag {
	margin-top: 8px;
	color: #e6dccb;
}

.footer-head {
	margin-bottom: 10px;
	font: 700 13.5px/1.3 var(--pixel);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yellow);
}

.footer-col p + p:not(.footer-head) {
	margin-top: 10px;
}

.footer-col p:not(.footer-head) {
	color: #e6dccb;
	line-height: 1.55;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Responsiv ---------- */

@media (max-width: 1100px) {
	.boards,
	.metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tiles {
		gap: 20px;
	}
}

@media (max-width: 900px) {
	.tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.event-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	:root {
		--gutter: 16px;
		--shadow: 5px 5px 0 var(--ink);
	}

	body {
		font-size: 15px;
	}

	.topbar-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.search {
		flex: 1 1 100%;
	}

	.hero {
		padding: 44px 0 44px;
	}

	.hero-intro {
		font-size: 16px;
	}

	.status {
		flex-direction: column;
		align-items: flex-start;
		font-size: 13.5px;
	}

	.updated:not(:empty)::before,
	.since:not(:empty)::before {
		content: none;
	}

	.band {
		padding: 48px 0;
	}

	.band-glance,
	.band-fact {
		padding: 36px 0 40px;
	}

	.band-head {
		margin-bottom: 22px;
	}

	.tiles {
		gap: 12px;
	}

	.tile {
		--tv: clamp(24px, 8vw, 32px);
		min-height: 0;
		padding: 18px 12px 14px;
	}

	.tile-label {
		margin-top: 10px;
		font-size: 12.6px;
		letter-spacing: 0.04em;
	}

	.tile-sub {
		font-size: 13px;
	}

	.factbox {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px 16px 20px;
	}

	.factbox .btn {
		justify-self: start;
	}

	.fact {
		align-items: flex-start;
		font-size: 17px;
	}

	.chips {
		gap: 10px;
	}

	.event {
		padding: 12px 14px 12px 12px;
	}

	.event-text {
		font-size: 16px;
	}

	.boards,
	.metrics {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.board {
		padding: 16px 14px 10px;
	}

	.board-title {
		font-size: 21.6px;
	}

	.rank-row {
		grid-template-columns: 28px 24px minmax(0, 1fr) auto;
		gap: 8px;
	}

	.head-sm {
		width: 24px;
		height: 24px;
	}

	.profile {
		padding: 18px;
	}

	.head-xl {
		width: 80px;
		height: 80px;
		font-size: 40px;
	}

	.facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.toolbar {
		padding: 12px;
	}

	.count {
		margin-left: 0;
	}

	th,
	td {
		padding: 8px 10px;
	}

	/* Kategorie-Spalte wandert in die Eintrag-Zelle, damit die Tabelle nicht zu eng wird */
	th[data-sort="cat"],
	td.cat {
		display: none;
	}

	/* Feste Spaltenbreiten: Name links, Wert rechts – nichts ragt aus der Karte. */
	.table-wrap table {
		table-layout: fixed;
	}

	th.value {
		width: 40%;
	}

	td.value {
		white-space: normal;
		font-size: 13px;
	}

	.cat-inline {
		display: block;
		font: 700 11.7px/1.4 var(--pixel);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-soft);
	}

	.footer-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 360px) {
	.tiles {
		gap: 10px;
	}

	.tile {
		padding: 16px 10px 12px;
	}

	.rank-value {
		font-size: 13px;
	}
}