.dvsubjects-wrap {
	--dvsubjects-bg: #070707;
	--dvsubjects-panel: #101010;
	--dvsubjects-panel-soft: #171717;
	--dvsubjects-red: #ff1d2d;
	--dvsubjects-red-deep: #8f0d16;
	--dvsubjects-white: #f7f2f2;
	--dvsubjects-muted: #a79b9b;
	--dvsubjects-line: rgba(255, 29, 45, 0.52);
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 4vw, 48px);
	color: var(--dvsubjects-white);
	background:
		linear-gradient(135deg, rgba(255, 29, 45, 0.08), transparent 34%),
		radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.08), transparent 28%),
		var(--dvsubjects-bg);
	border: 1px solid rgba(255, 29, 45, 0.28);
	box-shadow: inset 0 0 80px rgba(255, 29, 45, 0.08);
	isolation: isolate;
}

.dvsubjects-wrap,
.dvsubjects-wrap * {
	box-sizing: border-box;
}

.dvsubjects-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 29, 45, 0.04) 1px, transparent 1px);
	background-size: 100% 18px, 24px 100%;
	mix-blend-mode: screen;
}

.dvsubjects-scanline-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 7px),
		repeating-linear-gradient(90deg, rgba(255, 29, 45, 0.05) 0, transparent 2px, transparent 13px);
	opacity: 0.38;
}

.dvsubjects-header {
	position: relative;
	z-index: 4;
	margin: 0 0 24px;
}

.dvsubjects-kicker,
.dvsubjects-status,
.dvsubjects-signal,
.dvsubjects-live-badge,
.dvsubjects-footer,
.dvsubjects-action {
	font-family: "Jersey 10", Impact, sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
}

.dvsubjects-kicker {
	margin: 0 0 4px;
	color: var(--dvsubjects-muted);
	font-size: clamp(18px, 2vw, 24px);
}

.dvsubjects-glitch-title {
	position: relative;
	display: inline-block;
	margin: 0;
	color: var(--dvsubjects-white);
	font-family: "Jersey 10", Impact, sans-serif;
	font-size: clamp(48px, 8vw, 96px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0;
	text-shadow: 3px 0 0 rgba(255, 29, 45, 0.8), -2px 0 0 rgba(255, 255, 255, 0.25);
}

.dvsubjects-glitch-title::before,
.dvsubjects-glitch-title::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.42;
}

.dvsubjects-glitch-title::before {
	color: var(--dvsubjects-red);
	transform: translate(3px, -2px);
	clip-path: inset(0 0 52% 0);
}

.dvsubjects-glitch-title::after {
	color: #fff;
	transform: translate(-2px, 2px);
	clip-path: inset(56% 0 0 0);
}

.dvsubjects-warning,
.dvsubjects-empty {
	max-width: 720px;
	margin: 14px 0 0;
	color: #ffd7d7;
	font: 600 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dvsubjects-grid {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(var(--dvsubjects-columns, auto-fit), minmax(min(100%, 260px), 1fr));
	gap: 18px;
}

.dvsubjects-card {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	padding: 16px;
	background:
		linear-gradient(145deg, rgba(255, 29, 45, 0.09), transparent 42%),
		linear-gradient(180deg, var(--dvsubjects-panel), #080808);
	border: 1px solid rgba(255, 29, 45, 0.46);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.38);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.dvsubjects-card--offline {
	opacity: 0.78;
}

.dvsubjects-card--live {
	border-color: rgba(255, 29, 45, 0.95);
	box-shadow: 0 0 0 1px rgba(255, 29, 45, 0.22), 0 0 34px rgba(255, 29, 45, 0.24), 0 18px 48px rgba(0, 0, 0, 0.48);
}

.dvsubjects-card:hover {
	transform: translateY(-3px);
	border-color: var(--dvsubjects-red);
	box-shadow: 0 0 0 1px rgba(255, 29, 45, 0.28), 0 0 40px rgba(255, 29, 45, 0.22);
}

.dvsubjects-card-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px),
		radial-gradient(circle at 60% 70%, rgba(255, 29, 45, 0.16) 0 1px, transparent 1px);
	background-size: 13px 13px, 19px 19px;
	opacity: 0.18;
}

.dvsubjects-card-head {
	position: relative;
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

.dvsubjects-avatar {
	display: grid;
	place-items: center;
	width: 82px;
	aspect-ratio: 1;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.66);
	background: #050505;
	border: 2px solid rgba(255, 29, 45, 0.72);
	border-radius: 10px;
	box-shadow: inset 0 0 18px rgba(255, 29, 45, 0.22), 0 0 18px rgba(255, 29, 45, 0.15);
	font: 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-align: center;
}

.dvsubjects-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: contrast(1.05) saturate(0.92);
}

.dvsubjects-status {
	display: inline-block;
	margin: 0 0 5px;
	padding: 3px 7px;
	color: #120405;
	background: var(--dvsubjects-red);
	font-size: 18px;
	line-height: 1;
}

.dvsubjects-name {
	margin: 0;
	color: var(--dvsubjects-white);
	font-family: "Jersey 10", Impact, sans-serif;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.dvsubjects-signal {
	margin: 6px 0 0;
	color: var(--dvsubjects-muted);
	font-size: 18px;
	line-height: 1;
}

.dvsubjects-signal::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 7px;
	background: var(--dvsubjects-red);
	border-radius: 999px;
	box-shadow: 0 0 12px var(--dvsubjects-red);
}

.dvsubjects-signal[data-signal="laag"]::before { background: #8fe388; box-shadow: 0 0 10px rgba(143, 227, 136, 0.7); }
.dvsubjects-signal[data-signal="gemiddeld"]::before { background: #f4c542; box-shadow: 0 0 10px rgba(244, 197, 66, 0.7); }
.dvsubjects-signal[data-signal="hoog"]::before { background: #ff7138; box-shadow: 0 0 10px rgba(255, 113, 56, 0.7); }
.dvsubjects-signal[data-signal="kritiek"]::before { background: var(--dvsubjects-red); box-shadow: 0 0 14px rgba(255, 29, 45, 0.9); }
.dvsubjects-signal[data-signal="onbekend"]::before { background: #c4c4c4; box-shadow: none; }

.dvsubjects-live-panel {
	position: relative;
	margin-top: 15px;
	padding: 12px;
	background: rgba(0, 0, 0, 0.34);
	border: 1px solid rgba(255, 29, 45, 0.22);
}

.dvsubjects-live-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 8px;
	color: #fff;
	background: rgba(255, 29, 45, 0.22);
	border: 1px solid rgba(255, 29, 45, 0.72);
	font-size: 18px;
	line-height: 1;
}

.dvsubjects-card--live .dvsubjects-live-badge {
	background: var(--dvsubjects-red);
	color: #130304;
	box-shadow: 0 0 20px rgba(255, 29, 45, 0.5);
}

.dvsubjects-live-state,
.dvsubjects-stream-title,
.dvsubjects-intel p {
	margin: 10px 0 0;
	color: var(--dvsubjects-white);
	font: 500 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dvsubjects-stream-title:empty {
	display: none;
}

.dvsubjects-live-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
}

.dvsubjects-live-meta div {
	min-width: 0;
}

.dvsubjects-live-meta dt {
	color: var(--dvsubjects-muted);
	font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: uppercase;
}

.dvsubjects-live-meta dd {
	margin: 3px 0 0;
	color: var(--dvsubjects-white);
	font: 700 14px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.dvsubjects-intel {
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dvsubjects-intel span {
	color: var(--dvsubjects-red);
	text-transform: uppercase;
}

.dvsubjects-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.dvsubjects-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 10px;
	color: var(--dvsubjects-white);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 29, 45, 0.5);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.dvsubjects-action:hover,
.dvsubjects-action:focus {
	color: #140303;
	background: var(--dvsubjects-red);
	transform: translateY(-1px);
	outline: none;
}

.dvsubjects-action--twitch {
	background: rgba(255, 29, 45, 0.14);
}

.dvsubjects-footer {
	position: relative;
	z-index: 4;
	margin: 22px 0 0;
	color: var(--dvsubjects-muted);
	font-size: clamp(18px, 2vw, 24px);
}

@keyframes dvsubjectsPulse {
	0%, 100% { box-shadow: 0 0 0 1px rgba(255, 29, 45, 0.22), 0 0 24px rgba(255, 29, 45, 0.18); }
	50% { box-shadow: 0 0 0 1px rgba(255, 29, 45, 0.44), 0 0 44px rgba(255, 29, 45, 0.34); }
}

@keyframes dvsubjectsGlitch {
	0%, 100% { transform: translate(0, 0); }
	35% { transform: translate(2px, -1px); }
	70% { transform: translate(-1px, 1px); }
}

.dvsubjects-card--live {
	animation: dvsubjectsPulse 2.8s ease-in-out infinite;
}

.dvsubjects-card:hover .dvsubjects-name {
	animation: dvsubjectsGlitch 260ms steps(2, end);
}

@media (max-width: 680px) {
	.dvsubjects-wrap {
		padding: 20px 14px;
	}

	.dvsubjects-grid {
		grid-template-columns: 1fr;
	}

	.dvsubjects-card {
		padding: 14px;
	}

	.dvsubjects-card-head {
		grid-template-columns: 68px minmax(0, 1fr);
	}

	.dvsubjects-avatar {
		width: 68px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvsubjects-card,
	.dvsubjects-action {
		transition: none;
	}

	.dvsubjects-card--live,
	.dvsubjects-card:hover .dvsubjects-name {
		animation: none;
	}

	.dvsubjects-card:hover,
	.dvsubjects-action:hover,
	.dvsubjects-action:focus {
		transform: none;
	}
}