/* PvP Arena — color modes, responsive polish, a11y (Section 19) */

:root {
	--pvp-space: 1rem;
	--pvp-tap: 44px;
	--pvp-safe-top: env(safe-area-inset-top, 0px);
	--pvp-safe-bottom: env(safe-area-inset-bottom, 0px);
	--pvp-focus: 2px solid var(--pvp-accent);
}

html {
	overflow-x: hidden;
}

img,
video,
iframe,
svg {
	max-width: 100%;
}

iframe,
video {
	height: auto;
}

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

:focus:not(:focus-visible) {
	outline: none;
}

/* Light mode — full surface system, not only background */
html[data-pvp-theme="light"] {
	--pvp-bg: #f3f5fa;
	--pvp-bg-elevated: #ffffff;
	--pvp-surface: #ffffff;
	--pvp-surface-2: #eef1f7;
	--pvp-border: rgba(20, 28, 45, 0.1);
	--pvp-border-strong: rgba(20, 28, 45, 0.18);
	--pvp-text: #172033;
	--pvp-muted: #4a5568;
	--pvp-accent: #0f766e;
	--pvp-gold: #92640f;
	--pvp-danger: #b91c1c;
	--pvp-primary-soft: rgba(124, 92, 255, 0.14);
	--pvp-shadow: 0 14px 36px rgba(24, 32, 54, 0.1);
	--pvp-status-active: #34d399;
	--pvp-status-upcoming: #fbbf24;
	--pvp-status-new: #60a5fa;
	--pvp-status-closed: #f87171;
}

html[data-pvp-theme="light"] body.pvp-theme {
	background:
		radial-gradient(900px 380px at 8% -8%, rgba(124, 92, 255, 0.08), transparent 55%),
		var(--pvp-bg);
	color: var(--pvp-text);
	--pvp-accent: #0f766e;
	--pvp-gold: #92640f;
	--pvp-danger: #b91c1c;
}

html[data-pvp-theme="light"] .pvp-header,
html[data-pvp-theme="light"] .pvp-header.is-scrolled {
	background: rgba(255, 255, 255, 0.9);
	border-bottom-color: var(--pvp-border);
	box-shadow: 0 8px 24px rgba(20, 28, 45, 0.06);
}

html[data-pvp-theme="light"] .pvp-search-panel,
html[data-pvp-theme="light"] .pvp-nav__sheet,
html[data-pvp-theme="light"] .pvp-sticky-bar,
html[data-pvp-theme="light"] .pvp-toast,
html[data-pvp-theme="light"] .pvp-compare-bar,
html[data-pvp-theme="light"] .pvp-notes-drop,
html[data-pvp-theme="light"] .pvp-gate-modal__box {
	background: var(--pvp-surface);
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-logo__text {
	background: none;
	-webkit-text-fill-color: unset;
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-btn--ghost,
html[data-pvp-theme="light"] .pvp-icon-btn {
	background: var(--pvp-surface-2);
}

html[data-pvp-theme="light"] .pvp-server-hero__actions .pvp-fav,
html[data-pvp-theme="light"] .pvp-server-hero__actions .pvp-follow {
	background: #ffffff;
	border-color: var(--pvp-border-strong);
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-prose--article code,
html[data-pvp-theme="light"] .pvp-prose--article pre {
	background: #eef1f7;
}

html[data-pvp-theme="light"] input::placeholder,
html[data-pvp-theme="light"] textarea::placeholder {
	color: #7a8498;
}

html[data-pvp-theme="light"] .pvp-muted {
	color: var(--pvp-muted);
}

/* Dark cinematic bands keep light type so titles stay readable */
html[data-pvp-theme="light"] .pvp-hero,
html[data-pvp-theme="light"] .pvp-game-hero,
html[data-pvp-theme="light"] .pvp-server-hero,
html[data-pvp-theme="light"] .pvp-cta {
	color: #f3f5fb;
}

html[data-pvp-theme="light"] .pvp-hero .pvp-kicker,
html[data-pvp-theme="light"] .pvp-game-hero .pvp-kicker,
html[data-pvp-theme="light"] .pvp-server-hero .pvp-kicker,
html[data-pvp-theme="light"] .pvp-cta .pvp-kicker {
	color: #5eead4;
}

html[data-pvp-theme="light"] .pvp-hero__subtitle,
html[data-pvp-theme="light"] .pvp-cta__text,
html[data-pvp-theme="light"] .pvp-hero .pvp-muted,
html[data-pvp-theme="light"] .pvp-game-hero .pvp-muted,
html[data-pvp-theme="light"] .pvp-server-hero .pvp-muted,
html[data-pvp-theme="light"] .pvp-game-hero__stats span,
html[data-pvp-theme="light"] .pvp-hero .pvp-breadcrumb,
html[data-pvp-theme="light"] .pvp-game-hero .pvp-breadcrumb,
html[data-pvp-theme="light"] .pvp-server-hero .pvp-breadcrumb {
	color: #c5cde0;
}

html[data-pvp-theme="light"] .pvp-hero .pvp-breadcrumb a,
html[data-pvp-theme="light"] .pvp-game-hero .pvp-breadcrumb a,
html[data-pvp-theme="light"] .pvp-server-hero .pvp-breadcrumb a,
html[data-pvp-theme="light"] .pvp-hero .pvp-text-link,
html[data-pvp-theme="light"] .pvp-game-hero .pvp-text-link,
html[data-pvp-theme="light"] .pvp-server-hero .pvp-text-link {
	color: #eef1f8;
}

html[data-pvp-theme="light"] .pvp-search--hero {
	background: rgba(12, 14, 20, 0.88);
	border-color: rgba(255, 255, 255, 0.14);
	color: #f3f5fb;
}

html[data-pvp-theme="light"] .pvp-search--hero .pvp-search__input,
html[data-pvp-theme="light"] .pvp-search--hero .pvp-search__icon {
	color: #f3f5fb;
}

html[data-pvp-theme="light"] .pvp-search--hero .pvp-search__input::placeholder {
	color: #9aa3b8;
}

html[data-pvp-theme="light"] .pvp-search--hero .pvp-btn--ghost {
	background: rgba(255, 255, 255, 0.1);
	color: #f3f5fb;
	border-color: rgba(255, 255, 255, 0.2);
}

html[data-pvp-theme="light"] .pvp-footer {
	background: #ffffff;
	border-top-color: var(--pvp-border);
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-footer__title {
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-footer__about,
html[data-pvp-theme="light"] .pvp-footer-links a,
html[data-pvp-theme="light"] .pvp-footer__bar,
html[data-pvp-theme="light"] .pvp-footer__social-hint {
	color: var(--pvp-muted);
}

html[data-pvp-theme="light"] .pvp-footer-links a:hover {
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-social__link {
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

html[data-pvp-theme="light"] .pvp-text-link:hover,
html[data-pvp-theme="light"] .pvp-card__title a:hover {
	color: #4c3dc9;
}

html[data-pvp-theme="light"] .pvp-card__flag--sponsored {
	color: #4c3dc9;
}

html[data-pvp-theme="light"] .pvp-card--server {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--pvp-card-accent, var(--pvp-primary)) 8%, #fff) 0%, #fff 40%),
		#fff;
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--pvp-card-accent, transparent) 10%, transparent) inset,
		0 12px 28px rgba(15, 23, 42, 0.06);
}

html[data-pvp-theme="light"] .pvp-card--server:hover {
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--pvp-card-accent, transparent) 16%, transparent) inset,
		0 18px 40px rgba(15, 23, 42, 0.1),
		0 0 0 1px color-mix(in srgb, var(--pvp-card-accent, var(--pvp-primary)) 18%, transparent);
}

html[data-pvp-theme="light"] .pvp-card__visual {
	background: #e8ecf4;
}

html[data-pvp-theme="light"] .pvp-card__visual-fade {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.96) 100%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, transparent 42%);
}

html[data-pvp-theme="light"] .pvp-card__flag,
html[data-pvp-theme="light"] .pvp-card--server .pvp-status,
html[data-pvp-theme="light"] .pvp-card--server .pvp-fav--card,
html[data-pvp-theme="light"] .pvp-card--server .pvp-follow--card {
	background: rgba(255, 255, 255, 0.82);
	border-color: rgba(15, 23, 42, 0.08);
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

html[data-pvp-theme="light"] .pvp-card__fact,
html[data-pvp-theme="light"] .pvp-card__facts > div,
html[data-pvp-theme="light"] .pvp-card__metric,
html[data-pvp-theme="light"] .pvp-card__metrics li {
	background: rgba(15, 23, 42, 0.03);
	border-color: rgba(15, 23, 42, 0.06);
}

html[data-pvp-theme="light"] .pvp-card--server .pvp-card__logo {
	box-shadow:
		0 0 0 3px #fff,
		0 10px 22px rgba(15, 23, 42, 0.12);
}

html[data-pvp-theme="light"] .pvp-chip-option input:checked + span,
html[data-pvp-theme="light"] .pvp-settings-tabs__link.is-active,
html[data-pvp-theme="light"] .pvp-dash__link:hover,
html[data-pvp-theme="light"] .pvp-dash__link.is-active {
	color: #312e81;
}

html[data-pvp-theme="light"] .pvp-btn--danger,
html[data-pvp-theme="light"] .pvp-dash__link--out,
html[data-pvp-theme="light"] .pvp-dash-reason {
	color: #b91c1c;
}

html[data-pvp-theme="light"] .pvp-btn--danger {
	background: #fee2e2;
	border-color: #fecaca;
}

html[data-pvp-theme="light"] .pvp-add-alert--ok {
	color: #166534;
	background: #dcfce7;
	border-color: #86efac;
}

html[data-pvp-theme="light"] .pvp-trust {
	color: #047857;
}

html[data-pvp-theme="light"] .pvp-status-badge--waiting {
	color: #a16207;
}

html[data-pvp-theme="light"] .pvp-status-badge--paid {
	color: #047857;
}

html[data-pvp-theme="light"] .pvp-dash__top {
	background: rgba(255, 255, 255, 0.94);
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-stars label,
html[data-pvp-theme="light"] .pvp-stars:hover label {
	color: rgba(23, 32, 51, 0.28);
}

html[data-pvp-theme="light"] .pvp-stars input:checked + label,
html[data-pvp-theme="light"] .pvp-stars input:checked ~ label,
html[data-pvp-theme="light"] .pvp-stars label:hover,
html[data-pvp-theme="light"] .pvp-stars label:hover ~ label,
html[data-pvp-theme="light"] .pvp-stars:hover label:hover,
html[data-pvp-theme="light"] .pvp-stars:hover label:hover ~ label {
	color: var(--pvp-gold);
}

html[data-pvp-theme="light"] .pvp-server-report textarea,
html[data-pvp-theme="light"] .pvp-review__report textarea {
	background: #ffffff;
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-related-entities__list a {
	color: var(--pvp-text);
	border-bottom-color: var(--pvp-border);
}

html[data-pvp-theme="light"] .pvp-empty {
	background: var(--pvp-surface-2);
	color: var(--pvp-text);
}

html[data-pvp-theme="light"] .pvp-nav__list a:hover,
html[data-pvp-theme="light"] .pvp-nav__list .current-menu-item > a {
	background: var(--pvp-surface-2);
	color: var(--pvp-text);
}

/* Header + drawer */
.pvp-header {
	padding-top: var(--pvp-safe-top);
	height: calc(var(--pvp-header-h) + var(--pvp-safe-top));
	min-height: calc(var(--pvp-header-h) + var(--pvp-safe-top));
	box-sizing: border-box;
}

.pvp-header__inner {
	height: var(--pvp-header-h);
	min-height: var(--pvp-header-h);
}

.pvp-header__actions {
	gap: 0.35rem;
}

.pvp-icon-btn,
.pvp-btn,
.pvp-tabs__btn,
.pvp-chip,
.pvp-chip-option,
.pvp-pagination__link {
	min-height: var(--pvp-tap);
}

.pvp-icon-btn {
	width: var(--pvp-tap);
	height: var(--pvp-tap);
}

.pvp-nav-backdrop {
	display: none;
}

.pvp-nav__head,
.pvp-nav__extras {
	display: none;
}

.pvp-theme-toggle .pvp-icon--sun,
.pvp-theme-toggle .pvp-icon--moon {
	display: inline-flex;
}

.pvp-theme-toggle[aria-pressed="true"] .pvp-icon--sun,
.pvp-theme-toggle[aria-pressed="false"] .pvp-icon--moon {
	display: none;
}

body.pvp-nav-open {
	overflow: hidden;
	touch-action: none;
}

body.pvp-nav-open .pvp-nav-backdrop {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, 0.55);
}

body.pvp-nav-open .pvp-nav {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 70;
	width: min(22rem, 92vw);
	padding: calc(0.75rem + var(--pvp-safe-top)) 0 calc(1rem + var(--pvp-safe-bottom));
	background: transparent;
	border: 0;
	overflow: auto;
}

body.pvp-nav-open .pvp-nav__sheet {
	min-height: 100%;
	padding: 0.85rem 1rem 1.25rem;
	background: var(--pvp-bg-elevated);
	border-left: 1px solid var(--pvp-border);
	box-shadow: var(--pvp-shadow);
}

body.pvp-nav-open .pvp-nav__head,
body.pvp-nav-open .pvp-nav__extras {
	display: flex;
}

.pvp-nav__head {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-weight: 800;
}

.pvp-nav__extras {
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--pvp-border);
}

.pvp-nav__extras .pvp-btn {
	width: 100%;
}

@media (max-width: 1023px) {
	.pvp-header__actions > .pvp-header__account:not(.pvp-header__account--in),
	.pvp-header__user-menu {
		display: none;
	}

	.pvp-hero {
		padding: 1.35rem 0 1.6rem;
	}

	.pvp-hero__title {
		font-size: clamp(1.55rem, 8vw, 2.15rem);
	}

	.pvp-hero__image,
	.pvp-hero__panel {
		height: 180px;
		min-height: 180px;
	}

	.pvp-hero__visual {
		min-height: 0;
	}

	.pvp-card__title,
	.pvp-page__title,
	.pvp-server-hero h1,
	.pvp-dash__hello strong {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.pvp-card--server .pvp-card__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		font-size: 0.82rem;
	}

	.pvp-card--server .pvp-card__fact:last-child {
		grid-column: auto;
	}

	.pvp-card__facts dt {
		color: var(--pvp-muted);
	}

	.pvp-card--server .pvp-card__metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pvp-card--server .pvp-card__metric {
		min-height: 3.35rem;
		padding: 0.45rem 0.4rem;
	}

	.pvp-card--server .pvp-card__metric-body strong {
		font-size: 0.84rem;
	}

	.pvp-card__tools {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.35rem;
	}

	.pvp-servers-filter-btn {
		display: inline-flex !important;
	}

	.pvp-filter-drawer__head {
		display: flex !important;
	}

	.pvp-filter-drawer__backdrop {
		display: block;
	}

	.pvp-filter-drawer,
	.pvp-filter-drawer[hidden] {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: block;
		visibility: hidden;
		pointer-events: none;
	}

	.pvp-filter-drawer.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	.pvp-filter-drawer__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: min(88vh, 100% - var(--pvp-safe-top));
		overflow: auto;
		padding: 1.1rem 1.15rem calc(1.2rem + var(--pvp-safe-bottom));
		background: var(--pvp-surface);
		border-top: 1px solid var(--pvp-border);
		border-radius: 22px 22px 0 0;
	}

	.pvp-servers-layout {
		grid-template-columns: 1fr !important;
	}

	.pvp-toc__panel {
		display: none;
	}

	.pvp-toc.is-open .pvp-toc__panel {
		display: block;
	}

	.pvp-dash-table-wrap,
	.pvp-compare-table-wrap,
	.pvp-prose--article {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.pvp-compare-table {
		min-width: 640px;
	}

	input,
	select,
	textarea {
		font-size: 16px;
	}

	.pvp-toast {
		left: 0.75rem;
		right: 0.75rem;
		bottom: calc(1rem + var(--pvp-safe-bottom));
		max-width: none;
	}

	body.single-pvp_server .pvp-toast,
	body.pvp-compare-on .pvp-toast {
		bottom: calc(5.6rem + var(--pvp-safe-bottom));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.pvp-grid--servers,
	.pvp-grid--upcoming,
	.pvp-grid--articles,
	.pvp-grid--games,
	.pvp-grid--games-cover {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pvp-hero__grid {
		grid-template-columns: 1fr 0.9fr;
	}
}

@media (min-width: 1024px) {
	.pvp-nav-backdrop,
	.pvp-nav__head,
	.pvp-nav__extras {
		display: none !important;
	}

	body.pvp-nav-open {
		overflow: visible;
		touch-action: auto;
	}

	body.pvp-nav-open .pvp-nav {
		position: static;
		width: auto;
		padding: 0;
		overflow: visible;
		background: transparent;
	}

	body.pvp-nav-open .pvp-nav__sheet {
		min-height: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.pvp-filter-apply {
		display: none;
	}

	.pvp-grid--servers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pvp-servers-layout .pvp-grid--servers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	:root {
		--pvp-max: 1280px;
	}

	.pvp-grid--servers {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pvp-servers-layout .pvp-grid--servers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1920px) {
	:root {
		--pvp-max: 1360px;
	}
}

@media (max-width: 359px) {
	.pvp-container {
		width: min(100% - 1.1rem, var(--pvp-max));
	}

	.pvp-header__actions {
		gap: 0.2rem;
	}

	.pvp-btn--lg {
		width: 100%;
	}

	.pvp-card--server .pvp-card__metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.35rem;
	}

	.pvp-card--server .pvp-card__metric-body {
		flex-direction: column;
		align-items: stretch;
		gap: 0.12rem;
	}

	.pvp-card--server .pvp-card__visual {
		height: 92px;
	}
}

/* Forms / modals */
.pvp-add-form input,
.pvp-add-form select,
.pvp-add-form textarea,
.pvp-dash-form input,
.pvp-dash-form select,
.pvp-dash-form textarea,
.pvp-search__input {
	max-width: 100%;
}

.pvp-dash-modal,
.pvp-gate-modal,
.pvp-lightbox {
	padding: var(--pvp-safe-top) 0.75rem var(--pvp-safe-bottom);
}

.pvp-dash-modal__box,
.pvp-gate-modal__box {
	max-height: min(90vh, 40rem);
	overflow: auto;
}

.pvp-filter-apply {
	position: sticky;
	bottom: 0;
	width: 100%;
	margin-top: 1rem;
	min-height: 48px;
}

.pvp-lightbox__img {
	max-width: min(96vw, 1100px);
	max-height: 86vh;
	touch-action: pan-x pan-y pinch-zoom;
}

/* Compare: isolate horizontal scroll */
.pvp-compare-table-wrap {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.pvp-compare-table th:first-child,
.pvp-compare-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--pvp-surface);
}

/* Account drawer close */
.pvp-dash__sidebar-close {
	display: none;
}

@media (max-width: 899px) {
	.pvp-dash__sidebar-close {
		display: inline-flex;
		position: absolute;
		top: 0.7rem;
		right: 0.7rem;
	}

	.pvp-dash__sidebar {
		position: relative;
		padding-top: 3rem;
	}

	.pvp-settings-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}
}

.pvp-tabs {
	scrollbar-width: none;
}

.pvp-tabs::-webkit-scrollbar {
	display: none;
}

.pvp-grid,
.pvp-header__inner,
.pvp-card__heading,
.pvp-dash__hello,
.pvp-page {
	min-width: 0;
}

/* Auth / payment pages */
.pvp-auth,
.pvp-pay,
.pvp-checkout,
.pvp-packages {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}