/* ============================================================
   Twitch News Cybersport — dark-first stylesheet
   ============================================================ */

/* ----- Page shell ----- */
.tncs-page {
	background: #0f0f14;
	color: #f4f2ff;
	padding: 32px 0;
}

.tncs-container {
	margin: 0 auto;
	max-width: 1180px;
	padding: 0 18px;
}

/* ----- Header ----- */
.tncs-header {
	margin-bottom: 18px;
}

.tncs-kicker {
	color: #b9b4c9;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.tncs-title {
	color: #f4f2ff;
	font-size: 34px;
	line-height: 1.15;
	margin: 0;
}

/* ----- Tabs & filters ----- */
.tncs-tabs,
.tncs-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tncs-tabs {
	margin: 0 0 18px;
}

.tncs-tab,
.tncs-filter {
	background: #181820;
	border: 1px solid #2b2936;
	border-radius: 8px;
	color: #ded9ef;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 9px 14px;
	text-decoration: none;
}

.tncs-tab-active,
.tncs-tab:hover,
.tncs-filter-active,
.tncs-filter:hover {
	background: #7c3aed;
	border-color: #8b5cf6;
	color: #ffffff;
}

/* ----- Toolbar ----- */
.tncs-toolbar {
	align-items: center;
	background: #181820;
	border: 1px solid #2b2936;
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin: 0 0 16px;
	padding: 12px;
}

.tncs-calendar,
.tncs-search {
	align-items: center;
	color: #b9b4c9;
	display: flex;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
}

.tncs-calendar input,
.tncs-search input {
	background: #101018;
	border: 1px solid #383244;
	border-radius: 8px;
	color: #f4f2ff;
	font: inherit;
	min-height: 38px;
	padding: 7px 10px;
}

/* ----- Grid layout ----- */
.tncs-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) 310px;
}

.tncs-list,
.tncs-tournament-groups {
	display: grid;
	gap: 14px;
}

/* ----- Cards (shared) ----- */
.tncs-card {
	background: #181820;
	border: 1px solid #2b2936;
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	padding: 18px;
	position: relative;
	transition: border-color 0.15s;
}

.tncs-card:hover {
	border-color: #7c3aed;
	cursor: pointer;
}

/* Stretch-link: invisible <a> that covers the entire card */
.tncs-stretch-link {
	bottom: 0;
	left: 0;
	outline-offset: 2px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

/* Anything inside the card that should stay clickable above the stretch link */
.tncs-card-tournament-link,
.tncs-card-footer time,
.tncs-card-meta,
.tncs-card-stats,
.tncs-compact-card {
	position: relative;
	z-index: 1;
}

.tncs-single,
.tncs-sidebar-block,
.tncs-notice,
.tncs-note {
	background: #181820;
	border: 1px solid #2b2936;
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.tncs-notice,
.tncs-note {
	color: #b9b4c9;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.tncs-notice-error {
	background: rgba(127, 29, 29, 0.28);
	border-color: rgba(248, 113, 113, 0.45);
	color: #fecaca;
}

/* ----- Card meta / footer / stats ----- */
.tncs-card-meta,
.tncs-card-footer,
.tncs-card-stats {
	color: #b9b4c9;
	display: flex;
	font-size: 13px;
	gap: 10px;
	justify-content: space-between;
}

.tncs-card-meta,
.tncs-card-stats {
	margin-bottom: 10px;
}

.tncs-card-footer {
	align-items: center;
	border-top: 1px solid #2b2936;
	margin-top: 14px;
	padding-top: 12px;
}

.tncs-card-title {
	color: #f4f2ff;
	font-size: 20px;
	line-height: 1.25;
	margin: 0;
}

.tncs-card-text,
.tncs-card-time {
	color: #b9b4c9;
	margin: 0;
}

/* Tournament chip in match card footer */
.tncs-card-tournament-link {
	color: #b9b4c9;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.tncs-card-tournament-link:hover {
	color: #a78bfa;
	text-decoration: underline;
}

/* ----- Empty state ----- */
.tncs-empty {
	background: #181820;
	border: 1px dashed #3a3448;
	border-radius: 8px;
	color: #b9b4c9;
	margin: 0;
	padding: 16px;
}

/* ----- Match card ----- */
.tncs-match-body {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
}

.tncs-match-team,
.tncs-team-card-head,
.tncs-team-heading,
.tncs-tournament-head {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
}

.tncs-match-team span:last-child,
.tncs-team-card-head h2,
.tncs-tournament-head h2 {
	overflow-wrap: anywhere;
}

.tncs-match-team-right {
	justify-content: flex-end;
	text-align: right;
}

.tncs-match-center {
	align-items: center;
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
}

.tncs-match-score {
	background: #7c3aed;
	border-radius: 8px;
	color: #ffffff;
	font-size: 20px;
	min-width: 72px;
	padding: 8px 10px;
}

/* ----- Status badges ----- */
.tncs-status {
	background: rgba(124, 58, 237, 0.18);
	border-radius: 999px;
	color: #c4b5fd;
	font-size: 12px;
	font-weight: 800;
	padding: 4px 8px;
	text-transform: uppercase;
}

.tncs-status-finished {
	background: rgba(16, 185, 129, 0.14);
	color: #86efac;
}

.tncs-status-live,
.tncs-status-running,
.tncs-live-badge {
	background: rgba(239, 68, 68, 0.18);
	color: #fca5a5;
}

.tncs-live-badge {
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	padding: 4px 8px;
}

.tncs-live-updated {
	color: #b9b4c9;
	font-size: 12px;
}

/* ----- Logos / avatars ----- */
.tncs-logo-placeholder,
.tncs-team-logo {
	border-radius: 8px;
	height: 42px;
	min-width: 42px;
	width: 42px;
}

.tncs-logo-placeholder {
	align-items: center;
	background: #22202c;
	border: 1px solid #383244;
	color: #c4b5fd;
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
}

.tncs-team-logo {
	background: #22202c;
	object-fit: contain;
}

/* ----- Single entity pages ----- */
.tncs-single {
	padding: 22px;
}

.tncs-single h2,
.tncs-versus-team h2 {
	color: #f4f2ff;
}

.tncs-entity-header {
	display: grid;
	gap: 10px;
	margin-bottom: 22px;
}

.tncs-entity-header-row {
	align-items: center;
	display: flex;
	gap: 16px;
}

.tncs-entity-header h2 {
	font-size: 28px;
	line-height: 1.2;
	margin: 0;
}

.tncs-entity-kicker {
	color: #a78bfa;
	font-weight: 800;
	margin: 0;
}

.tncs-entity-meta {
	align-items: center;
	color: #b9b4c9;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.tncs-entity-logo {
	background: #22202c;
	border-color: #383244;
	border-radius: 12px;
	color: #c4b5fd;
	height: 88px;
	min-width: 88px;
	object-fit: contain;
	width: 88px;
}

.tncs-versus-large .tncs-entity-logo {
	height: 112px;
	min-width: 112px;
	width: 112px;
}

.tncs-related-link {
	margin: -4px 0 22px;
	text-align: center;
}

.tncs-related-link a,
.tncs-stream-fallback a {
	color: #a78bfa;
	font-weight: 800;
	text-decoration: none;
}

.tncs-related-link a:hover,
.tncs-stream-fallback a:hover {
	color: #c4b5fd;
	text-decoration: underline;
}

.tncs-section {
	display: grid;
	gap: 14px;
	margin-top: 24px;
}

.tncs-section-title {
	color: #f4f2ff;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
}

/* ----- Versus block (single match) ----- */
.tncs-versus {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr auto 1fr;
	margin-bottom: 22px;
	text-align: center;
}

.tncs-versus-team {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tncs-versus-team h2,
.tncs-single h2 {
	font-size: 24px;
	margin: 0;
}

.tncs-score {
	background: #7c3aed;
	border-radius: 8px;
	color: #ffffff;
	font-size: 24px;
	font-weight: 800;
	min-width: 82px;
	padding: 12px;
}

/* ----- Rosters ----- */
.tncs-rosters {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tncs-roster {
	background: #181820;
	border: 1px solid #2b2936;
	border-radius: 8px;
	padding: 14px;
}

.tncs-roster h3 {
	color: #f4f2ff;
	font-size: 18px;
	margin: 0 0 12px;
}

.tncs-player-list {
	display: grid;
	gap: 8px;
}

.tncs-player-row {
	align-items: center;
	background: #22202c;
	border: 1px solid #2b2936;
	border-radius: 8px;
	display: grid;
	gap: 10px;
	grid-template-columns: 42px minmax(0, 1fr) auto auto;
	padding: 10px;
}

.tncs-player-avatar {
	border-radius: 8px;
	height: 42px;
	min-width: 42px;
	object-fit: cover;
	width: 42px;
}

.tncs-player-main {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.tncs-player-main strong {
	color: #f4f2ff;
	overflow-wrap: anywhere;
}

.tncs-player-main span,
.tncs-player-country {
	color: #b9b4c9;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.tncs-player-role {
	background: rgba(124, 58, 237, 0.2);
	border-radius: 999px;
	color: #c4b5fd;
	font-size: 13px;
	font-weight: 800;
	padding: 4px 8px;
}

/* ----- Compact grid (tournament teams) ----- */
.tncs-compact-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tncs-compact-card {
	align-items: center;
	background: #22202c;
	border: 1px solid #2b2936;
	border-radius: 8px;
	color: #f4f2ff;
	display: flex;
	font-weight: 800;
	gap: 10px;
	padding: 10px;
	text-decoration: none;
}

.tncs-compact-card:hover {
	border-color: #7c3aed;
	color: #a78bfa;
}

/* ----- Twitch embed ----- */
.tncs-twitch-frame {
	aspect-ratio: 16 / 9;
	background: #0f172a;
	border-radius: 8px;
	overflow: hidden;
}

.tncs-twitch-frame iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.tncs-stream-fallback {
	margin: 0;
}

/* ----- Group titles (tournament archive) ----- */
.tncs-group {
	display: grid;
	gap: 10px;
}

.tncs-group-title {
	color: #f4f2ff;
	font-size: 22px;
	margin: 8px 0 0;
}

/* ----- Sidebar ----- */
.tncs-sidebar {
	align-content: start;
	display: grid;
	gap: 16px;
}

.tncs-sidebar-block {
	padding: 16px;
}

.tncs-sidebar-title {
	color: #f4f2ff;
	font-size: 17px;
	margin: 0 0 10px;
}

.tncs-sidebar-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tncs-sidebar-list li {
	display: grid;
	gap: 3px;
}

.tncs-sidebar-list a {
	color: #f4f2ff;
	text-decoration: none;
}

.tncs-sidebar-list a:hover {
	color: #a78bfa;
}

.tncs-sidebar-list span {
	color: #b9b4c9;
	font-size: 12px;
}

/* ----- Monetization block ----- */
.tncs-button {
	background: #7c3aed;
	border-radius: 8px;
	color: #ffffff;
	display: inline-block;
	font-weight: 700;
	padding: 10px 12px;
	text-decoration: none;
}

.tncs-erid {
	color: #b9b4c9;
	font-size: 12px;
	margin-bottom: 0;
}

.tncs-monetization-disabled {
	background: transparent;
}

/* ----- Meta table ----- */
.tncs-meta {
	display: grid;
	gap: 10px 18px;
	grid-template-columns: 150px minmax(0, 1fr);
	margin: 0;
}

.tncs-meta dt {
	color: #b9b4c9;
	font-weight: 700;
}

.tncs-meta dd {
	margin: 0;
}

/* ----- Per-team score (visible only on mobile) ----- */
.tncs-team-score {
	display: none;
}

/* ----- Responsive — tablet: stack sidebar below content ----- */
@media (max-width: 860px) {
	.tncs-grid,
	.tncs-versus,
	.tncs-meta {
		grid-template-columns: 1fr;
	}

	.tncs-sidebar {
		order: 2;
	}

	.tncs-title {
		font-size: 28px;
	}

	.tncs-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.tncs-calendar,
	.tncs-search,
	.tncs-search input {
		width: 100%;
	}

	.tncs-rosters,
	.tncs-player-row {
		grid-template-columns: 1fr;
	}

	.tncs-player-avatar {
		justify-self: start;
	}

	.tncs-entity-header-row {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ----- Responsive — mobile: compact match cards ----- */
@media (max-width: 560px) {
	.tncs-list {
		gap: 6px;
	}

	.tncs-card {
		border-radius: 6px;
		padding: 10px 12px;
	}

	.tncs-card-meta {
		font-size: 11px;
		margin-bottom: 6px;
	}

	.tncs-match-body {
		align-items: center;
		display: grid;
		gap: 6px;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.tncs-match-team,
	.tncs-match-team-right {
		gap: 5px;
		min-width: 0;
	}

	.tncs-match-team span:not(.tncs-logo-placeholder):not(.tncs-team-score) {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tncs-match-team-right {
		justify-content: flex-end;
		text-align: right;
	}

	.tncs-team-logo,
	.tncs-logo-placeholder {
		font-size: 10px;
		height: 24px;
		min-width: 24px;
		width: 24px;
	}

	.tncs-team-score {
		display: none;
	}

	.tncs-match-center {
		gap: 3px;
		margin: 0;
		min-width: 52px;
	}

	.tncs-match-score {
		background: rgba(124, 58, 237, 0.26);
		border: 1px solid rgba(139, 92, 246, 0.42);
		border-radius: 8px;
		display: inline-block;
		font-size: 12px;
		min-width: 42px;
		padding: 4px 6px;
		text-align: center;
	}

	.tncs-status {
		font-size: 9px;
		max-width: 58px;
		overflow: hidden;
		padding: 2px 5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tncs-live-badge,
	.tncs-live-updated {
		font-size: 9px;
	}

	.tncs-card-footer {
		display: none;
	}

	.tncs-card-time,
	.tncs-card-tournament-link {
		font-size: 11px;
	}

	/* Tabs & filters — wrappable on small screens */
	.tncs-tabs,
	.tncs-filter-group {
		gap: 6px;
	}

	.tncs-tab,
	.tncs-filter {
		font-size: 13px;
		padding: 7px 10px;
	}
}

/* ── Load More ────────────────────────────────────────────── */
.tncs-load-more {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	padding: .7rem 1.5rem;
	background: #1a1a2e;
	color: #c9d1d9;
	border: 1px solid #30363d;
	border-radius: 6px;
	font-size: .95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
	text-align: center;
}
.tncs-load-more:hover:not(:disabled) {
	background: #262640;
	border-color: #58a6ff;
	color: #fff;
}
.tncs-load-more:disabled {
	opacity: .5;
	cursor: default;
}