:root
{
	color-scheme: dark;
	--background: #111214;
	--surface: #1a1b1e;
	--text: #f4f4f2;
	--muted: #b9babd;
	--orange: #f28b13;
	--border: #424448;
	--header-height: 76px;
	font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
	font-synthesis: style;
	font-weight: 400;
}

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

html
{
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 20px);
	scrollbar-color: #5c5d60 var(--background);
	scrollbar-gutter: stable;
}

body
{
	margin: 0;
	background: var(--background);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

body.dialog-open
{
	overflow: hidden;
}

button,
a
{
	-webkit-tap-highlight-color: transparent;
}

button
{
	font: inherit;
	color: inherit;
	cursor: pointer;
}

a
{
	color: inherit;
	text-decoration: none;
}

button,
h1,
h2,
p,
figure
{
	margin: 0;
}

button
{
	border: 0;
	border-radius: 0;
}

img,
svg
{
	display: block;
}

img
{
	max-width: 100%;
}

::selection
{
	background: var(--orange);
	color: #111214;
}

:focus-visible
{
	outline: 2px solid var(--orange);
	outline-offset: 5px;
}

[v-cloak]
{
	display: none;
}

.svg-definitions
{
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.icon
{
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.container
{
	width: min(100% - 96px, 1320px);
	margin-inline: auto;
}

.skip-link
{
	position: fixed;
	top: 12px;
	left: 20px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--orange);
	color: #111214;
	transform: translateY(-160%);
}

.skip-link:focus
{
	transform: translateY(0);
}

.site-header
{
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--header-height);
	background: rgb(13 14 16 / 96%);
	border-bottom: 1px solid #353638;
	transition: box-shadow 200ms ease;
}

.site-header.is-scrolled
{
	box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.header-inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: min(100% - 80px, 1380px);
	height: 100%;
	margin-inline: auto;
}

.brand
{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
}

.brand img
{
	height: auto;
}

.primary-nav
{
	display: flex;
	align-self: stretch;
	align-items: stretch;
	gap: 42px;
	margin-left: auto;
}

.primary-nav > a
{
	position: relative;
	display: flex;
	align-items: center;
	color: #d5d5d6;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: color 180ms ease;
}

.primary-nav > a::after
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--orange);
	content: "";
	transform: scaleX(0);
	transition: transform 200ms ease;
}

.primary-nav > a:hover,
.primary-nav > a.is-active
{
	color: #fff;
}

.primary-nav > a.is-active::after
{
	transform: scaleX(1);
}

.header-actions
{
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: 24px;
}

.header-download
{
	padding: 5px 0 5px 24px;
	border-left: 1px solid #4a4b4e;
	background: transparent;
	font-size: 13px;
	white-space: nowrap;
	color: #c5c5c7;
}

.header-download:hover
{
	color: var(--orange);
}

.login-button
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 6px 13px;
	border: 1px solid #77787b;
	background: transparent;
	font-size: 13px;
	white-space: nowrap;
	transition: border-color 180ms, background 180ms;
}

.login-button .icon
{
	width: 18px;
	height: 18px;
}

.login-button:hover
{
	border-color: var(--text);
	background: rgb(255 255 255 / 6%);
}

.menu-button,
.mobile-download
{
	display: none;
}

.hero
{
	position: relative;
	isolation: isolate;
	min-height: 620px;
	overflow: hidden;
	background: #17191b;
}

.hero-art,
.hero-shade,
.closing-art,
.closing-shade
{
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.hero-art
{
	object-fit: cover;
	object-position: center 44%;
}

.hero-shade
{
	background: linear-gradient(90deg, rgb(8 10 12 / 45%), transparent 68%), linear-gradient(0deg, rgb(17 18 20 / 36%), transparent 22%);
}

.hero-inner
{
	display: flex;
	align-items: center;
	min-height: 620px;
	padding-block: 70px;
}

.hero-content
{
	width: 575px;
	max-width: 49%;
	padding-bottom: 6px;
}

.hero h1
{
	width: min(100%, 535px);
	margin-bottom: 14px;
}

.hero h1 img
{
	width: 100%;
	height: auto;
	filter: drop-shadow(0 3px 12px rgb(0 0 0 / 12%));
}

.hero-description
{
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}

.hero-modes
{
	display: flex;
	align-items: center;
	gap: 14px;
	width: fit-content;
	margin-top: 20px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .08em;
	white-space: nowrap;
}

.hero-modes::before,
.hero-modes::after
{
	width: 36px;
	height: 1px;
	background: var(--orange);
	content: "";
	opacity: .8;
}

.hero-modes i
{
	font-style: normal;
	color: #c8c8c9;
}

.action-group
{
	display: flex;
	align-items: center;
	gap: 22px;
}

.hero-actions
{
	margin-top: 36px;
}

.action-button
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 204px;
	min-height: 54px;
	padding: 13px 22px;
	background: transparent;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	isolation: isolate;
}

.action-button::before
{
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid #fb971e;
	background: linear-gradient(115deg, #f9a01c, #ed7905 80%);
	content: "";
	transform: skewX(-12deg);
	transition: filter 180ms ease, background 180ms ease, border-color 180ms ease;
}

.action-button > span
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.action-button .icon
{
	width: 23px;
	height: 23px;
	stroke-width: 2;
}

.action-button:hover::before
{
	filter: brightness(1.15);
}

.action-button:active
{
	transform: translateY(1px);
}

.action-button-outline::before
{
	border: 1px solid #a5a5a6;
	background: rgb(21 22 24 / 45%);
}

.action-button-outline:hover::before
{
	border-color: #fff;
	background: rgb(255 255 255 / 10%);
}

.hero-note
{
	margin-top: 19px;
	color: #c1c1c3;
	font-size: 13px;
	letter-spacing: .025em;
}

.text-link
{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: fit-content;
	padding: 0 0 4px;
	border-bottom: 1px solid #848587;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	transition: color 160ms ease, border-color 160ms ease;
}

.text-link:hover
{
	color: var(--orange);
	border-color: var(--orange);
}

.text-link .icon
{
	width: 19px;
	height: 19px;
}

.hero-more
{
	margin-top: 27px;
	color: #d3d3d4;
}

.section
{
	padding-block: 56px 64px;
	background: radial-gradient(ellipse at 50% 15%, #1b1c1e 0%, #141517 65%, #121315 100%);
}

.section-heading
{
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 34px;
}

.section-heading h2
{
	display: flex;
	align-items: center;
	gap: 17px;
	font-size: 31px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .025em;
	white-space: nowrap;
}

.section-heading h2::before
{
	width: 6px;
	height: 32px;
	margin-inline: 5px;
	background: var(--orange);
	content: "";
	transform: skewX(-28deg);
}

.section-heading > span
{
	flex: 1;
	height: 1px;
	background: #4a4b4d;
}

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

.image-card
{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid #626366;
	background: #202124;
	text-align: left;
	isolation: isolate;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.mode-card
{
	aspect-ratio: 1.29;
}

.image-card > img
{
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 550ms cubic-bezier(.2, .65, .25, 1), filter 300ms ease;
}

.card-shade
{
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 28%, rgb(9 11 13 / 28%) 48%, rgb(12 14 16 / 94%) 100%);
}

.card-copy
{
	position: absolute;
	right: 24px;
	bottom: 26px;
	left: 25px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.card-copy strong
{
	font-size: 29px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .03em;
	text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
}

.accent-line
{
	display: block;
	width: 36px;
	height: 3px;
	margin-block: 12px 13px;
	background: var(--orange);
	transition: width 250ms ease;
}

.card-description
{
	color: #d0d0d1;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: .025em;
}

.card-arrow
{
	position: absolute;
	right: 24px;
	bottom: 74px;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 200ms ease, transform 200ms ease;
}

.image-card:hover,
.image-card:focus-visible
{
	border-color: var(--orange);
	box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
}

.image-card:hover > img,
.image-card:focus-visible > img
{
	transform: scale(1.045);
	filter: brightness(1.07);
}

.image-card:hover .accent-line
{
	width: 52px;
}

.image-card:hover .card-arrow,
.image-card:focus-visible .card-arrow
{
	opacity: 1;
	transform: translateX(0);
}

.browser-section
{
	padding-block: 74px;
	border-block: 1px solid #2e3032;
	background: radial-gradient(ellipse at 6% 0%, rgb(126 81 40 / 16%), transparent 48%), radial-gradient(ellipse at 84% 100%, rgb(154 111 66 / 11%), transparent 44%), #1d1e20;
}

.browser-layout
{
	display: grid;
	grid-template-columns: .87fr 1.3fr;
	align-items: center;
	gap: 50px;
}

.browser-copy h2
{
	font-size: clamp(26px, 2.65vw, 39px);
	font-weight: 800;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: -.03em;
}

.tablet-break
{
	display: none;
}

.technology-badge
{
	display: inline-block;
	margin-top: 15px;
	padding: 2px 15px 3px;
	background: linear-gradient(110deg, #e28b27, #bc610e);
	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	font-style: italic;
	clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

.browser-copy > p
{
	margin-top: 23px;
	color: #d0d0d1;
	font-size: 17px;
	line-height: 1.8;
}

.browser-copy .action-group
{
	gap: 25px;
	margin-top: 36px;
}

.browser-copy .action-button
{
	min-width: 195px;
}

.game-window
{
	overflow: hidden;
	border: 1px solid #69696b;
	border-radius: 11px;
	background: #333436;
	box-shadow: 0 20px 60px rgb(0 0 0 / 27%), 0 0 0 1px rgb(255 255 255 / 4%);
}

.window-bar
{
	display: flex;
	align-items: center;
	gap: 16px;
	height: 38px;
	padding-inline: 15px;
	background: linear-gradient(#383a3d, #2c2e31);
	color: #d5d5d6;
}

.window-dots
{
	display: flex;
	gap: 7px;
}

.window-dots i
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ed6d58;
}

.window-dots i:nth-child(2)
{
	background: #e9bb48;
}

.window-dots i:nth-child(3)
{
	background: #8eae68;
}

.window-tab
{
	display: flex;
	align-items: center;
	gap: 7px;
	align-self: flex-end;
	min-width: 145px;
	height: 30px;
	padding-inline: 13px;
	border-radius: 7px 7px 0 0;
	background: #434548;
	font: 10px Arial, sans-serif;
}

.mini-slash
{
	color: var(--orange);
	font-size: 19px;
	font-weight: 800;
}

.window-tab .icon
{
	width: 11px;
	height: 11px;
	margin-left: auto;
	color: #a1a2a4;
}

.window-plus
{
	font-size: 18px;
	font-weight: 300;
}

.window-expand
{
	width: 13px;
	height: 13px;
	margin-left: auto;
	color: #b3b4b7;
}

.game-screen
{
	position: relative;
	aspect-ratio: 1.6;
	overflow: hidden;
}

.game-screen > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.game-hud
{
	position: absolute;
	inset: 0;
	font-family: Arial, sans-serif;
	pointer-events: none;
	text-shadow: 0 1px 4px #000;
}

.game-radar
{
	position: absolute;
	top: 15px;
	left: 15px;
	width: 74px;
	height: 74px;
	overflow: hidden;
	border: 2px solid rgb(255 255 255 / 50%);
	border-radius: 50%;
	background: rgb(17 21 26 / 78%);
	box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}

.radar-lane
{
	position: absolute;
	border: 8px solid #66696b;
	transform: rotate(-20deg);
}

.lane-one
{
	top: 5px;
	left: 18px;
	width: 40px;
	height: 43px;
}

.lane-two
{
	top: 42px;
	left: -4px;
	width: 40px;
	height: 30px;
}

.radar-player
{
	position: absolute;
	top: 40px;
	left: 34px;
	width: 5px;
	height: 5px;
	background: #edd575;
	box-shadow: 12px -22px 0 -1px #b6d1ea;
}

.game-crosshair
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	background: #c1e488;
	box-shadow: -5px 0 0 -1px #c1e488, 5px 0 0 -1px #c1e488, 0 5px 0 -1px #c1e488, 0 -5px 0 -1px #c1e488;
}

.game-health
{
	position: absolute;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	font-weight: 600;
}

.game-health b
{
	font-size: 26px;
	line-height: 18px;
}

.game-health .icon
{
	width: 17px;
	height: 17px;
	margin-left: 12px;
	fill: rgb(255 255 255 / 75%);
	stroke: none;
}

.game-ammo
{
	position: absolute;
	right: 17px;
	bottom: 16px;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
}

.game-ammo b
{
	font-size: 24px;
}

.game-preview-play
{
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 60px;
	height: 60px;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 50%;
	background: rgb(18 20 22 / 70%);
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 180ms ease, background 180ms ease;
}

.game-screen:hover .game-preview-play,
.game-preview-play:focus-visible
{
	opacity: 1;
}

.game-preview-play:hover
{
	background: #d8780d;
}

.community-section
{
	padding-top: 58px;
	border-bottom: 1px solid #2d2e30;
}

.community-layout
{
	display: grid;
	grid-template-columns: 1.6fr .92fr;
	align-items: stretch;
	gap: 40px;
}

.community-image
{
	min-height: 360px;
	overflow: hidden;
	border: 1px solid #67686a;
	background: #22252a;
}

.community-image img
{
	width: 100%;
	height: 100%;
	max-height: 430px;
	object-fit: cover;
	animation: scene-in 250ms ease-out;
}

.server-options
{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.server-tabs
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 17px;
}

.server-tab
{
	display: flex;
	flex: 1;
	align-items: center;
	gap: 30px;
	min-height: 86px;
	padding: 17px 28px;
	border: 1px solid #3f4144;
	background: linear-gradient(100deg, #202224, #181a1c);
	text-align: left;
	transition: border-color 180ms, background 180ms;
}

.server-tab > .icon:first-child
{
	width: 37px;
	height: 37px;
	color: #dededf;
	stroke-width: 1.5;
}

.server-tab > span
{
	font-size: 23px;
	font-weight: 700;
	white-space: nowrap;
}

.server-tab .accent-line
{
	width: 31px;
	height: 3px;
	margin-block: 11px 0;
}

.server-tab[aria-selected="true"]
{
	border-color: #8a612e;
	background: linear-gradient(100deg, #2d2821, #1b1c1e);
}

.server-tab:hover
{
	border-color: #9b7544;
}

.server-arrow
{
	width: 19px;
	height: 19px;
	margin-left: auto;
	color: var(--orange);
	opacity: 0;
	transition: opacity 180ms ease;
}

.server-tab[aria-selected="true"] .server-arrow,
.server-tab:hover .server-arrow
{
	opacity: 1;
}

.server-browse
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
	min-height: 53px;
	padding: 12px 20px;
	border: 1px solid var(--orange);
	background: transparent;
	font-size: 19px;
	font-weight: 700;
	transition: background 180ms ease;
}

.server-browse:hover
{
	background: rgb(242 139 19 / 10%);
}

.news-section
{
	padding-block: 53px 65px;
}

.news-card
{
	aspect-ratio: 1.27;
}

.news-card .guide-art
{
	object-position: 71% center;
}

.closing-section
{
	position: relative;
	z-index: 0;
	isolation: isolate;
	min-height: 380px;
	overflow: hidden;
	border-block: 1px solid #343537;
	background: #232426;
}

.closing-art
{
	object-fit: cover;
	object-position: center;
}

.closing-shade
{
	background: linear-gradient(90deg, rgb(8 9 11 / 35%), transparent 82%);
}

.closing-inner
{
	display: flex;
	align-items: center;
	min-height: 380px;
	padding-block: 64px;
}

.closing-copy
{
	width: 65%;
	text-align: center;
}

.closing-copy h2
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	font-size: clamp(28px, 3.1vw, 45px);
	font-weight: 800;
	font-style: italic;
	line-height: 1.5;
	white-space: nowrap;
}

.closing-copy h2::before,
.closing-copy h2::after
{
	width: 46px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--orange));
	content: "";
}

.closing-copy h2::after
{
	transform: rotate(180deg);
}

.closing-copy .action-group
{
	justify-content: center;
	margin-top: 30px;
}

.site-footer
{
	padding-block: 37px;
	background: linear-gradient(130deg, #141517, #0d0e10);
}

.footer-inner
{
	display: flex;
	align-items: center;
	gap: 26px;
}

.footer-inner > p
{
	padding-left: 26px;
	border-left: 1px solid #57585a;
	color: #b5b5b8;
	font-size: 13px;
	white-space: nowrap;
}

.footer-inner nav
{
	display: flex;
	align-items: center;
	gap: 23px;
	margin-left: auto;
	color: #c9c9ca;
	font-size: 13px;
	white-space: nowrap;
}

.footer-inner nav > *
{
	padding: 0;
	background: transparent;
	line-height: 1.8;
}

.footer-inner nav > * + *
{
	padding-left: 23px;
	border-left: 1px solid #4a4b4d;
}

.footer-inner nav > *:hover
{
	color: var(--orange);
}

.back-top
{
	position: fixed;
	right: 22px;
	bottom: 23px;
	z-index: 20;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid #72502a;
	background: rgb(18 20 22 / 94%);
	color: #f4c081;
	box-shadow: 0 3px 15px rgb(0 0 0 / 15%);
}

.back-top:hover
{
	border-color: var(--orange);
	color: var(--orange);
}

.site-dialog
{
	width: max-content;
	max-width: min(640px, calc(100vw - 36px));
	max-height: calc(100dvh - 40px);
	padding: 0;
	overflow-y: auto;
	border: 1px solid #57504a;
	background: #191b1e;
	color: var(--text);
	box-shadow: 0 30px 100px rgb(0 0 0 / 55%);
	scrollbar-width: thin;
}

.site-dialog::backdrop
{
	background: rgb(4 5 7 / 78%);
	backdrop-filter: blur(6px);
}

.dialog-panel
{
	position: relative;
	width: 460px;
	max-width: 100%;
	border-top: 3px solid var(--orange);
}

.dialog-panel-wide
{
	width: 620px;
}

.dialog-close
{
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 1;
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	background: rgb(17 19 21 / 80%);
	color: #bdbec0;
}

.dialog-close:hover
{
	color: #fff;
}

.dialog-content
{
	padding: 38px;
}

.dialog-icon
{
	width: 34px;
	height: 34px;
	margin-bottom: 22px;
	color: var(--orange);
}

.dialog-content h2
{
	font-size: 26px;
	line-height: 1.5;
}

.dialog-content h2:focus
{
	outline: none;
}

.dialog-description
{
	margin-top: 15px;
	color: #bebfc2;
	font-size: 15px;
	line-height: 1.9;
}

.dialog-confirm
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 44px;
	margin-top: 30px;
	padding: 10px 17px;
	border: 1px solid #9d6c31;
	background: transparent;
	font-size: 14px;
}

.dialog-confirm:hover
{
	border-color: var(--orange);
	background: rgb(242 139 19 / 6%);
}

.dialog-confirm .icon
{
	width: 19px;
	height: 19px;
	color: var(--orange);
}

.dialog-image
{
	width: 100%;
	max-height: 250px;
	object-fit: cover;
}

.dialog-content details
{
	padding-block: 20px;
	border-bottom: 1px solid #3b3d40;
}

.dialog-content details:first-of-type
{
	margin-top: 14px;
}

.dialog-content summary
{
	display: flex;
	justify-content: space-between;
	gap: 15px;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
}

.dialog-content summary::-webkit-details-marker
{
	display: none;
}

.dialog-content summary span
{
	color: var(--orange);
	font-size: 20px;
	line-height: 1;
}

.dialog-content details[open] summary span
{
	transform: rotate(45deg);
}

.dialog-content details p
{
	margin-top: 13px;
	color: #bdbec0;
	font-size: 14px;
	line-height: 1.9;
}

.noscript-message
{
	display: grid;
	min-height: 100vh;
	align-content: center;
	justify-items: center;
	gap: 30px;
	padding: 24px;
	color: #b9babd;
}

@keyframes scene-in
{
	from
	{
		opacity: .5;
	}
	to
	{
		opacity: 1;
	}
}

@media (min-width: 1600px)
{
	.hero,
	.hero-inner
	{
		min-height: 690px;
	}
}

@media (max-width: 1200px)
{
	.container
	{
		width: calc(100% - 64px);
	}
	.header-inner
	{
		width: calc(100% - 48px);
		gap: 20px;
	}
	.primary-nav
	{
		gap: 25px;
	}
	.header-actions
	{
		gap: 18px;
		margin-left: 10px;
	}
	.header-download
	{
		display: none;
	}
	.hero,
	.hero-inner
	{
		min-height: 560px;
	}
	.hero-content
	{
		max-width: 53%;
	}
	.hero-modes
	{
		gap: 12px;
		font-size: 16px;
	}
	.hero-modes::before,
	.hero-modes::after
	{
		width: 25px;
	}
	.action-button
	{
		min-width: 177px;
		padding-inline: 17px;
		font-size: 17px;
	}
	.browser-layout
	{
		grid-template-columns: .8fr 1fr;
		gap: 32px;
	}
	.browser-copy > p
	{
		font-size: 15px;
	}
	.browser-copy .action-group
	{
		gap: 19px;
	}
	.browser-copy .action-button
	{
		min-width: 166px;
	}
	.download-link
	{
		font-size: 13px;
	}
	.community-layout
	{
		gap: 28px;
	}
	.community-image
	{
		min-height: 320px;
	}
	.server-tab
	{
		gap: 21px;
		min-height: 76px;
		padding: 14px 19px;
	}
	.server-tab > span
	{
		font-size: 20px;
	}
	.card-copy
	{
		bottom: 22px;
		left: 20px;
		right: 20px;
	}
	.card-copy strong
	{
		font-size: 26px;
	}
	.card-description
	{
		font-size: 13px;
	}
	.footer-inner
	{
		gap: 20px;
	}
	.footer-inner > p
	{
		padding-left: 20px;
		font-size: 12px;
	}
	.footer-inner nav
	{
		gap: 16px;
		font-size: 12px;
	}
	.footer-inner nav > * + *
	{
		padding-left: 16px;
	}
}

@media (max-width: 900px)
{
	:root
	{
		--header-height: 66px;
	}
	.container
	{
		width: calc(100% - 48px);
	}
	.header-inner
	{
		width: calc(100% - 40px);
	}
	.header-inner .brand img
	{
		width: 144px;
	}
	.primary-nav
	{
		position: absolute;
		top: var(--header-height);
		right: 0;
		left: 0;
		display: none;
		padding: 12px 24px 20px;
		border-bottom: 1px solid #47484b;
		background: #141619;
		box-shadow: 0 18px 28px rgb(0 0 0 / 30%);
	}
	.primary-nav.is-open
	{
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.primary-nav > a
	{
		min-height: 49px;
		border-bottom: 1px solid #2e3033;
	}
	.primary-nav > a::after
	{
		display: none;
	}
	.primary-nav > a.is-active
	{
		color: var(--orange);
	}
	.mobile-download
	{
		display: block;
		width: fit-content;
		margin-top: 10px;
		padding: 13px 0;
		background: transparent;
		color: #d0d0d1;
		font-size: 14px;
	}
	.header-actions
	{
		gap: 16px;
	}
	.menu-button
	{
		display: grid;
		width: 38px;
		height: 38px;
		place-items: center;
		background: transparent;
	}
	.hero,
	.hero-inner
	{
		min-height: 520px;
	}
	.hero-content
	{
		max-width: 60%;
	}
	.hero-art
	{
		object-position: 61% center;
	}
	.hero-shade
	{
		background: linear-gradient(90deg, rgb(8 10 12 / 70%), rgb(8 10 12 / 15%) 75%), linear-gradient(0deg, #111214, transparent 25%);
	}
	.hero-description
	{
		font-size: 18px;
	}
	.hero-modes
	{
		gap: 9px;
		font-size: 14px;
	}
	.hero-modes::before,
	.hero-modes::after
	{
		width: 19px;
	}
	.hero-actions
	{
		gap: 19px;
	}
	.action-button
	{
		min-width: 161px;
		min-height: 48px;
		padding: 12px 14px;
		font-size: 16px;
	}
	.action-button .icon
	{
		width: 20px;
		height: 20px;
	}
	.section
	{
		padding-block: 40px 46px;
	}
	.section-heading
	{
		gap: 20px;
		margin-bottom: 26px;
	}
	.section-heading h2
	{
		gap: 13px;
		font-size: 26px;
	}
	.section-heading h2::before
	{
		width: 5px;
		height: 27px;
	}
	.mode-grid,
	.news-grid
	{
		gap: 14px;
	}
	.mode-card,
	.news-card
	{
		aspect-ratio: .88;
	}
	.card-copy
	{
		bottom: 19px;
		left: 17px;
		right: 13px;
	}
	.card-copy strong
	{
		font-size: 23px;
	}
	.accent-line
	{
		width: 28px;
		margin-block: 10px;
	}
	.card-description
	{
		font-size: 12px;
	}
	.card-arrow
	{
		display: none;
	}
	.browser-section
	{
		padding-block: 48px;
	}
	.browser-layout
	{
		grid-template-columns: .82fr 1fr;
		gap: 28px;
	}
	.browser-copy h2
	{
		font-size: 30px;
		line-height: 1.4;
	}
	.tablet-break
	{
		display: block;
	}
	.browser-copy > p
	{
		max-width: 230px;
		margin-top: 17px;
		font-size: 14px;
	}
	.browser-copy .action-group
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		margin-top: 24px;
	}
	.game-screen
	{
		aspect-ratio: 1.05;
	}
	.game-screen > img
	{
		object-position: 60% center;
	}
	.game-radar
	{
		top: 10px;
		left: 10px;
		transform: scale(.8);
		transform-origin: top left;
	}
	.game-health
	{
		gap: 4px;
		font-size: 13px;
	}
	.game-ammo b
	{
		font-size: 19px;
	}
	.community-layout
	{
		grid-template-columns: 1.25fr 1fr;
		gap: 24px;
	}
	.community-image
	{
		min-height: 328px;
	}
	.server-tab
	{
		gap: 20px;
		min-height: 73px;
		padding: 13px 18px;
	}
	.server-tab > .icon:first-child
	{
		width: 28px;
		height: 28px;
	}
	.server-tab > span
	{
		font-size: 18px;
	}
	.server-arrow
	{
		display: none;
	}
	.server-tabs
	{
		gap: 12px;
	}
	.server-options
	{
		gap: 16px;
	}
	.server-browse
	{
		min-height: 46px;
		font-size: 16px;
	}
	.closing-section,
	.closing-inner
	{
		min-height: 320px;
	}
	.closing-copy
	{
		width: 68%;
	}
	.closing-copy h2
	{
		gap: 16px;
		font-size: 30px;
	}
	.closing-copy h2::before,
	.closing-copy h2::after
	{
		width: 20px;
	}
	.footer-inner
	{
		flex-wrap: wrap;
		row-gap: 28px;
	}
	.footer-inner nav
	{
		justify-content: flex-end;
		width: 100%;
	}
}

@media (max-width: 600px)
{
	:root
	{
		--header-height: 62px;
	}
	.container
	{
		width: calc(100% - 40px);
	}
	.header-inner
	{
		width: calc(100% - 32px);
		gap: 12px;
	}
	.header-inner .brand img
	{
		width: 122px;
	}
	.header-actions
	{
		gap: 8px;
		margin-left: 0;
	}
	.login-button
	{
		gap: 6px;
		min-height: 34px;
		padding: 5px 9px;
		font-size: 12px;
	}
	.login-button .icon
	{
		width: 16px;
		height: 16px;
	}
	.menu-button
	{
		width: 32px;
		height: 36px;
	}
	.hero,
	.hero-inner
	{
		min-height: 640px;
	}
	.hero-inner
	{
		align-items: flex-end;
		padding-block: 300px 34px;
	}
	.hero-art
	{
		height: 76%;
		object-position: 73% top;
	}
	.hero-shade
	{
		background: linear-gradient(0deg, #111214 12%, rgb(17 18 20 / 96%) 32%, rgb(17 18 20 / 26%) 64%, transparent 90%);
	}
	.hero-content
	{
		width: 100%;
		max-width: none;
		padding: 0;
	}
	.hero h1
	{
		width: min(100%, 355px);
		margin-bottom: 10px;
	}
	.hero-description
	{
		font-size: clamp(14px, 4.2vw, 19px);
		font-weight: 500;
	}
	.hero-modes
	{
		gap: 10px;
		margin-top: 16px;
		font-size: 13px;
	}
	.hero-modes::before,
	.hero-modes::after
	{
		width: 22px;
	}
	.hero-actions
	{
		gap: 17px;
		margin-top: 25px;
		padding-inline: 5px;
	}
	.hero-actions .action-button
	{
		flex: 1;
		min-width: 0;
		font-size: 15px;
	}
	.action-button > span
	{
		gap: 7px;
	}
	.hero-note
	{
		margin-top: 17px;
		font-size: 11px;
	}
	.hero-more
	{
		margin-top: 20px;
		font-size: 13px;
	}
	.section
	{
		padding-block: 32px 38px;
	}
	.section-heading
	{
		gap: 20px;
		margin-bottom: 23px;
	}
	.section-heading h2
	{
		gap: 12px;
		font-size: 24px;
	}
	.section-heading h2::before
	{
		height: 25px;
		margin-inline: 3px;
	}
	.mode-grid,
	.news-grid
	{
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.mode-card
	{
		aspect-ratio: 1.55;
	}
	.image-card > img
	{
		object-position: center 48%;
	}
	.card-copy
	{
		bottom: 23px;
		left: 23px;
	}
	.card-copy strong
	{
		font-size: 26px;
	}
	.card-description
	{
		font-size: 13px;
	}
	.accent-line
	{
		width: 32px;
		margin-block: 10px;
	}
	.browser-section
	{
		padding-block: 41px;
	}
	.browser-layout
	{
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.browser-copy h2
	{
		font-size: clamp(25px, 6.8vw, 34px);
	}
	.tablet-break
	{
		display: none;
	}
	.technology-badge
	{
		margin-top: 13px;
		font-size: 19px;
	}
	.browser-copy > p
	{
		max-width: none;
		margin-top: 18px;
		font-size: 13px;
	}
	.browser-copy .action-group
	{
		flex-direction: row;
		align-items: center;
		gap: 24px;
		margin-top: 26px;
		padding-left: 5px;
	}
	.browser-copy .action-button
	{
		min-width: 156px;
		font-size: 15px;
	}
	.download-link
	{
		gap: 6px;
		font-size: 12px;
	}
	.download-link .icon
	{
		width: 17px;
		height: 17px;
	}
	.game-window
	{
		border-radius: 8px;
	}
	.window-bar
	{
		height: 33px;
		gap: 12px;
		padding-inline: 12px;
	}
	.window-tab
	{
		height: 26px;
		min-width: 130px;
	}
	.window-dots
	{
		gap: 5px;
	}
	.window-dots i
	{
		width: 7px;
		height: 7px;
	}
	.game-screen
	{
		aspect-ratio: 1.45;
	}
	.game-health
	{
		bottom: 11px;
		left: 12px;
	}
	.game-ammo
	{
		bottom: 11px;
		right: 12px;
		font-size: 11px;
	}
	.game-preview-play
	{
		width: 46px;
		height: 46px;
		opacity: .85;
	}
	.community-layout
	{
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.community-image
	{
		min-height: 0;
		aspect-ratio: 1.5;
	}
	.server-tabs
	{
		gap: 10px;
	}
	.server-tab
	{
		min-height: 72px;
		gap: 24px;
		padding-inline: 23px;
	}
	.server-tab > span
	{
		font-size: 18px;
	}
	.server-tab .accent-line
	{
		height: 2px;
		margin-top: 8px;
	}
	.server-arrow
	{
		display: block;
	}
	.server-browse
	{
		min-height: 49px;
	}
	.news-card
	{
		aspect-ratio: 1.55;
	}
	.news-card .guide-art
	{
		object-position: 72% 37%;
	}
	.closing-section,
	.closing-inner
	{
		min-height: 350px;
	}
	.closing-inner
	{
		align-items: flex-end;
		padding-block: 140px 42px;
	}
	.closing-art
	{
		object-position: 80% top;
	}
	.closing-shade
	{
		background: linear-gradient(0deg, rgb(13 15 17 / 96%) 5%, rgb(13 15 17 / 50%) 64%, rgb(13 15 17 / 10%));
	}
	.closing-copy
	{
		width: 100%;
	}
	.closing-copy h2
	{
		gap: 12px;
		font-size: clamp(24px, 6.5vw, 31px);
	}
	.closing-copy h2::before,
	.closing-copy h2::after
	{
		width: 20px;
	}
	.closing-copy .action-group
	{
		gap: 17px;
		margin-top: 25px;
		padding-inline: 5px;
	}
	.closing-copy .action-button
	{
		flex: 1;
		min-width: 0;
		font-size: 15px;
	}
	.site-footer
	{
		padding-block: 32px 34px;
	}
	.footer-inner
	{
		justify-content: center;
		gap: 18px;
	}
	.footer-inner .brand img
	{
		width: 142px;
	}
	.footer-inner > p
	{
		width: 100%;
		padding: 0;
		border: 0;
		text-align: center;
		font-size: 11px;
	}
	.footer-inner nav
	{
		justify-content: center;
		gap: 19px;
		margin-top: 7px;
		font-size: 12px;
	}
	.footer-inner nav > * + *
	{
		padding-left: 19px;
	}
	.back-top
	{
		right: 13px;
		bottom: 15px;
		width: 36px;
		height: 36px;
	}
	.back-top .icon
	{
		width: 19px;
		height: 19px;
	}
	.dialog-content
	{
		padding: 32px 24px;
	}
	.dialog-content h2
	{
		font-size: 23px;
	}
	.dialog-description
	{
		font-size: 14px;
	}
	.dialog-content summary
	{
		font-size: 14px;
	}
}

@media (max-width: 360px)
{
	.container
	{
		width: calc(100% - 32px);
	}
	.hero-actions,
	.closing-copy .action-group
	{
		gap: 14px;
	}
	.hero-actions .action-button,
	.closing-copy .action-button
	{
		padding-inline: 9px;
		font-size: 13px;
	}
	.hero-modes
	{
		gap: 8px;
		font-size: 12px;
	}
	.hero-modes::before,
	.hero-modes::after
	{
		width: 16px;
	}
	.browser-copy .action-group
	{
		gap: 16px;
	}
	.browser-copy .action-button
	{
		min-width: 144px;
		font-size: 14px;
	}
}

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