.cs2-match-preview-dialog {
	width: min(980px, calc(100vw - 32px));
	max-width: none;
	max-height: 92dvh;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cs2-v2-border, #293747);
	border-radius: 6px;
	background: var(--cs2-v2-panel-strong, #131d27);
	color: var(--cs2-v2-text, #f4f7fa);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

.cs2-match-preview-dialog::backdrop {
	background: rgba(2, 7, 11, .82);
	backdrop-filter: blur(5px);
}

.cs2-match-preview-dialog__shell {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	max-height: 92dvh;
	min-height: min(680px, 88dvh);
}

.cs2-match-preview-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 72px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--cs2-v2-border, #293747);
	background: var(--cs2-v2-panel-strong, #131d27);
}

.cs2-match-preview-dialog__header > div {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.cs2-match-preview-dialog__header small,
.cs2-match-preview__lineups > header span {
	color: var(--cs2-v2-accent, #00fca7);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.cs2-match-preview-dialog__header strong {
	overflow: hidden;
	font-size: 18px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs2-match-preview-dialog__body {
	min-height: 0;
	min-width: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.cs2-match-preview-dialog__state {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 10px;
	min-height: 480px;
	padding: 30px;
	text-align: center;
}

.cs2-match-preview-dialog__state small {
	color: var(--cs2-v2-muted, #9eacbc);
}

.cs2-match-preview-dialog__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--cs2-v2-border, #293747);
	border-top-color: var(--cs2-v2-accent, #00fca7);
	border-radius: 50%;
	animation: cs2-match-preview-spin .75s linear infinite;
}

@keyframes cs2-match-preview-spin { to { transform: rotate(360deg); } }

.cs2-match-preview {
	display: grid;
	gap: 18px;
	min-width: 0;
	max-width: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.cs2-match-preview__hero,
.cs2-match-preview__lineups {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--cs2-v2-border, #293747);
	border-radius: 5px;
	background: var(--cs2-v2-panel, #182431);
}

.cs2-match-preview__competition {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 48px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cs2-v2-border, #293747);
}

.cs2-match-preview__competition > span:last-child {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
	color: var(--cs2-v2-muted, #9eacbc);
}

.cs2-match-preview__competition img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.cs2-match-preview__competition strong {
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs2-match-preview__matchup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
	align-items: center;
	gap: 22px;
	padding: 26px;
}

.cs2-match-preview__team {
	display: grid;
	justify-items: center;
	gap: 12px;
	min-width: 0;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.cs2-match-preview__team-logo {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
}

.cs2-match-preview__team-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cs2-match-preview__team strong {
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: 18px;
}

.cs2-match-preview__team:hover strong,
.cs2-match-preview__player:hover strong {
	color: var(--cs2-v2-accent, #00fca7);
}

.cs2-match-preview__result {
	display: grid;
	place-items: center;
	gap: 6px;
	min-height: 124px;
	padding: 16px 12px;
	border: 1px solid var(--cs2-v2-border, #293747);
	border-radius: 5px;
	background: var(--cs2-v2-bg-soft, #0e1720);
	text-align: center;
}

.cs2-match-preview__result strong {
	color: var(--cs2-v2-accent, #00fca7);
	font-size: 30px;
	line-height: 1;
}

.cs2-match-preview__result time {
	font-size: 13px;
	font-weight: 700;
}

.cs2-match-preview__result small {
	color: var(--cs2-v2-muted, #9eacbc);
}

.cs2-match-preview__lineups > header {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 15px;
	border-bottom: 1px solid var(--cs2-v2-border, #293747);
}

.cs2-match-preview__lineup-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: 14px;
}

.cs2-match-preview__lineup {
	min-width: 0;
}

.cs2-match-preview__lineup h3 {
	margin: 0 0 8px;
	font-size: 13px;
}

.cs2-match-preview__lineup > div {
	display: grid;
	gap: 6px;
}

.cs2-match-preview__player {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 6px 9px;
	border: 1px solid var(--cs2-v2-border, #293747);
	border-radius: 4px;
	background: var(--cs2-v2-bg-soft, #0e1720);
	color: inherit;
	text-decoration: none;
}

.cs2-match-preview__player img {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 3px;
	object-fit: cover;
}

.cs2-match-preview__player > span {
	display: grid;
	min-width: 0;
}

.cs2-match-preview__player strong {
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs2-match-preview__player small {
	color: var(--cs2-v2-muted, #9eacbc);
	font-size: 11px;
}

.cs2-match-preview__lineup p {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--cs2-v2-border, #293747);
	color: var(--cs2-v2-muted, #9eacbc);
	font-size: 12px;
	text-align: center;
}

.cs2-match-preview__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	padding-top: 2px;
}

.cs2-match-preview__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 13px;
	border: 1px solid var(--cs2-v2-border, #293747);
	border-radius: 4px;
	background: var(--cs2-v2-panel, #182431);
	color: inherit;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.cs2-match-preview__action:hover {
	border-color: var(--cs2-v2-accent, #00fca7);
	background: var(--cs2-v2-panel-strong, #131d27);
}

.cs2-match-preview__action--twitch {
	border-color: rgba(145, 70, 255, .55);
}

.cs2-match-preview__action svg,
.cs2-match-preview__action img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

html[data-theme="light"] .cs2-match-preview-dialog {
	background: #eef3f5;
	color: #17222d;
}

html[data-theme="light"] .cs2-match-preview-dialog__header {
	background: #eef3f5;
}

html[data-theme="light"] .cs2-match-preview-dialog__header strong {
	color: #17222d;
}

html[data-theme="light"] .cs2-match-preview-dialog__body {
	background: #eef3f5;
}

html[data-theme="light"] .cs2-match-preview__hero,
html[data-theme="light"] .cs2-match-preview__lineups,
html[data-theme="light"] .cs2-match-preview__action {
	background: #fff;
	color: #17222d;
}

html[data-theme="light"] .cs2-match-preview__result,
html[data-theme="light"] .cs2-match-preview__player {
	background: #f3f7f8;
	color: #17222d;
}

html[data-theme="light"] .cs2-match-preview__competition > span:last-child,
html[data-theme="light"] .cs2-match-preview__result small,
html[data-theme="light"] .cs2-match-preview__player small,
html[data-theme="light"] .cs2-match-preview__lineup p {
	color: #5e6d7a;
}

html[data-theme="light"] .cs2-match-preview__action:hover {
	background: #eaf2f1;
}

@media (max-width: 700px) {
	.cs2-match-preview-dialog {
		width: calc(100vw - 12px);
		max-height: 94dvh;
	}

	.cs2-match-preview-dialog__shell {
		min-height: 0;
		max-height: 94dvh;
	}

	.cs2-match-preview-dialog__header {
		min-height: 62px;
		padding: 11px 12px;
	}

	.cs2-match-preview-dialog__header strong { font-size: 15px; }
	.cs2-match-preview { gap: 10px; padding: 8px; }
	.cs2-match-preview__competition { align-items: flex-start; padding: 9px 10px; }
	.cs2-match-preview__competition > span:last-child { max-width: 66%; }
	.cs2-match-preview__matchup { grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); gap: 8px; padding: 17px 8px; }
	.cs2-match-preview__team { gap: 8px; }
	.cs2-match-preview__team-logo { width: 58px; height: 58px; }
	.cs2-match-preview__team strong { font-size: 13px; }
	.cs2-match-preview__result { min-height: 92px; padding: 10px 4px; }
	.cs2-match-preview__result strong { font-size: 20px; }
	.cs2-match-preview__result time { font-size: 10px; }
	.cs2-match-preview__lineup-grid { grid-template-columns: 1fr; gap: 12px; padding: 10px; }
	.cs2-match-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.cs2-match-preview__action { width: 100%; min-width: 0 !important; max-width: 100%; padding-inline: 8px; box-sizing: border-box; }
	.cs2-match-preview__action span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 390px) {
	.cs2-match-preview__actions { grid-template-columns: 1fr; }
}