:root {
	--brand: #ff8f2a;
	--brand-ink: #1b0f04;
	--brand-icon: brightness(0.12);
	--loss: #ff4655;
	--dark: #0f1923;
	--card: #121a24;
	--text: #ece8e1;
	--muted: #8b97a3;
	--ready: #3ff3c1;
	--gold: #e8c26a;
	--cw: 21rem;
	--ch: 51rem;
	--wrapper-padding: 3rem;
}

html {
	font-size: 0.521vw;
	height: 100%;
}

body {
	min-height: 100%;
	height: 100vh;
	overflow: hidden;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	color: var(--text);
	background-color: #1a0b10;
	position: relative;
}

::selection {
	background-color: var(--brand);
	color: var(--brand-ink);
}

.topbar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	height: 6.4rem;
	background: rgba(12, 8, 12, 0.88);
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

a.topbar__logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	padding: 0 6rem 0 3rem;
	position: relative;
	z-index: 0;
	color: var(--dark);
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3.6rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	transition: color 0.2s ease;
}

a.topbar__logo::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -6rem;
	right: 0;
	z-index: -1;
	background: var(--text);
	transform: skewX(-32deg);
	transform-origin: 100% 0;
	transition: background 0.2s ease;
}

a.topbar__logo:hover::before {
	background: var(--brand);
}

a.topbar__logo:hover {
	color: var(--brand-ink);
}

a.topbar__logo:hover .topbar__icon {
	filter: var(--brand-icon);
}

.topbar__icon {
	width: 6rem;
	height: 6rem;
	margin-left: -1rem;
	object-fit: contain;
	filter: brightness(0.12);
	transition: filter 0.2s ease;
}

.topbar__nav {
	display: flex;
	gap: 0.4rem;
	margin-left: 3rem;
	height: 100%;
}

a.topbar__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 2.2rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--muted);
	transition: color 0.2s;
}

.topbar__link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 0.3rem;
	background: var(--brand);
	transition: 0.2s;
	translate: -50% 0;
}

a.topbar__link:hover,
a.topbar__link.is-active {
	color: var(--text);
}

.topbar__link.is-active::after {
	width: 60%;
}

.topbar__meta {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-left: auto;
	padding-right: var(--wrapper-padding);
	font-size: 1.4rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08rem;
}

.topbar__tag {
	display: flex;
	align-items: center;
	height: 3.4rem;
	padding: 0 1rem;
	border: 0.1rem solid rgba(255, 255, 255, 0.25);
	color: var(--text);
}

.lobby {
	position: relative;
	height: calc(100vh - 6.4rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6rem;
}

.lobby__stage {
	position: relative;
}

.lobby__party {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2rem;
}

.card {
	position: relative;
	flex: 0 0 var(--cw);
	width: var(--cw);
	height: var(--ch);
	animation: cardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	animation-delay: calc(0.1s + var(--d, 0) * 0.08s);
	transition: translate 0.25s ease, opacity 0.45s ease, scale 0.45s ease, filter 0.45s ease;
	cursor: pointer;
}

.card--step-2 {
	margin-top: 7rem;
	z-index: 1;
	--d: 2;
}

.card--step-1 {
	margin-top: 3.4rem;
	z-index: 2;
	--d: 1;
}

.card--step-0 {
	z-index: 3;
}

.card:hover {
	z-index: 5;
	translate: 0 -1rem;
}

@keyframes cardIn {
	from {
		opacity: 0;
		transform: translateY(6rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card__frame {
	position: absolute;
	inset: 0;
	background: var(--card);
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 7.5rem), rgba(0, 0, 0, 0.92) calc(100% - 5rem), rgba(0, 0, 0, 0.6) calc(100% - 2.8rem), rgba(0, 0, 0, 0.22) calc(100% - 1.2rem), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 7.5rem), rgba(0, 0, 0, 0.92) calc(100% - 5rem), rgba(0, 0, 0, 0.6) calc(100% - 2.8rem), rgba(0, 0, 0, 0.22) calc(100% - 1.2rem), transparent 100%);
	overflow: hidden;
}



.card__photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	object-fit: cover;
	object-position: center 20%;
	filter: grayscale(0.35) contrast(1.05);
	transition: filter 0.3s, scale 0.4s;
}

.card:hover .card__photo {
	filter: grayscale(0) contrast(1.05);
	scale: 1.04;
}

.card__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(18, 26, 36, 0) 30%, rgba(18, 26, 36, 0.85) 58%, var(--card) 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--brand) 0%, transparent));
}

.card__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.card__lines polyline,
.card__lines polygon {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}


.card__info {
	position: absolute;
	left: 0;
	right: 0;
	top: 62.5%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.card__status {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	padding-bottom: 0.6rem;
	border-bottom: 0.3rem solid var(--ready);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--ready);
	text-shadow: 0 0 1.2rem rgba(63, 243, 193, 0.5);
}

.card__role {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
	filter: brightness(0) invert(84%) sepia(40%) saturate(900%) hue-rotate(110deg) drop-shadow(0 0 0.6rem rgba(63, 243, 193, 0.5));
}

.card__name {
	margin-top: 1.2rem;
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--gold);
	max-width: 92%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card__name span {
	color: var(--text);
}

.card__tag {
	margin-top: 0.3rem;
	font-size: 1.3rem;
	color: var(--muted);
}

.card__rank-wrap {
	position: relative;
	margin-top: 0.8rem;
	width: 5.2rem;
	height: 5.2rem;
}

.card__rank-wrap::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8rem;
	height: 8rem;
	translate: -50% -50%;
	background: radial-gradient(circle, var(--rank-color) 0%, transparent 65%);
	opacity: 0.12;
	pointer-events: none;
	transition: background 0.3s;
}

.card__rank {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--rank-color) 35%, transparent));
}



.play-btn {
	position: relative;
	padding: 0.4rem;
	--frame: rgba(236, 232, 225, 0.55);
	--side: 42%;
	background:
		linear-gradient(var(--frame), var(--frame)) left top / 0.1rem var(--side) no-repeat,
		linear-gradient(var(--frame), var(--frame)) left bottom / 0.1rem var(--side) no-repeat,
		linear-gradient(var(--frame), var(--frame)) right top / 0.1rem var(--side) no-repeat,
		linear-gradient(var(--frame), var(--frame)) right bottom / 0.1rem var(--side) no-repeat;
	border: solid var(--frame);
	border-width: 0.1rem 0;
	cursor: pointer;
	animation: cardIn 0.7s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	transition: opacity 0.45s ease, translate 0.45s ease, background-size 0.25s ease;
}

.play-btn span {
	display: block;
	width: 23.4rem;
	padding: 0.9rem 0;
	text-align: center;
	white-space: nowrap;
	background: var(--brand);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.6rem;
	letter-spacing: 0.1rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--brand-ink);
	transition: background 0.2s;
}

.play-btn:hover {
	--frame: var(--text);
	--side: 50%;
}


.play-btn:hover span {
	background: color-mix(in srgb, var(--brand), #fff 15%);
}

.play-btn:active span {
	background: color-mix(in srgb, var(--brand), #000 12%);
}

.card__voice {
	position: absolute;
	left: 50%;
	bottom: 4.6rem;
	translate: -50% 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.card__voice:hover {
	color: var(--text);
}

.card__voice svg {
	width: 2.2rem;
	height: 2.2rem;
}

.card__voice path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card__voice .card__voice-body {
	fill: currentColor;
}

.card__voice-wave {
	display: none;
}

.card.is-speaking .card__voice {
	color: var(--ready);
}


.card.is-speaking .card__voice-mute {
	display: none;
}

.card.is-speaking .card__voice-wave {
	display: block;
	animation: voiceWave 0.9s ease-in-out infinite;
}

.card.is-speaking .card__voice-wave--2 {
	animation-delay: 0.2s;
}

.card.is-speaking .card__lines polygon {
	stroke: var(--ready);
	stroke-width: 2;
}


@keyframes voiceWave {
	0%,
	100% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}
}

[hidden] {
	display: none !important;
}

.matches {
	position: relative;
	height: calc(100vh - 6.4rem);
	overflow-y: auto;
	padding: 5rem 0 8rem;
}

.matches::-webkit-scrollbar {
	width: 0.6rem;
}

.matches::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
}

.matches__inner {
	width: 160rem;
	margin: 0 auto;
}

.matches__head {
	margin-bottom: 3rem;
	animation: cardIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.matches__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 6.4rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.matches__sub {
	margin-top: 1rem;
	font-size: 1.6rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.matches__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.matches__empty {
	padding: 4rem;
	background: rgba(15, 25, 35, 0.8);
	font-size: 1.8rem;
	color: var(--muted);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.match {
	--result: var(--muted);
	position: relative;
	display: grid;
	grid-template-columns: 24rem 19rem 15rem 1fr 6rem;
	align-items: center;
	min-height: 9.6rem;
	background: rgba(15, 25, 35, 0.92);
	border-left: 0.6rem solid var(--result);
	animation: cardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	transition: background 0.2s;
}

.match:hover {
	background: rgba(24, 36, 48, 0.95);
}

.match--win {
	--result: var(--ready);
}

.match--loss {
	--result: var(--loss);
}

.match__map {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	padding: 1.2rem 1.6rem;
	background-size: cover;
	background-position: center;
}

.match__map::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 25, 35, 0.1), rgba(15, 25, 35, 0.95));
}

.match__map span {
	position: relative;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.8);
}

.match__result {
	padding-left: 2.4rem;
}

.match__outcome {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--result);
}

.match__score {
	margin-top: 0.2rem;
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	color: var(--muted);
}

.match__score b {
	color: var(--text);
}

.match__meta {
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}

.match.is-ready {
	animation: none;
}

.match--premier {
	background: linear-gradient(90deg, rgba(15, 25, 35, 0.92) 40%, color-mix(in srgb, var(--brand) 9%, rgba(15, 25, 35, 0.92)));
	box-shadow: inset 0 0.1rem 0 color-mix(in srgb, var(--brand) 35%, transparent), inset 0 -0.1rem 0 color-mix(in srgb, var(--brand) 35%, transparent);
}

.match--premier:hover {
	background: linear-gradient(90deg, rgba(24, 36, 48, 0.95) 40%, color-mix(in srgb, var(--brand) 14%, rgba(24, 36, 48, 0.95)));
}

.match__premier {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 0.8rem;
	background: var(--brand);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 2.2rem;
	letter-spacing: 0.12rem;
	color: var(--brand-ink);
}

.match__rival {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--text);
}

.match__roster {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.6rem;
	padding: 1.2rem 0;
}

.match__player {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.match__agent {
	flex: 0 0 4.4rem;
	width: 4.4rem;
	height: 4.4rem;
	background: rgba(255, 255, 255, 0.06);
	border: 0.1rem solid rgba(255, 255, 255, 0.12);
}

.match__name {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--gold);
	white-space: nowrap;
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.match__kda {
	margin-top: 0.2rem;
	font-size: 1.4rem;
	white-space: nowrap;
}

.match__kda span {
	color: var(--muted);
}

.match__stack {
	justify-self: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2rem;
	color: var(--muted);
}

a.match {
	color: var(--text);
	cursor: pointer;
}

.match__player--guest .match__name {
	color: var(--text);
}

.match__player--guest .match__agent {
	opacity: 0.7;
}

a.match-back {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 2.4rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 0.2s;
}

a.match-back:hover {
	color: var(--text);
}

a.match-back svg {
	width: 2rem;
	height: 2rem;
	transition: translate 0.2s;
}

a.match-back:hover svg {
	translate: -0.4rem 0;
}

.mhero.match--draw {
	--result: var(--muted);
}

.mhero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 30rem;
	padding: 3.6rem 6rem;
	overflow: hidden;
	background: var(--splash) center / cover;
	animation: cardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mhero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 50% 120%, color-mix(in srgb, var(--result) 30%, transparent), transparent 70%),
		linear-gradient(90deg, rgba(15, 25, 35, 0.94), rgba(15, 25, 35, 0.62) 50%, rgba(15, 25, 35, 0.94));
}

.mhero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.4rem;
	background: var(--result);
	box-shadow: 0 0 2.4rem var(--result);
}

.mhero > * {
	position: relative;
}

.mhero__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	min-width: 0;
}

.mhero__logo {
	width: 12rem;
	height: 12rem;
	object-fit: contain;
	filter: drop-shadow(0 0.8rem 2.4rem rgba(0, 0, 0, 0.6));
}

.mhero__logo--empty {
	background: rgba(255, 255, 255, 0.06);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.mhero__name {
	max-width: 100%;
	overflow: hidden;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.7);
}

.mhero__tag {
	margin-top: -0.6rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: 0.3rem;
	color: var(--muted);
}

.mhero__squad {
	display: flex;
	justify-content: center;
	gap: 1.2rem;
	min-width: 0;
}

.mhero__mate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	width: 8.4rem;
	min-width: 0;
}

.mhero__mate img {
	width: 6.4rem;
	height: 6.4rem;
	background: rgba(15, 25, 35, 0.6);
	border-bottom: 0.3rem solid var(--side);
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5);
}

.mhero__squad--ours {
	--side: var(--ready);
}

.mhero__squad--enemy {
	--side: var(--loss);
}

.mhero__mate b {
	max-width: 100%;
	overflow: hidden;
	font-weight: 500;
	font-size: 1.4rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.8);
}

.mhero__mate.is-member b {
	color: var(--gold);
}

.mhero__center {
	padding: 0 4rem;
	text-align: center;
}

.mhero__result {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 6.4rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.4rem;
	color: var(--result);
	text-shadow: 0 0 4rem color-mix(in srgb, var(--result) 55%, transparent);
}

.mhero__score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	margin-top: 1rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 9.6rem;
	line-height: 1;
}

.mhero__score span {
	font-size: 6rem;
	color: var(--muted);
}

.mhero__score b:last-child {
	color: var(--muted);
}

.mhero__meta {
	margin-top: 1.6rem;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	white-space: nowrap;
	color: rgba(236, 232, 225, 0.85);
}

.mhero__meta b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	color: var(--text);
}

.msum {
	display: grid;
	grid-template-columns: 58rem 1fr;
	gap: 1rem;
	margin: 1rem 0;
	animation: cardIn 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.msum__mvp {
	position: relative;
	min-height: 23rem;
	padding: 2.8rem 3.2rem;
	overflow: hidden;
	background: linear-gradient(105deg, rgba(15, 25, 35, 0.96) 45%, color-mix(in srgb, var(--gold) 16%, rgba(15, 25, 35, 0.96)));
	border-left: 0.4rem solid var(--gold);
}

.msum__portrait {
	position: absolute;
	top: -2rem;
	right: -6rem;
	width: 38rem;
	height: calc(100% + 8rem);
	object-fit: cover;
	object-position: 50% 6%;
	mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.msum__badge {
	position: relative;
	display: inline-block;
	padding: 0.3rem 1rem;
	background: var(--gold);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--dark);
}

.msum__name {
	position: relative;
	max-width: 32rem;
	margin-top: 1.4rem;
	overflow: hidden;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 4.4rem;
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.msum__agent {
	position: relative;
	margin-top: 0.4rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--gold);
}

.msum__stats {
	position: relative;
	display: flex;
	gap: 2.8rem;
	margin-top: 3rem;
}

.msum__stats div {
	display: flex;
	flex-direction: column;
}

.msum__stats b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.6rem;
	line-height: 1;
	white-space: nowrap;
}

.msum__stats span {
	margin-top: 0.6rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
}

.msum__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.mtile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.8rem 2.4rem;
	background: rgba(15, 25, 35, 0.92);
}

.mtile span {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
}

.mtile b {
	margin-top: 0.6rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 3.6rem;
	line-height: 1;
}

.mtile b em {
	font-style: normal;
	font-size: 2.4rem;
	color: var(--muted);
}

.mtile small {
	margin-top: 0.6rem;
	font-size: 1.3rem;
	color: var(--muted);
}

.mtile i {
	position: relative;
	height: 0.4rem;
	margin-top: 1.2rem;
	background: rgba(255, 255, 255, 0.08);
}

.mtile i::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 100%);
	background: var(--ready);
	box-shadow: 0 0 0.8rem var(--ready);
}

.mtile i.is-bad::before {
	background: var(--loss);
	box-shadow: 0 0 0.8rem var(--loss);
}

.tl {
	margin: 0 0 3rem;
	padding: 2rem 2.4rem 2.4rem;
	background: rgba(15, 25, 35, 0.92);
	animation: cardIn 0.5s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tl__head {
	display: flex;
	align-items: center;
	gap: 3rem;
	margin-bottom: 2rem;
}

.tl__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.tl__legend {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.4rem;
	color: var(--muted);
}

.tl__legend i {
	width: 1rem;
	height: 1rem;
	margin-left: 1rem;
}

.tl__legend .is-ours {
	background: var(--ready);
}

.tl__legend .is-enemy {
	background: var(--loss);
}

.tl__hint {
	margin-left: auto;
	font-size: 1.4rem;
	color: var(--muted);
}

.tl__grid {
	display: flex;
	gap: 1.6rem;
}

.tl__labels,
.tl__col {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.tl__labels {
	flex: none;
	width: 9rem;
}

.tl__label {
	display: flex;
	align-items: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
}

.tl__label--lead,
.tl__lead {
	height: 9rem;
}

.tl__label--eco,
.tl__eco {
	height: 5.6rem;
}

.tl__label--round,
.tl__round {
	height: 5.2rem;
}

.tl__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tl__col {
	--c: var(--loss);
	width: 4.4rem;
	cursor: pointer;
}

.tl__col--win {
	--c: var(--ready);
}

.tl__col--half {
	margin-left: 1.6rem;
}

.tl__lead,
.tl__eco,
.tl__round {
	position: relative;
	transition: background 0.2s;
}

.tl__lead::before {
	content: '';
	position: absolute;
	left: -0.2rem;
	right: -0.2rem;
	top: 50%;
	height: 0.1rem;
	background: rgba(255, 255, 255, 0.14);
}

.tl__lead i {
	position: absolute;
	left: 25%;
	width: 50%;
	height: calc(var(--v) * 50%);
	min-height: 0.2rem;
}

.tl__lead .is-up {
	bottom: 50%;
	background: linear-gradient(0deg, color-mix(in srgb, var(--ready) 35%, transparent), var(--ready));
}

.tl__lead .is-down {
	top: 50%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--loss) 35%, transparent), var(--loss));
}

.tl__lead .is-even {
	top: calc(50% - 0.1rem);
	background: var(--muted);
}

.tl__eco {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.3rem;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.14);
}

.tl__eco i {
	width: 1.3rem;
	height: calc(var(--v) * 100%);
}

.tl__eco .is-ours {
	background: color-mix(in srgb, var(--ready) 80%, transparent);
}

.tl__eco .is-enemy {
	background: color-mix(in srgb, var(--loss) 55%, transparent);
}

.tl__round {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 0.3rem solid var(--c);
	color: var(--c);
}

.tl__round svg {
	width: 2rem;
	height: 2rem;
}

.tl__round small {
	font-size: 1.1rem;
	color: var(--muted);
}

.tl__col:hover .tl__lead,
.tl__col:hover .tl__eco {
	background: rgba(255, 255, 255, 0.04);
}

.tl__col:hover .tl__round {
	background: rgba(255, 255, 255, 0.1);
}

.tl__col.is-active .tl__lead,
.tl__col.is-active .tl__eco {
	background: color-mix(in srgb, var(--c) 8%, transparent);
}

.tl__col.is-active .tl__round {
	background: color-mix(in srgb, var(--c) 16%, transparent);
	box-shadow: inset 0 0 0 0.1rem var(--c);
}

.tl__col.is-active small {
	color: var(--text);
}

.mextra {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	margin-bottom: 3rem;
}

.mpanel {
	padding: 2rem 2.4rem 2.4rem;
	background: rgba(15, 25, 35, 0.92);
}

.mpanel__title {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	margin-bottom: 2rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.mpanel__title small {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
}

.mpanel__empty {
	padding: 2rem 0 2.4rem;
	font-size: 1.5rem;
	color: var(--muted);
}

.moments {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.8rem;
	margin-bottom: 2.4rem;
}

.moment {
	--c: var(--ready);
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 1.2rem 1.6rem;
	background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(255, 255, 255, 0.03) 70%);
	border-left: 0.3rem solid var(--c);
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.moment:hover {
	background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent), rgba(255, 255, 255, 0.05) 70%);
}

.moment--ace,
.moment--k4 {
	--c: var(--gold);
}

.moment img {
	flex: none;
	width: 4.4rem;
	height: 4.4rem;
	background: rgba(255, 255, 255, 0.06);
}

.moment span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.moment b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.06rem;
	color: var(--c);
}

.moment small {
	margin-top: 0.2rem;
	overflow: hidden;
	font-size: 1.4rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--muted);
}

.mmulti {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}

.mmulti th {
	padding: 0 1rem 0.8rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	text-align: center;
	color: var(--muted);
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.mmulti th:first-child {
	text-align: left;
	padding-left: 0;
}

.mmulti td {
	padding: 0.6rem 1rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.05);
}

.mmulti td:first-child {
	padding-left: 0;
}

.mmulti em {
	font-style: normal;
	color: rgba(255, 255, 255, 0.2);
}

.mmulti__player,
.duels__head,
.duels__side {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.mmulti__player img,
.duels__head img,
.duels__side img {
	flex: none;
	width: 3.2rem;
	height: 3.2rem;
	background: rgba(255, 255, 255, 0.06);
}

.mmulti__player span,
.duels__head span,
.duels__side span {
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mmulti tr.is-member span,
.duels__side.is-member span {
	color: var(--gold);
}

.duels {
	display: grid;
	grid-template-columns: 15rem repeat(var(--n), 1fr);
	gap: 0.4rem;
	font-size: 1.4rem;
}

.duels__head {
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
	padding-bottom: 0.8rem;
	text-align: center;
}

.duels__head span {
	max-width: 100%;
	font-size: 1.3rem;
	color: var(--muted);
}

.duels__side {
	padding-right: 1rem;
}

.duels__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 5.2rem;
	background: rgba(255, 255, 255, 0.03);
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
}

.duels__cell.is-win {
	background: color-mix(in srgb, var(--ready) calc(8% + var(--v) * 26%), transparent);
}

.duels__cell.is-loss {
	background: color-mix(in srgb, var(--loss) calc(8% + var(--v) * 26%), transparent);
}

.duels__cell b {
	font-weight: 600;
}

.duels__cell i,
.duels__cell em {
	font-style: normal;
	color: var(--muted);
}

.duels__cell.is-win b {
	color: var(--ready);
}

.duels__cell.is-loss em {
	color: var(--loss);
}

.round {
	display: grid;
	grid-template-columns: 50rem 1fr;
	align-items: start;
	gap: 3.2rem;
	margin: -2.6rem 0 3rem;
	padding: 2.4rem;
	background: rgba(15, 25, 35, 0.92);
	border-top: 0.1rem solid rgba(255, 255, 255, 0.06);
	animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.round[hidden] {
	display: none;
}

.round--nomap {
	grid-template-columns: 1fr;
}

.round__empty {
	grid-column: 1 / -1;
	padding: 4rem 0;
	font-size: 1.6rem;
	text-align: center;
	color: var(--muted);
}

.rmap {
	position: relative;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
}

.rmap__img,
.rmap__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rmap__img {
	opacity: 0.5;
}

.rmap__marks {
	position: absolute;
	inset: 0;
}

.rmap__line {
	overflow: visible;
}

.rmap__line line {
	stroke: var(--side);
	stroke-width: 0.3;
	stroke-dasharray: 1 0.7;
}

.rmap__p--ours,
.rmap__dead--ours,
.rmap__line--ours {
	--side: var(--ready);
}

.rmap__p--enemy,
.rmap__dead--enemy,
.rmap__line--enemy {
	--side: var(--loss);
}

.rmap__p {
	position: absolute;
	width: 3rem;
	height: 3rem;
	translate: -50% -50%;
	transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.rmap__p.is-off {
	opacity: 0;
	pointer-events: none;
}

.rmap__p.is-actor {
	z-index: 2;
}

.rmap__p img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: #0f1923;
	border: 0.2rem solid var(--side);
	border-radius: 50%;
}

.rmap__p.is-actor img {
	box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--side) 35%, transparent), 0 0 1.4rem var(--side);
}

.rmap__view {
	position: absolute;
	inset: 0;
	rotate: var(--a);
}

.rmap__view::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.6rem;
	height: 3rem;
	translate: 0 -50%;
	background: linear-gradient(90deg, color-mix(in srgb, var(--side) 60%, transparent), transparent);
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.rmap__dead {
	position: absolute;
	width: 1.6rem;
	height: 1.6rem;
	translate: -50% -50%;
	color: var(--side);
	opacity: 0.6;
}

.rmap__dead svg,
.rmap__spike svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.rmap__dead.is-now {
	z-index: 1;
	width: 3rem;
	height: 3rem;
	opacity: 1;
}

.rmap__dead.is-now img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #0f1923;
	border: 0.2rem solid var(--side);
	border-radius: 50%;
	filter: grayscale(1) brightness(0.6);
}

.rmap__dead.is-now svg {
	filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.9));
}

.rmap__spike {
	position: absolute;
	z-index: 3;
	width: 2.4rem;
	height: 2.4rem;
	translate: -50% -50%;
	color: var(--brand);
	filter: drop-shadow(0 0 0.8rem var(--brand));
}

.rmap__spike.is-defused {
	color: var(--ready);
	filter: drop-shadow(0 0 0.8rem var(--ready));
}

.rmap__spike.is-boom {
	color: var(--loss);
	filter: drop-shadow(0 0 1.2rem var(--loss));
	animation: spikeBoom 0.9s ease-out infinite;
}

@keyframes spikeBoom {
	50% {
		scale: 1.35;
	}
}

.round__side {
	min-width: 0;
}

.round__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 1.6rem;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.round__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	white-space: nowrap;
}

.round__title b {
	margin-left: 1rem;
}

.round__title .is-win {
	color: var(--ready);
}

.round__title .is-loss {
	color: var(--loss);
}

.round__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.8rem;
}

.round__facts > span {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 3rem;
	padding: 0 1.2rem;
	background: rgba(255, 255, 255, 0.05);
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
}

.round__facts b {
	font-weight: 600;
	color: var(--text);
}

.round__facts svg {
	width: 1.8rem;
	height: 1.8rem;
}

.round__facts .round__end {
	color: var(--text);
}

.round__facts .round__badge {
	background: var(--gold);
	color: var(--dark);
}

.round__eco {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	margin: 1.6rem 0;
}

.round__team {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.2rem 1.6rem;
	background: rgba(255, 255, 255, 0.04);
	border-left: 0.3rem solid var(--side);
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
}

.round__team--ours,
.round__event--ours,
.round__gear--ours {
	--side: var(--ready);
}

.round__team--enemy,
.round__event--enemy,
.round__gear--enemy {
	--side: var(--loss);
}

.round__event--boom {
	--side: var(--brand);
}

.round__team span {
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--muted);
}

.round__team b {
	font-weight: 600;
	font-size: 2.4rem;
	line-height: 1;
}

.round__team em {
	margin-left: auto;
	font-style: normal;
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--side);
}

.round__body {
	display: grid;
	grid-template-columns: 1fr 48rem;
	align-items: start;
	gap: 2.4rem;
}

.round--nomap .round__body {
	grid-template-columns: 1fr 56rem;
}

.round__events {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.round__event {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 4.4rem;
	padding: 0.6rem 1.2rem;
	background: rgba(255, 255, 255, 0.03);
	border-left: 0.3rem solid var(--side);
	font-size: 1.5rem;
	text-align: left;
	color: var(--text);
	cursor: pointer;
	transition: background 0.2s;
}

.round__event:hover {
	background: rgba(255, 255, 255, 0.07);
}

.round__event.is-active {
	background: color-mix(in srgb, var(--side) 14%, transparent);
}

.round__event time {
	flex: none;
	width: 3.6rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.round__who {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-width: 0;
}

.round__who img {
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	background: rgba(255, 255, 255, 0.06);
}

.round__who b {
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.round__who.is-member b {
	color: var(--gold);
}

.round__who--victim img {
	filter: grayscale(1);
	opacity: 0.7;
}

.round__assist {
	display: flex;
	flex: none;
	gap: 0.2rem;
	margin-left: -0.4rem;
}

.round__assist img {
	width: 1.8rem;
	height: 1.8rem;
	opacity: 0.7;
}

.round__gun {
	flex: none;
	width: auto;
	height: 1.8rem;
	max-width: 7rem;
	object-fit: contain;
	opacity: 0.85;
}

.round__gun--ability {
	width: 2.4rem;
	height: 2.4rem;
}

span.round__gun {
	width: 1.6rem;
}

.round__act {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--muted);
	white-space: nowrap;
}

.round__act svg {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--brand);
}

.round__tag {
	flex: none;
	margin-left: auto;
	padding: 0.2rem 0.8rem;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--gold);
	border: 0.1rem solid color-mix(in srgb, var(--gold) 50%, transparent);
}

.round__none {
	padding: 2rem;
	font-size: 1.5rem;
	color: var(--muted);
}

.round__gear + .round__gear {
	margin-top: 1.6rem;
}

.round__gear-head,
.round__gear-row {
	display: grid;
	grid-template-columns: 3rem 1fr 7.4rem 4.4rem 7rem 2rem 4rem;
	align-items: center;
	gap: 1rem;
}

.round__gear-head {
	padding: 0 1rem 0.6rem;
	border-bottom: 0.2rem solid var(--side);
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
}

.round__gear-head span:first-child {
	grid-column: span 2;
	font-size: 1.4rem;
	color: var(--side);
}

.round__gear-head span:nth-child(3) {
	text-align: center;
}

.round__gear-head span:nth-child(n + 4),
.round__gear-row > span {
	text-align: right;
}

.round__gear-row {
	padding: 0.5rem 1rem;
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.05);
}

.round__gear-row b {
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.round__gear-row.is-member b {
	color: var(--gold);
}

.round__gear-agent {
	width: 3rem;
	height: 3rem;
	background: rgba(255, 255, 255, 0.06);
}

.round__gear-gun {
	justify-self: start;
	max-width: 100%;
	height: 1.8rem;
	object-fit: contain;
	opacity: 0.85;
}

.round__gear-armor {
	justify-self: center;
	width: 2.2rem;
	height: 2.2rem;
	object-fit: contain;
}

.board {
	margin-bottom: 3rem;
	padding: 0.8rem 0 1.2rem;
	background: rgba(15, 25, 35, 0.92);
}

.board__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}

.board__table th {
	padding: 1rem 1rem 0.8rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--muted);
	text-align: center;
}

.board__table th:first-child {
	padding-left: 2.4rem;
	text-align: left;
}

.board__table td {
	height: 4.6rem;
	padding: 0 1rem;
	text-align: center;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.05);
}

.board__table td:first-child {
	width: 52rem;
	padding-left: 2.4rem;
	text-align: left;
}

.board__team--ours {
	--side: var(--ready);
}

.board__team--enemy {
	--side: var(--loss);
}

.board__table .board__group td {
	height: auto;
	padding: 1.8rem 2.4rem 0.8rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	border-bottom: 0.2rem solid var(--side);
}

.board__group b {
	margin-left: 0.6rem;
	color: var(--side);
}

.board__table tr.is-member {
	background: linear-gradient(90deg, rgba(232, 194, 106, 0.1), transparent 50%);
}

.board__table tbody tr:not(.board__group):hover {
	background-color: rgba(255, 255, 255, 0.04);
}

.board__table tr.is-member .board__name {
	color: var(--gold);
}

.board__player {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.board__agent {
	flex: none;
	width: 3.4rem;
	height: 3.4rem;
	background: rgba(255, 255, 255, 0.06);
}

.board__rank {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	object-fit: contain;
}

.board__name {
	overflow: hidden;
	font-weight: 500;
	font-size: 1.6rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.board__name span {
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--muted);
}

.board__agent-name {
	flex: none;
	font-size: 1.3rem;
	color: var(--muted);
}

.board__mvp {
	flex: none;
	padding: 0.1rem 0.6rem;
	background: var(--gold);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--dark);
}

.board__mvp--team {
	background: rgba(236, 232, 225, 0.85);
}

.board__acs b {
	font-weight: 700;
}

.board__acs i {
	position: relative;
	display: block;
	width: 4.8rem;
	height: 0.3rem;
	margin: 0.4rem auto 0;
	background: rgba(255, 255, 255, 0.08);
}

.board__acs i::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 100%);
	background: var(--side);
}

.board__table .is-best {
	font-weight: 700;
	color: var(--gold);
}

.board__table .is-plus {
	color: var(--ready);
}

.board__table .is-minus {
	color: var(--loss);
}

.lobby.is-focus .card:not(.is-picked) {
	opacity: 0;
	scale: 0.9;
	filter: blur(0.4rem);
	pointer-events: none;
}

.lobby.is-focus .play-btn {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.card.is-picked {
	visibility: hidden;
}

.profile {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

.profile__backdrop {
	position: absolute;
	inset: 6.4rem 0 0;
	background: radial-gradient(ellipse at center, rgba(10, 5, 8, 0.35), rgba(10, 5, 8, 0.8));
	pointer-events: auto;
	animation: profileFade 0.5s ease both;
}

.profile.is-closing .profile__backdrop,
.profile.is-closing .profile__flip {
	animation: profileOut 0.4s ease forwards;
}

@keyframes profileFade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.profile__flip {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	pointer-events: auto;
}

.profile__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.profile__front,
.profile__back {
	position: absolute;
	inset: 0;
}

.card--clone {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
	margin: 0;
	animation: none;
	translate: none;
	scale: none;
	cursor: default;
}

.profile__back {
	overflow: hidden;
	opacity: 0;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent 40%),
		var(--card);
	border: 0.1rem solid rgba(255, 255, 255, 0.12);
	border-top: 0.4rem solid var(--rank-color);
	box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.6), 0 0 6rem color-mix(in srgb, var(--rank-color) 15%, transparent);
}

.profile__panel {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: var(--photo-w, 42rem) 1fr;
	width: 140rem;
	height: 78rem;
}

.profile__photo {
	position: relative;
	overflow: hidden;
}



.profile__badge {
	position: absolute;
	left: 2.4rem;
	bottom: 2.4rem;
	z-index: 1;
	padding: 0.6rem 1.4rem;
	background: var(--brand);
	color: var(--brand-ink);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
}

.profile__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
	min-width: 0;
	padding: 3.6rem 4.4rem 3.6rem 2rem;
	overflow: hidden;
}

@keyframes profileIn {
	from {
		opacity: 0;
		transform: translateY(1.6rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.profile__close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 4.4rem;
	height: 4.4rem;
	background: transparent;
	border: 0.15rem solid rgba(255, 255, 255, 0.2);
	color: var(--text);
	font-size: 1.8rem;
	cursor: pointer;
	transition: 0.2s;
}

.profile__close:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.profile__label {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	color: var(--muted);
}

.profile__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
	padding-right: 6rem;
	min-height: 10rem;
}

.profile__team {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--brand);
}

.profile__name {
	margin-top: 0.4rem;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 5.6rem;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.profile__rank {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	flex-shrink: 0;
}

.profile__rank-icon {
	width: 8.8rem;
	height: 8.8rem;
	object-fit: contain;
	filter: drop-shadow(0 0 1.6rem color-mix(in srgb, var(--rank-color) 40%, transparent));
}

.profile__rank-name {
	margin-top: 0.2rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2.8rem;
	text-transform: uppercase;
	color: var(--rank-color);
}

.profile__rr {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.6rem;
	font-size: 1.3rem;
	color: var(--muted);
}

.profile__rr-bar {
	width: 16rem;
	height: 0.6rem;
	background: rgba(255, 255, 255, 0.1);
}

.profile__rr-bar i {
	display: block;
	height: 100%;
	background: var(--rank-color);
}

.profile__peak {
	margin-left: 1rem;
	padding-left: 2.4rem;
	border-left: 0.1rem solid rgba(255, 255, 255, 0.1);
	font-size: 1.3rem;
	text-align: center;
	color: var(--muted);
}

.profile__peak img {
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	margin: 0.6rem auto 0.4rem;
	object-fit: contain;
}

.profile__about p {
	margin-top: 0.6rem;
	max-width: 80rem;
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--text);
}

.profile__tabs {
	display: flex;
	gap: 0.4rem;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.profile__tab {
	margin-bottom: -0.1rem;
	padding: 0.8rem 2.4rem;
	background: transparent;
	border-bottom: 0.3rem solid transparent;
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	transition: 0.2s;
}

.profile__tab:hover {
	color: var(--text);
}

.profile__tab.is-active {
	color: var(--text);
	border-color: var(--brand);
}

.profile__stats {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
}

.profile__empty {
	padding: 6rem 0;
	font-size: 1.6rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--muted);
}

.profile__tiles {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}

.profile__tile {
	padding: 1.4rem 1.6rem;
	background: rgba(255, 255, 255, 0.04);
	border-left: 0.2rem solid var(--rank-color);
	animation: profileIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.profile__tile:nth-child(2) {
	animation-delay: 0.04s;
}

.profile__tile:nth-child(3) {
	animation-delay: 0.08s;
}

.profile__tile:nth-child(4) {
	animation-delay: 0.12s;
}

.profile__tile:nth-child(5) {
	animation-delay: 0.16s;
}

.profile__tile:nth-child(6) {
	animation-delay: 0.2s;
}

.profile__value {
	margin-top: 0.4rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1.1;
}

.profile__hint {
	margin-top: 0.2rem;
	font-size: 1.2rem;
	color: var(--muted);
}

.profile__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	margin: 0.6rem 0;
}

.profile__row {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-top: 0.6rem;
	padding: 0.8rem 1.4rem;
	background: rgba(255, 255, 255, 0.04);
}

.profile__row--map {
	min-height: 5.2rem;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 100rem rgba(15, 25, 35, 0.72);
}

.profile__agent {
	width: 3.6rem;
	height: 3.6rem;
}

.profile__row-name {
	flex: 1;
	font-weight: 500;
	font-size: 1.6rem;
}

.profile__row-name span,
.profile__row-stat span {
	display: block;
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--muted);
	text-transform: uppercase;
}

.profile__row-stat {
	min-width: 6rem;
	font-family: "Oswald", sans-serif;
	font-size: 1.8rem;
	text-align: right;
}

.profile__recent {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 0.8rem;
}

a.profile__game {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.8rem 0 0.6rem;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 0.3rem solid var(--muted);
	color: var(--text);
	transition: background 0.2s, translate 0.2s;
}

a.profile__game:hover {
	background: rgba(255, 255, 255, 0.09);
	translate: 0 -0.3rem;
}

a.profile__game--win {
	border-color: var(--ready);
}

a.profile__game--loss {
	border-color: var(--loss);
}

.profile__game img {
	width: 3.4rem;
	height: 3.4rem;
}

.profile__game span {
	font-family: "Oswald", sans-serif;
	font-size: 1.5rem;
}

.profile__game small {
	font-size: 1.1rem;
	color: var(--muted);
}

.profile .is-plus {
	color: var(--ready);
}

.profile .is-minus {
	color: var(--loss);
}

.profile__head > div:first-child {
	flex: 1;
	min-width: 0;
}

.profile__team span {
	margin-left: 1rem;
	letter-spacing: 0.05rem;
	text-transform: none;
	color: var(--muted);
}

.profile__front {
	pointer-events: none;
}


@keyframes profileOut {
	to {
		opacity: 0;
		translate: 0 1.5rem;
	}
}

.lobby.is-returning .card {
	animation-name: cardReturn;
}

.lobby.is-returning .play-btn {
	animation-name: cardReturn;
	animation-delay: 0.3s;
}

@keyframes cardReturn {
	from {
		opacity: 0;
		transform: translateY(6rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 45%, #1e0c12 0%, #0d0609 55%, #050304 100%);
}

.bg > * {
	position: absolute;
	pointer-events: none;
}

.bg__glow {
	left: 50%;
	top: 50%;
	width: 140rem;
	height: 90rem;
	translate: -50% -50%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand) 28%, transparent), color-mix(in srgb, var(--brand) 8%, transparent) 40%, transparent 70%);
	animation: bgPulse 7s ease-in-out infinite alternate;
}

.bg__logo {
	left: 50%;
	top: 46%;
	width: 130rem;
	height: 130rem;
	translate: -50% -50%;
	object-fit: contain;
	opacity: 0.07;
	filter: drop-shadow(0 0 4rem color-mix(in srgb, var(--brand) 90%, transparent));
	animation: bgLogo 12s ease-in-out infinite alternate;
}

.bg__beams {
	left: 50%;
	top: -10rem;
	width: 0;
	height: 0;
}

.bg__beams i {
	position: absolute;
	left: -9rem;
	top: 0;
	width: 18rem;
	height: 140vh;
	background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 50%, transparent), color-mix(in srgb, var(--brand) 14%, transparent) 45%, transparent 80%);
	filter: blur(1.4rem);
	mix-blend-mode: screen;
	transform-origin: 50% 0;
	rotate: var(--r);
	animation: bgBeam var(--t) ease-in-out infinite alternate;
}

.bg__beams i:nth-child(1) {
	--r: -38deg;
	--t: 11s;
}

.bg__beams i:nth-child(2) {
	--r: -18deg;
	--t: 8s;
	animation-delay: -3s;
}

.bg__beams i:nth-child(3) {
	--r: 0deg;
	--t: 13s;
	width: 20rem;
	left: -10rem;
	animation-delay: -6s;
}

.bg__beams i:nth-child(4) {
	--r: 18deg;
	--t: 9s;
	animation-delay: -2s;
}

.bg__beams i:nth-child(5) {
	--r: 38deg;
	--t: 12s;
	animation-delay: -5s;
}

.bg__floor {
	left: -50%;
	right: -50%;
	bottom: -2rem;
	height: 110vh;
	background-image:
		linear-gradient(color-mix(in srgb, var(--brand) 60%, transparent) 0.15rem, transparent 0.15rem),
		linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent) 0.15rem, transparent 0.15rem);
	background-size: 8rem 8rem;
	transform: perspective(50rem) rotateX(72deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 25%, transparent 90%);
	mask-image: linear-gradient(to top, #000 25%, transparent 90%);
	animation: bgFloor 4s linear infinite;
}

.bg__vignette {
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.75) 100%);
}

@keyframes bgPulse {
	from {
		opacity: 0.65;
		scale: 0.95;
	}

	to {
		opacity: 1;
		scale: 1.05;
	}
}

@keyframes bgLogo {
	from {
		scale: 1;
		opacity: 0.07;
	}

	to {
		scale: 1.06;
		opacity: 0.12;
	}
}

@keyframes bgBeam {
	from {
		rotate: calc(var(--r) - 6deg);
		opacity: 0.5;
	}

	to {
		rotate: calc(var(--r) + 6deg);
		opacity: 1;
	}
}

@keyframes bgFloor {
	to {
		background-position: 0 8rem;
	}
}

.bg:not(.bg--logo) :is(.bg__glow, .bg__beams, .bg__floor),
.bg:not(.bg--particles) :is(.bg__spot, .bg__particles, .bg__grain) {
	display: none;
}

.bg--particles {
	background: radial-gradient(ellipse at 50% 55%, #170a0e 0%, #0a0507 50%, #030203 100%);
}

.bg__spot {
	left: 50%;
	top: 55%;
	width: 130rem;
	height: 80rem;
	translate: -50% -50%;
	background:
		radial-gradient(ellipse at center, color-mix(in srgb, var(--brand) 45%, transparent), color-mix(in srgb, var(--brand) 12%, transparent) 45%, transparent 70%);
	animation: bgPulse 9s ease-in-out infinite alternate;
}

.bg__particles {
	inset: 0;
}

.bg__particles span {
	position: absolute;
	bottom: -2rem;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: #ff7a5c;
	box-shadow: 0 0 0.8rem var(--brand), 0 0 1.6rem color-mix(in srgb, var(--brand) 60%, transparent);
	opacity: 0;
	animation: bgRise var(--d) linear var(--delay) infinite;
}

.bg__particles span.is-dust {
	background: rgba(255, 225, 215, 0.8);
	box-shadow: none;
	filter: blur(0.25rem);
}

@keyframes bgRise {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}

	10%,
	75% {
		opacity: var(--o);
	}

	50% {
		transform: translate(calc(var(--drift) * 0.4), -55vh);
	}

	100% {
		transform: translate(var(--drift), -110vh);
		opacity: 0;
	}
}

.bg__grain {
	inset: -50%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.07;
	animation: bgGrain 0.8s steps(5) infinite;
}

@keyframes bgGrain {
	0% {
		translate: 0 0;
	}

	20% {
		translate: -3% 2%;
	}

	40% {
		translate: 2% -3%;
	}

	60% {
		translate: -2% -1%;
	}

	80% {
		translate: 3% 3%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg * {
		animation: none !important;
	}
}

.is-loading .card,
.is-loading .play-btn {
	animation-play-state: paused;
}

.preloader {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.preloader.is-done {
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
}

.preloader.is-done .preloader__logo,
.preloader.is-done .preloader__title {
	animation-play-state: paused;
}


.preloader__logo {
	width: 44rem;
	height: 44rem;
	object-fit: contain;
	animation: preloaderLogo 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, preloaderBreath 3s 1.2s ease-in-out infinite;
}

@keyframes preloaderLogo {
	from {
		opacity: 0;
		scale: 0.92;
	}
}

@keyframes preloaderBreath {
	50% {
		opacity: 0.75;
	}
}

.preloader__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1rem;
	background: rgba(255, 255, 255, 0.12);
}

.preloader__bar i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--brand);
	box-shadow: 0 0 1.2rem var(--brand);
}

.preloader__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.preloader__title {
	margin-top: -7rem;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 5.6rem;
	letter-spacing: 0.4rem;
	margin-right: -0.4rem;
	text-transform: uppercase;
	animation: preloaderLogo 1.2s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.preloader__value {
	position: absolute;
	right: 4rem;
	bottom: 3.4rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 4.8rem;
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.preloader__value span {
	color: var(--brand);
}

.sound-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	background: transparent;
	border: 0.1rem solid rgba(255, 255, 255, 0.2);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.sound-toggle:hover {
	border-color: var(--brand);
}

.sound-toggle svg {
	width: 1.8rem;
	height: 1.8rem;
}

.sound-toggle path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sound-toggle .sound-toggle__body {
	fill: currentColor;
}

.sound-toggle__mute,
.sound-toggle.is-muted .sound-toggle__wave {
	display: none;
}

.sound-toggle.is-muted {
	color: var(--muted);
}

.sound-toggle.is-muted .sound-toggle__mute {
	display: block;
}

.banners {
	position: absolute;
	top: 7rem;
	right: calc((100% - 100vw) / 2 + var(--wrapper-padding));
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	width: 26rem;
	transition: opacity 0.45s ease, translate 0.45s ease;
}

.lobby.is-focus .banners {
	opacity: 0;
	translate: 3rem 0;
	pointer-events: none;
}

a.banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: 1.8rem;
	background: var(--card);
	color: var(--text);
	animation: cardIn 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	transition: translate 0.25s ease;
}

a.banner:hover {
	translate: -0.6rem 0;
}

.is-loading .banner {
	animation-play-state: paused;
}

.lobby.is-returning .banner {
	animation-name: cardReturn;
}

.banner--twitch {
	--accent: #9146ff;
	aspect-ratio: 1;
}

.banner--telegram {
	--accent: #29a9eb;
	height: 17rem;
}

.banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transition: scale 0.5s ease;
}

a.banner:hover .banner__bg {
	scale: 1.06;
}

.banner--telegram .banner__bg {
	inset: auto -4rem -4rem auto;
	width: 18rem;
	height: 18rem;
	object-fit: contain;
	opacity: 0.12;
}

.banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--accent) 30%, rgba(10, 8, 14, 0.92)) 90%);
}

.banner--telegram::after {
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, transparent), rgba(10, 14, 22, 0.9) 70%);
}

.banner__content {
	position: relative;
	z-index: 1;
}

.banner__icon {
	display: block;
	width: 3.6rem;
	height: 3.6rem;
	margin-bottom: 1rem;
	fill: #fff;
	filter: drop-shadow(0 0 1.2rem var(--accent));
}

.banner__title {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1;
	text-transform: uppercase;
}

.banner__text {
	margin-top: 0.6rem;
	font-size: 1.4rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.75);
}

.banner__cta {
	display: inline-block;
	margin-top: 1.2rem;
	padding: 0.5rem 1.2rem;
	background: var(--accent);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
}

.banner--twitch .banner__bg {
	object-position: center;
}

a.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 0.1rem solid rgba(255, 255, 255, 0.14);
	pointer-events: none;
	transition: border-color 0.25s ease;
}

a.banner:hover::before {
	border-color: var(--accent);
}

a.banner--news {
	--accent: #29a9eb;
	height: 17rem;
	padding: 0;
	align-items: stretch;
}

.banner--news::after {
	background: linear-gradient(180deg, rgba(10, 14, 22, 0.3), rgba(10, 14, 22, 0.88) 85%);
}

.news__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	mask-image: linear-gradient(180deg, #000 70%, transparent);
	filter: blur(0.1rem);
	transition: scale 0.5s ease;
}

a.banner--news:hover .news__bg {
	scale: 1.06;
}

.news {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding: 1.6rem;
}


.news__head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.news__head .banner__icon {
	width: 2.2rem;
	height: 2.2rem;
	margin: 0;
}

.news__title {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	text-transform: uppercase;
}

.news__date {
	margin-left: auto;
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.7);
}

.news__text {
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.4rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.8);
	white-space: pre-line;
}

.news__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.news__foot .banner__cta {
	margin-top: 0;
}

.news__views {
	font-size: 1.3rem;
	color: rgba(255, 255, 255, 0.7);
}

.banner--telegram .banner__title {
	font-size: 2.8rem;
}

a.banner[hidden] {
	display: none;
}

.banner--twitch.is-live::after {
	background: linear-gradient(180deg, rgba(10, 8, 14, 0.1) 15%, rgba(10, 8, 14, 0.55) 45%, color-mix(in srgb, var(--accent) 25%, rgba(10, 8, 14, 0.95)) 85%);
}

.banner__live {
	position: absolute;
	top: 1.4rem;
	left: 1.4rem;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem 1rem;
	background: #eb0400;
	box-shadow: 0 0 2rem rgba(235, 4, 0, 0.45);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.banner__live i {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: #fff;
	animation: liveDot 1.4s ease-in-out infinite;
}

.banner__live b {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.3rem;
	padding-left: 0.8rem;
	border-left: 0.1rem solid rgba(255, 255, 255, 0.45);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.banner__live svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

@keyframes liveDot {
	50% {
		opacity: 0.3;
	}
}

.banner__game {
	margin-top: 0.6rem;
	font-family: "Oswald", sans-serif;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9a8ff;
}

.banner__text--clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #fff;
}

.banners__live {
	display: contents;
}

.banners:has(.banner--stream) .banner--twitch {
	aspect-ratio: 5 / 4;
}

.banners:has(.banner--stream) .banner--twitch .banner__icon {
	display: none;
}

a.banner--stream {
	--accent: #9146ff;
	align-items: center;
	gap: 1.4rem;
	padding: 1.1rem 1.6rem 1.1rem 1.4rem;
	background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 28%, var(--card)), var(--card) 75%);
}

.banner--stream::after {
	display: none;
}

.banner__avatar {
	position: relative;
	flex: none;
	width: 4.6rem;
	height: 4.6rem;
	border: 0.2rem solid #eb0400;
	border-radius: 50%;
	background: #1b1426;
}

.banner__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.banner__avatar i {
	position: absolute;
	left: 50%;
	bottom: -0.6rem;
	translate: -50% 0;
	padding: 0 0.5rem;
	background: #eb0400;
	border-radius: 0.3rem;
	font-family: "Oswald", sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.banner__who {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.banner__who b,
.banner__who span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.banner__who b {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
}

.banner__who span {
	font-family: "Oswald", sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c9a8ff;
}

.banner__viewers {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	font-family: "Oswald", sans-serif;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 0.85);
}

.banner__viewers svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: #eb0400;
}


.profile__front .profile__badge {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.profile.is-open .profile__front .profile__badge {
	opacity: 1;
}

.profile__front .card__frame {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.profile__fade {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var(--photo-w);
	height: 100%;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(18, 26, 36, 0) 40%, rgba(18, 26, 36, 0.6) 75%, rgba(18, 26, 36, 0.95)),
		linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--brand) 0%, transparent));
}

.profile__front .profile__badge {
	z-index: 2;
}

.profile__front .card__photo {
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	filter: grayscale(0) contrast(1.05);
	scale: 1.04;
	transition: none;
}

.leave {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	background: #000;
	clip-path: inset(100% 0 0 0);
	pointer-events: none;
}

.leave.is-in {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
	transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.leave.is-out {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}

.leave__logo {
	width: 24rem;
	height: 24rem;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.leave__text {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	font-size: 2.2rem;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.leave.is-in .leave__logo,
.leave.is-in .leave__text {
	opacity: 1;
	transition-delay: 0.6s;
}

.lobby__title {
	position: absolute;
	bottom: calc(100% + 3rem);
	left: 50%;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: 2rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2.8rem;
	letter-spacing: 0.4rem;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--text);
	animation: cardIn 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	transition: opacity 0.3s ease;
}

.lobby__title::before,
.lobby__title::after {
	content: "";
	width: 6rem;
	height: 0.1rem;
	background: linear-gradient(90deg, transparent, var(--brand));
}

.lobby__title::after {
	background: linear-gradient(90deg, var(--brand), transparent);
}

.is-loading .lobby__title {
	animation-play-state: paused;
}

.lobby.is-returning .lobby__title {
	animation-name: cardReturn;
}

.lobby.is-focus .lobby__title {
	opacity: 0;
}

.profile__maps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.profile__maps .profile__row--map {
	min-height: 0;
	margin-top: 0;
	padding: 0.7rem 1rem;
	gap: 0.6rem;
}

.profile__maps .profile__row-name {
	font-size: 1.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile__maps .profile__row-stat {
	min-width: 0;
	font-size: 1.5rem;
}

.profile__cols > div {
	display: flex;
	flex-direction: column;
}

.profile__cols .profile__maps {
	flex: 1;
	grid-auto-rows: 1fr;
}

.premier {
	position: absolute;
	top: 3.2rem;
	left: var(--wrapper-padding);
	z-index: 6;
	width: 30rem;
	padding: 1.6rem 1.6rem 1.2rem;
	background: linear-gradient(160deg, rgba(28, 18, 24, 0.82), rgba(12, 16, 22, 0.78));
	border: 0.1rem solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.45), 0 0 4rem color-mix(in srgb, var(--brand) 8%, transparent);
	backdrop-filter: blur(1rem);
	animation: cardIn 0.7s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	transition: opacity 0.45s ease, translate 0.45s ease;
}

.premier[hidden] {
	display: none;
}

.premier::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0.3rem;
	background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 0%, transparent));
}

.is-loading .premier {
	animation-play-state: paused;
}

.lobby.is-focus .premier {
	opacity: 0;
	translate: -3rem 0;
	pointer-events: none;
}

.premier__head {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.premier__kicker {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand);
}

.premier__live {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent);
	animation: premierLive 1.6s ease-out infinite;
}

@keyframes premierLive {
	to {
		box-shadow: 0 0 0 0.9rem color-mix(in srgb, var(--brand) 0%, transparent);
	}
}

.premier__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.1;
	white-space: nowrap;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
}

.premier__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 1.4rem 0 1.2rem;
	border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.premier__stats div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 0;
}

.premier__stats div + div {
	padding-left: 1.2rem;
	border-left: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.premier__stats b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--text);
}

.premier__stats span {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

.premier__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.premier__match {
	position: relative;
	display: grid;
	grid-template-columns: 8.4rem 1fr auto;
	align-items: center;
	gap: 1.2rem;
	padding-right: 1.2rem;
	background: rgba(255, 255, 255, 0.04);
	border-left: 0.3rem solid var(--result, var(--muted));
	transition: background 0.25s ease, translate 0.25s ease;
}

.premier__match:hover {
	background: rgba(255, 255, 255, 0.09);
	translate: 0.4rem 0;
}

.premier__match--win {
	--result: var(--ready);
}

.premier__match--loss {
	--result: var(--loss);
}

.premier__map {
	display: flex;
	align-items: flex-end;
	height: 4.6rem;
	padding: 0.4rem 0.6rem;
	background: #1b232c center / cover no-repeat;
	box-shadow: inset 0 -2.4rem 2rem -1rem rgba(0, 0, 0, 0.75);
}

.premier__map b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.premier__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.premier__res {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--result);
}

.premier__meta {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.premier__match.is-fresh .premier__meta {
	color: var(--text);
}

.premier__score {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: var(--text);
}

.premier__score i {
	margin: 0 0.3rem;
	font-style: normal;
	color: var(--muted);
}

.premier__top {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.premier__season {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.premier__season button {
	--seg: rgba(255, 255, 255, 0.1);
	flex: 1;
	height: 1.4rem;
	background: linear-gradient(var(--seg), var(--seg)) center / 100% 0.5rem no-repeat;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.premier__season button:hover:not(:disabled) {
	filter: brightness(1.6);
}

.premier__season button:disabled {
	--seg: rgba(255, 255, 255, 0.05);
	cursor: default;
}

.premier__season button.is-played {
	--seg: color-mix(in srgb, var(--brand) 45%, transparent);
}

.premier__season button.is-sel {
	--seg: var(--brand);
	filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--brand) 80%, transparent));
}

.premier__season b {
	margin-left: 0.6rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--text);
}

.premier__season em {
	font-style: normal;
	color: var(--muted);
}

.premier__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.premier__nav {
	display: flex;
	gap: 0.4rem;
}

.premier__nav button {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
	border: 0.1rem solid rgba(255, 255, 255, 0.12);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.premier__nav svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.premier__nav button:hover:not(:disabled) {
	color: var(--brand-ink);
	background: var(--brand);
	border-color: var(--brand);
}

.premier__nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

.premier__head + .premier__next-map {
	margin-top: 1.4rem;
}

.premier__next-map + .premier__games,
.premier__list + .premier__games {
	margin-top: 0.6rem;
}

.premier__empty {
	margin-top: 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	color: var(--muted);
}

.premier__games {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.premier__zone {
	display: block;
	margin-top: 0.8rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.premier__next-map {
	display: flex;
	align-items: flex-end;
	height: 5.6rem;
	padding: 0.6rem 1rem;
	background: #1b232c center / cover no-repeat;
	box-shadow: inset 0 -3rem 2.4rem -1rem rgba(0, 0, 0, 0.8);
}

.premier__next-map b {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.premier__game {
	display: grid;
	grid-template-columns: 6.4rem 1fr auto;
	align-items: baseline;
	gap: 1rem;
	padding: 0.7rem 1.2rem;
	background: rgba(255, 255, 255, 0.04);
	border-left: 0.3rem solid rgba(255, 255, 255, 0.2);
}

.premier__game b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}

.premier__game span {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.4rem;
	color: var(--text);
	white-space: nowrap;
}

.premier__game em {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	font-style: normal;
	color: var(--muted);
	white-space: nowrap;
}

.premier__game.is-live {
	border-left-color: var(--brand);
}

.premier__game.is-live em {
	color: var(--brand);
}

.premier__season button.is-po {
	--seg: color-mix(in srgb, var(--gold) 35%, transparent);
}

.premier__season button.is-po.is-sel {
	--seg: var(--gold);
	filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--gold) 80%, transparent));
}

.premier__cup {
	position: relative;
	display: flex;
	align-items: center;
	height: 5.6rem;
	margin-top: 1.2rem;
	padding: 0 1.4rem 0 1.6rem;
	overflow: hidden;
	background: #16120b;
	border-bottom: 0.2rem solid var(--gold);
}

.premier__cup::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(14, 11, 6, 0.94) 30%, rgba(14, 11, 6, 0.5) 75%, rgba(14, 11, 6, 0.2)),
		linear-gradient(0deg, color-mix(in srgb, var(--gold) 30%, transparent), transparent 65%);
}

.premier__cup-maps {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 0.2rem;
}

.premier__cup-maps i {
	flex: 1;
	background: center / cover no-repeat;
	filter: saturate(0.7);
}

.premier__cup-text,
.premier__cup-icon {
	position: relative;
	z-index: 2;
}

.premier__cup-text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.premier__cup-text em {
	font-family: 'Oswald', sans-serif;
	font-size: 1.1rem;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.premier__cup-text b {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.premier__cup-icon {
	width: 3.8rem;
	height: 3.8rem;
	margin-left: auto;
	fill: var(--gold);
	filter: drop-shadow(0 0 1.2rem color-mix(in srgb, var(--gold) 60%, transparent));
}

.premier__cup-icon path + path {
	fill: none;
	stroke: var(--gold);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.premier__goals {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 1rem 0 0.8rem;
	border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.premier__goal {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.8rem 1.2rem 1rem 0;
}

.premier__goal + .premier__goal {
	padding: 0.8rem 0 1rem 1.2rem;
	border-left: 0.1rem solid rgba(255, 255, 255, 0.08);
}

.premier__goal span {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--muted);
}

.premier__goal b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--text);
}

.premier__goal em {
	font-size: 1.4rem;
	font-style: normal;
	color: var(--muted);
}

.premier__goal i {
	--bar: var(--gold);
	position: relative;
	height: 0.4rem;
	margin-top: 0.3rem;
	background: rgba(255, 255, 255, 0.08);
}

.premier__goal i::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p);
	background: var(--bar);
	box-shadow: 0 0 1rem color-mix(in srgb, var(--bar) 70%, transparent);
}

.premier__goal.is-ok b {
	color: var(--ready);
}

.premier__goal.is-ok i {
	--bar: var(--ready);
}

.premier__verdict {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--muted);
}

.premier__verdict b {
	font-weight: 700;
	white-space: nowrap;
	color: var(--gold);
}

.premier__game.is-done {
	opacity: 0.45;
}

.side {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	left: calc((100% - 100vw) / 2 + var(--wrapper-padding));
	width: 26rem;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	animation: cardIn 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	transition: opacity 0.45s ease, translate 0.45s ease;
}

.is-loading .side {
	animation-play-state: paused;
}

.lobby.is-returning .side {
	animation-name: cardReturn;
}

.lobby.is-focus .side {
	opacity: 0;
	translate: -3rem -50%;
	pointer-events: none;
}

.side__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.4rem;
	padding: 0 1.4rem;
	background: rgba(18, 26, 36, 0.9);
	border: 0.1rem solid rgba(255, 255, 255, 0.14);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	cursor: default;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.side__item:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(30, 40, 52, 0.95);
}

.side__icon {
	width: 2rem;
	height: 2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.side__item.is-locked {
	color: var(--muted);
	cursor: not-allowed;
}

.side__lock {
	margin: 0 1rem 0 auto;
	font-size: 1.1rem;
	font-style: normal;
	letter-spacing: 0.06em;
	color: var(--brand);
}

.side__item.is-denied {
	animation: sideDenied 0.4s ease;
}

@keyframes sideDenied {
	20%, 60% {
		translate: -0.6rem 0;
	}
	40%, 80% {
		translate: 0.6rem 0;
	}
}

.side__pop {
	position: absolute;
	top: 0;
	left: calc(100% + 1rem);
	width: 30rem;
	padding: 0.6rem;
	background: rgba(12, 16, 22, 0.97);
	border: 0.1rem solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
	opacity: 0;
	translate: -1rem 0;
	pointer-events: none;
	transition: opacity 0.2s ease, translate 0.2s ease;
}

.side__pop::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 1rem;
}

.side__item:hover .side__pop {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
}

.side__player {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	padding: 0.8rem;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}

.side__player:hover {
	background: rgba(255, 255, 255, 0.07);
}

.side__avatar {
	flex: 0 0 4.4rem;
	width: 4.4rem;
	height: 4.4rem;
	object-fit: cover;
	object-position: center 20%;
	border: 0.1rem solid rgba(255, 255, 255, 0.2);
}

.side__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.side__name {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--gold);
	text-transform: none;
	letter-spacing: 0;
}

.side__tag {
	font-size: 1.2rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
}

.side__rank {
	width: 3.2rem;
	height: 3.2rem;
	object-fit: contain;
}

.sub-stage {
	position: fixed;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	visibility: hidden;
	pointer-events: none;
}

.lobby.is-focus .card,
.lobby.is-focus .play-btn,
.lobby.is-focus .banner,
.lobby.is-focus .side,
.lobby.is-focus .premier,
.lobby.is-focus .lobby__title {
	animation: none;
}

.profile__peak-elo {
	margin-top: 0.2rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--text);
}

.play-btn.is-searching span {
	background: #1d2a36;
	color: var(--text);
	animation: searchPulse 1.2s ease-in-out infinite;
}

.play-btn.is-searching span b {
	font-weight: inherit;
	font-variant-numeric: tabular-nums;
}

.play-btn.is-searching span em {
	display: none;
	font-style: normal;
}

.play-btn.is-searching:hover span {
	background: #2a3b4b;
	animation: none;
}

.play-btn.is-searching:hover span:has(em) b {
	display: none;
}

.play-btn.is-searching:hover span em {
	display: inline;
}

@keyframes searchPulse {
	50% {
		background: #2a3b4b;
	}
}

.mf {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	background: rgba(5, 5, 8, 0.6);
	animation: profileFade 0.4s ease both;
}

.mf__band {
	position: relative;
	width: 100%;
	height: 30rem;
	overflow: hidden;
	border-top: 0.2rem solid var(--brand);
	border-bottom: 0.2rem solid var(--brand);
	animation: mfIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes mfIn {
	from {
		clip-path: inset(50% 0 50% 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

.mf__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.45);
}

.mf__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 1.4rem;
}

.mf__title {
	position: relative;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 9rem;
	line-height: 1;
	letter-spacing: 0.4rem;
	text-transform: uppercase;
	text-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.6);
}

.mf__sub {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	font-size: 2rem;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: var(--ready);
}

.mf__bar {
	width: 50rem;
	height: 0.6rem;
	margin-top: 1.6rem;
	background: rgba(255, 255, 255, 0.15);
}

.mf__bar i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--ready);
	box-shadow: 0 0 1.2rem var(--ready);
	transition: width 0.4s ease;
}

.mf__status {
	font-size: 1.5rem;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.chaos-1 .mf__bar i {
	background: var(--brand);
	box-shadow: 0 0 1.2rem var(--brand);
}

.chaos-1 .mf__title::before,
.chaos-1 .mf__title::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
}

.chaos-1 .mf__title::before {
	color: #0ff;
	animation: glitchA 0.35s steps(2) infinite;
	mix-blend-mode: screen;
}

.chaos-1 .mf__title::after {
	color: #f0f;
	animation: glitchB 0.3s steps(2) infinite;
	mix-blend-mode: screen;
}

@keyframes glitchA {
	0% {
		clip-path: inset(10% 0 60% 0);
		transform: translate(-0.6rem, 0);
	}

	50% {
		clip-path: inset(55% 0 20% 0);
		transform: translate(0.6rem, 0);
	}

	100% {
		clip-path: inset(30% 0 40% 0);
		transform: translate(-0.3rem, 0);
	}
}

@keyframes glitchB {
	0% {
		clip-path: inset(70% 0 5% 0);
		transform: translate(0.6rem, 0);
	}

	50% {
		clip-path: inset(5% 0 75% 0);
		transform: translate(-0.6rem, 0);
	}

	100% {
		clip-path: inset(40% 0 35% 0);
		transform: translate(0.3rem, 0);
	}
}

.chaos-1 body {
	animation: chaosShake 0.25s linear infinite;
}

.chaos-2 body {
	animation-duration: 0.12s;
}

@keyframes chaosShake {
	0%,
	100% {
		translate: 0 0;
	}

	25% {
		translate: -0.4rem 0.2rem;
	}

	50% {
		translate: 0.3rem -0.3rem;
	}

	75% {
		translate: -0.2rem -0.2rem;
	}
}

.chaos-2 .bg {
	filter: hue-rotate(160deg) saturate(3) contrast(1.4);
}

.chaos-2 .bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 0.2rem, transparent 0.2rem 0.6rem);
	animation: chaosScan 0.2s steps(3) infinite;
}

@keyframes chaosScan {
	to {
		translate: 0 0.6rem;
	}
}

.chaos-2 .mf__map {
	filter: brightness(0.6) hue-rotate(120deg) saturate(4) invert(0.15);
}

.chaos-3 body {
	animation: none;
}

.mf-error-wrap {
	position: fixed;
	inset: 0;
	z-index: 160;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	animation: profileFade 0.5s ease both;
}

.mf-error {
	width: 56rem;
	padding: 4rem;
	background: #0f1923;
	border: 0.1rem solid rgba(255, 255, 255, 0.15);
	border-top: 0.4rem solid var(--brand);
	text-align: center;
	animation: cardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mf-error__code {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: 0.3rem;
	color: var(--brand);
}

.mf-error__title {
	margin-top: 1rem;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 4rem;
	text-transform: uppercase;
}

.mf-error__text {
	margin-top: 1.4rem;
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--muted);
}

.mf-error__btn {
	margin-top: 3rem;
	padding: 1.2rem 4rem;
	background: var(--brand);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--brand-ink);
	cursor: pointer;
	transition: background 0.2s ease;
}

.mf-error__btn:hover {
	background: color-mix(in srgb, var(--brand), #fff 15%);
}

a.topbar__link--market {
	color: #c99bff;
}

a.topbar__link--market::after {
	background: linear-gradient(90deg, #7b3cff, #ff4fd8);
}

.market {
	position: relative;
	height: calc(100vh - 6.4rem);
	overflow-y: auto;
	padding: 5rem 0 6rem;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(123, 60, 255, 0.35), transparent 55%),
		radial-gradient(ellipse at 85% 100%, rgba(255, 79, 216, 0.22), transparent 55%),
		rgba(8, 5, 20, 0.85);
}

.market::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(0.15rem 0.15rem at 10% 20%, #fff, transparent),
		radial-gradient(0.12rem 0.12rem at 30% 70%, #fff, transparent),
		radial-gradient(0.18rem 0.18rem at 55% 30%, #d9c2ff, transparent),
		radial-gradient(0.12rem 0.12rem at 75% 15%, #fff, transparent),
		radial-gradient(0.15rem 0.15rem at 88% 60%, #ffd2f5, transparent),
		radial-gradient(0.1rem 0.1rem at 45% 90%, #fff, transparent),
		radial-gradient(0.14rem 0.14rem at 65% 55%, #fff, transparent);
	opacity: 0.6;
	pointer-events: none;
	animation: marketStars 4s ease-in-out infinite alternate;
}

@keyframes marketStars {
	to {
		opacity: 0.25;
	}
}

.market__inner {
	position: relative;
	width: 150rem;
	margin: 0 auto;
}

.market__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 4rem;
	animation: cardIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.market__label {
	font-size: 1.4rem;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: #c99bff;
}

.market__title {
	margin-top: 0.6rem;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 7.2rem;
	line-height: 1;
	text-transform: uppercase;
	background: linear-gradient(90deg, #fff, #d7b4ff 50%, #ff7ae2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.market__timer {
	margin-top: 1rem;
	font-size: 1.6rem;
	color: var(--muted);
}

.market__timer b {
	margin-left: 0.6rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}


.vp {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.market__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2rem;
}

.mcard {
	height: 46rem;
	perspective: 120rem;
	cursor: pointer;
	animation: cardIn 0.6s calc(0.1s + var(--i) * 0.07s) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.mcard__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), translate 0.25s ease;
}

.mcard:not(.is-revealed):hover .mcard__inner {
	translate: 0 -1rem;
}

.mcard.is-revealed {
	cursor: default;
}

.mcard.is-revealed .mcard__inner {
	transform: rotateY(180deg);
}

.mcard__back,
.mcard__front {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
}

.mcard__back {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	background:
		radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rarity) 45%, transparent), transparent 60%),
		linear-gradient(160deg, color-mix(in srgb, var(--rarity) 45%, #12102a), #0f0d1c 65%, color-mix(in srgb, var(--rarity) 25%, #0f0d1c));
	border: 0.1rem solid color-mix(in srgb, var(--rarity) 70%, transparent);
	box-shadow: inset 0 0 4rem color-mix(in srgb, var(--rarity) 45%, transparent), 0 0 3rem color-mix(in srgb, var(--rarity) 25%, transparent);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: #fff;
}

.mcard__eye {
	position: relative;
	width: 9rem;
	height: 9rem;
	border: 0.3rem solid #fff;
	border-radius: 50% 0;
	rotate: 45deg;
	box-shadow: 0 0 3rem var(--rarity);
	animation: marketEye 2.4s ease-in-out infinite;
}

.mcard__eye::after {
	content: "";
	position: absolute;
	inset: 2.6rem;
	border-radius: 50%;
	background: var(--rarity);
	box-shadow: 0 0 2rem var(--rarity);
}

@keyframes marketEye {
	50% {
		scale: 1.08;
		box-shadow: 0 0 5rem var(--rarity);
	}
}

.mcard__front {
	display: flex;
	flex-direction: column;
	transform: rotateY(180deg);
	background: linear-gradient(180deg, #1a1530, #0f0d1c);
	border: 0.1rem solid color-mix(in srgb, var(--rarity) 60%, transparent);
	box-shadow: 0 0 3rem color-mix(in srgb, var(--rarity) 25%, transparent);
}

.mcard__discount {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	z-index: 2;
	padding: 0.4rem 1rem;
	background: #ff4fd8;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: #fff;
}

.mcard__image {
	position: relative;
	flex: 1;
	overflow: hidden;
	background: color-mix(in srgb, var(--rarity) 20%, #0f0d1c);
}

.mcard__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mcard__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, #0f0d1c);
}

.mcard__info {
	position: relative;
	padding: 1.4rem 1.6rem 1.6rem;
	border-top: 0.3rem solid var(--rarity);
}

.mcard__rarity {
	font-size: 1.2rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--rarity);
}

.mcard__name {
	margin-top: 0.4rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2.1rem;
	line-height: 1.15;
	text-transform: uppercase;
}

.mcard__prices {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1rem;
	font-family: "Oswald", sans-serif;
}

.mcard__prices s {
	font-size: 1.6rem;
	color: var(--muted);
}

.mcard__prices b {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 2.4rem;
	color: #fff;
}

.mcard__buy {
	width: 100%;
	margin-top: 1.4rem;
	padding: 1rem;
	background: linear-gradient(90deg, #7b3cff, #ff4fd8);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.mcard__buy:hover {
	filter: brightness(1.15);
}

.mcard__stamp {
	position: absolute;
	top: 35%;
	left: 50%;
	z-index: 3;
	padding: 0.6rem 2.4rem;
	border: 0.4rem solid var(--loss);
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 3.6rem;
	letter-spacing: 0.4rem;
	text-transform: uppercase;
	color: var(--loss);
	background: rgba(15, 13, 28, 0.6);
	translate: -50% -50%;
	rotate: -14deg;
	opacity: 0;
	scale: 1.6;
	transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.4);
	pointer-events: none;
}

.mcard.is-bought .mcard__stamp {
	opacity: 1;
	scale: 1;
}

.mcard.is-bought .mcard__buy {
	opacity: 0.35;
	pointer-events: none;
}

.mcard.is-bought .mcard__image img {
	filter: grayscale(0.7);
}

.market__toast {
	position: fixed;
	left: 50%;
	bottom: 4rem;
	z-index: 40;
	padding: 1.4rem 2.6rem;
	background: rgba(26, 11, 61, 0.95);
	border: 0.1rem solid rgba(201, 155, 255, 0.5);
	font-size: 1.6rem;
	color: #f2e8ff;
	translate: -50% 2rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, translate 0.25s ease;
}

.market__toast.is-shown {
	opacity: 1;
	translate: -50% 0;
}


.order {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
}

.order[hidden] {
	display: none;
}

.order__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 5, 20, 0.8);
	animation: profileFade 0.3s ease both;
}

.order__box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 52rem;
	padding: 3.6rem;
	background: linear-gradient(180deg, #1d1538, #0f0d1c);
	border: 0.1rem solid rgba(201, 155, 255, 0.4);
	border-top: 0.4rem solid #ff4fd8;
	box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.6), 0 0 6rem rgba(123, 60, 255, 0.25);
	animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.order__close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	width: 3.6rem;
	height: 3.6rem;
	background: transparent;
	border: 0.1rem solid rgba(255, 255, 255, 0.2);
	color: var(--text);
	font-size: 1.6rem;
	cursor: pointer;
}

.order__close:hover {
	border-color: #ff4fd8;
}

.order__label {
	font-size: 1.3rem;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: #c99bff;
}

.order__item {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 1.2rem;
	background: rgba(123, 60, 255, 0.12);
	border: 0.1rem solid rgba(201, 155, 255, 0.25);
}

.order__item img {
	width: 6.4rem;
	height: 6.4rem;
	object-fit: cover;
	object-position: center 20%;
}

.order__name {
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	text-transform: uppercase;
}

.order__price {
	margin-top: 0.2rem;
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	font-size: 1.8rem;
	color: #ff7ae2;
}

.order__field {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--muted);
}

.order__field input,
.order__field textarea {
	width: 100%;
	padding: 1.2rem 1.4rem;
	background: rgba(255, 255, 255, 0.05);
	border: 0.1rem solid rgba(255, 255, 255, 0.15);
	color: var(--text);
	font-family: inherit;
	font-size: 1.6rem;
	letter-spacing: 0;
	text-transform: none;
	resize: none;
	transition: border-color 0.2s ease;
}

.order__field input:focus,
.order__field textarea:focus {
	border-color: #c99bff;
}

.order__submit {
	margin-top: 0.6rem;
	padding: 1.4rem;
	background: linear-gradient(90deg, #7b3cff, #ff4fd8);
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.order__submit:hover {
	filter: brightness(1.15);
}

.order__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.order__status {
	min-height: 1.8rem;
	font-size: 1.4rem;
	text-align: center;
	color: var(--muted);
}

.order__done {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	text-align: center;
}

.order__done p {
	font-size: 1.6rem;
	color: var(--muted);
}

.order.is-closing .order__backdrop {
	animation: profileFade 0.3s ease reverse both;
}

.order.is-closing .order__box {
	animation: orderOut 0.3s ease both;
}

@keyframes orderOut {
	to {
		opacity: 0;
		transform: translateY(2rem) scale(0.97);
	}
}

.hall__group {
	margin-bottom: 4rem;
	animation: cardIn 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hall__group[hidden] {
	display: none;
}

.hall__label {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin-bottom: 1.6rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

.hall__label::after {
	content: "";
	flex: 1;
	height: 0.1rem;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
}

.hall__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.6rem;
}

.hall__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(15, 25, 35, 0.92);
	border: 0.1rem solid rgba(255, 255, 255, 0.1);
	border-bottom: 0.3rem solid var(--ready);
	color: var(--text);
	text-align: left;
	transition: translate 0.25s ease, border-color 0.25s ease;
}

button.hall__card,
a.hall__card {
	cursor: pointer;
}

button.hall__card:hover,
a.hall__card:hover {
	translate: 0 -0.6rem;
	border-color: rgba(255, 255, 255, 0.3);
}

.hall__card--sub {
	border-bottom-color: var(--gold);
}

.hall__card--legend {
	border-bottom-color: var(--muted);
}

.hall__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(160deg, #1d2a36, #0f1923);
}

.hall__photo img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, center 30%);
	filter: grayscale(0.35);
	transition: filter 0.3s ease, scale 0.4s ease;
}

button.hall__card:hover .hall__photo img:first-child {
	filter: grayscale(0) contrast(1.05);
	scale: 1.04;
}

.hall__card--legend .hall__photo img:first-child {
	filter: grayscale(1);
}

.hall__photo span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 6rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.15);
}

.hall__rank {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 4.4rem;
	height: 4.4rem;
	object-fit: contain;
	filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.7));
}

.hall__info {
	padding: 1.4rem 1.6rem 1.6rem;
}

.hall__status {
	font-size: 1.2rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--ready);
}

.hall__card--sub .hall__status {
	color: var(--gold);
}

.hall__card--legend .hall__status {
	color: var(--muted);
}

.hall__name {
	margin-top: 0.4rem;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hall__tag,
.hall__meta {
	margin-top: 0.2rem;
	font-size: 1.3rem;
	color: var(--muted);
}

a.hall__card {
	color: var(--text);
}

a.hall__card:hover .hall__photo img:first-child {
	filter: grayscale(0.4) contrast(1.05);
	scale: 1.04;
}

.side__item--game {
	width: 100%;
	color: var(--text);
	font-family: inherit;
	cursor: pointer;
}

.aim {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: #07090c;
	user-select: none;
	animation: aimIn 0.3s ease;
}

.aim[hidden] {
	display: none;
}

.aim.is-closing {
	animation: aimOut 0.3s ease forwards;
}

@keyframes aimIn {
	from {
		opacity: 0;
	}
}

@keyframes aimOut {
	to {
		opacity: 0;
	}
}

.aim__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.aim.is-playing .aim__canvas {
	cursor: none;
}

.aim__top {
	position: absolute;
	top: 2rem;
	left: 50%;
	translate: -50% 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	pointer-events: none;
}

.aim__hud {
	display: flex;
	gap: 0.4rem;
}

.aim__pace {
	--pace: var(--ready);
	padding: 0.9rem 1.6rem 1.2rem;
	background: rgba(8, 11, 15, 0.72);
}

.aim__pace.is-behind {
	--pace: var(--loss);
}

.aim__pace.is-record {
	--pace: var(--gold);
}

.aim__pace-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.7rem;
}

.aim__pace-head span {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__pace.is-record .aim__pace-head span {
	color: var(--gold);
}

.aim__pace-head b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	color: var(--pace);
	transition: color 0.2s;
}

.aim__pace-bar {
	position: relative;
	height: 0.8rem;
	background: rgba(255, 255, 255, 0.07);
}

.aim__pace-fill,
.aim__pace-ghost {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	max-width: 100%;
	transition: width 0.12s linear;
}

.aim__pace-fill {
	background: var(--pace);
	box-shadow: 0 0 1.2rem var(--pace);
	transition: width 0.12s linear, background-color 0.2s, box-shadow 0.2s;
}

.aim__pace-ghost {
	background: rgba(255, 255, 255, 0.22);
}

.aim__pace-ghost::after {
	content: '';
	position: absolute;
	top: -0.4rem;
	right: -0.1rem;
	bottom: -0.4rem;
	width: 0.2rem;
	background: #fff;
}

.aim__hud[hidden],
.aim__pace[hidden],
.aim__count[hidden],
.aim__overlay[hidden],
.aim__result[hidden],
.aim__menu[hidden],
.aim__settings[hidden] {
	display: none;
}

.aim__hud div {
	min-width: 12rem;
	padding: 0.8rem 1.6rem;
	text-align: center;
	background: rgba(8, 11, 15, 0.72);
	border-bottom: 0.2rem solid rgba(255, 255, 255, 0.08);
}

.aim__hud div:first-child {
	border-bottom-color: var(--brand);
}

.aim__hud span {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__hud b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.6rem;
	color: var(--text);
}

.aim__count {
	position: absolute;
	left: 50%;
	top: 38%;
	translate: -50% -50%;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 14rem;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 4rem color-mix(in srgb, var(--brand) 50%, transparent);
	pointer-events: none;
}

.aim__overlay,
.aim__result {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 6, 9, 0.55);
	backdrop-filter: blur(0.4rem);
}

.aim__overlay {
	cursor: pointer;
}

.aim__box,
.aim__res {
	min-width: 46rem;
	padding: 3.6rem 4rem;
	text-align: center;
	background: linear-gradient(160deg, rgba(24, 30, 39, 0.96), rgba(12, 16, 22, 0.96));
	border-top: 0.3rem solid var(--brand);
	box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.6);
	cursor: default;
}

.aim__box-title {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 4rem;
	text-transform: uppercase;
	color: var(--text);
}

.aim__box p {
	margin: 1rem 0 2.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.8rem;
	color: var(--muted);
}

.aim__btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.3rem 3.2rem;
	margin: 0 0.5rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
	background: var(--brand);
	cursor: pointer;
	transition: background 0.2s ease, translate 0.2s ease;
}

.aim__btn:hover {
	background: color-mix(in srgb, var(--brand), #fff 15%);
	translate: 0 -0.2rem;
}

.aim__btn--ghost {
	background: transparent;
	color: var(--text);
	box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.25);
}

.aim__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
}

.aim__btn kbd {
	padding: 0.1rem 0.7rem;
	font-family: inherit;
	font-size: 1.3rem;
	background: rgba(0, 0, 0, 0.25);
}

.aim__res-cat {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__res-rank {
	width: 11rem;
	margin: 1.6rem auto 0;
	filter: drop-shadow(0 0 2.4rem rgba(255, 255, 255, 0.15));
}

.aim__res-tier {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aim__res-score {
	margin-top: 0.4rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 7.2rem;
	line-height: 1;
	color: var(--text);
}

.aim__res-grid {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin: 2.4rem 0 1.6rem;
}

.aim__res-grid div {
	min-width: 11rem;
	padding: 1rem 1.2rem;
	background: rgba(255, 255, 255, 0.04);
}

.aim__res-grid span {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__res-grid b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.4rem;
	color: var(--text);
}

.aim__res-pb {
	font-family: 'Oswald', sans-serif;
	font-size: 1.8rem;
	letter-spacing: 0.06em;
	color: var(--gold);
}

.aim__res-board {
	margin: 0.6rem 0 2.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	color: var(--muted);
}

.aim__res-board b {
	color: var(--ready);
}

.aim__menu {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 3rem 4rem 4rem;
	background: linear-gradient(90deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.7) 45%, rgba(5, 7, 10, 0.85) 100%);
}

.aim__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.aim__brand {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3.4rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}

.aim__brand span {
	margin-left: 1rem;
	font-size: 1.6rem;
	letter-spacing: 0.24em;
	color: var(--brand);
}

.aim__tools {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.aim__tool {
	height: 4.4rem;
	padding: 0 2rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.12);
	cursor: pointer;
	transition: background 0.2s ease;
}

.aim__tool:hover {
	background: rgba(255, 255, 255, 0.12);
}

.aim__close {
	width: 4.4rem;
	height: 4.4rem;
	font-size: 2rem;
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	transition: background 0.2s ease;
}

.aim__close:hover {
	background: var(--brand);
	color: var(--brand-ink);
}

.aim__body {
	flex: 1;
	display: grid;
	grid-template-columns: 38rem 1fr 40rem;
	gap: 4rem;
	min-height: 0;
	margin-top: 3rem;
}

.aim__list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	overflow-y: auto;
}

.aim__cat-title {
	margin-bottom: 0.8rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand);
}

.aim__item {
	position: relative;
	display: block;
	width: 100%;
	padding: 1.2rem 1.6rem;
	margin-bottom: 0.4rem;
	text-align: left;
	background: rgba(255, 255, 255, 0.04);
	border-left: 0.3rem solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.aim__item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.aim__item.is-active {
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	border-left-color: var(--brand);
}

.aim__item-name {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
}

.aim__item-ref {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	color: var(--muted);
}

.aim__item-best {
	position: absolute;
	right: 1.4rem;
	top: 50%;
	translate: 0 -50%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.6rem;
	color: var(--text);
}

.aim__item-best img {
	width: 2.6rem;
}

.aim__detail {
	align-self: center;
	max-width: 84rem;
}

.aim__detail-cat {
	font-family: 'Oswald', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 1rem;
}

.aim__detail-name {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 6rem;
	line-height: 1.05;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--text);
}

.aim__detail-ref {
	margin-top: 1.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	color: var(--muted);
}

.aim__detail-desc {
	max-width: 58rem;
	margin: 3.2rem 0 2.8rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 2rem;
	line-height: 1.6;
	color: #c9cfd6;
	text-wrap: pretty;
}

.aim__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.aim__chips span {
	padding: 0.6rem 1.2rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.4rem;
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
}

.aim__detail-best {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 4rem 0;
}

.aim__detail-best img {
	width: 6.4rem;
}

.aim__detail-best span {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__detail-best b {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 4rem;
	line-height: 1.1;
	color: var(--text);
}

.aim__detail-best em {
	font-family: 'Roboto Condensed', sans-serif;
	font-style: normal;
	font-size: 1.5rem;
	color: var(--muted);
}

.aim__play {
	width: 34rem;
	height: 7rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand-ink);
	background: var(--brand);
	cursor: pointer;
	transition: background 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;
}

.aim__play:hover {
	background: color-mix(in srgb, var(--brand), #fff 15%);
	translate: 0 -0.3rem;
	box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--brand) 35%, transparent);
}

.aim__sens {
	display: block;
	width: fit-content;
	margin-top: 2rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	color: var(--ready);
	border-bottom: 0.1rem dashed rgba(63, 243, 193, 0.4);
	cursor: pointer;
}

.aim__hint {
	margin-top: 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.4rem;
	color: var(--muted);
}

.aim__board {
	align-self: start;
	padding: 2.4rem;
	background: rgba(12, 16, 22, 0.75);
	border-top: 0.3rem solid var(--gold);
}

.aim__board-title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text);
}

.aim__leaders {
	margin-top: 1.6rem;
	list-style: none;
}

.aim__leaders li {
	display: grid;
	grid-template-columns: 3rem 1fr auto 5rem;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	color: var(--text);
}

.aim__leaders li:nth-child(odd) {
	background: rgba(255, 255, 255, 0.03);
}

.aim__leaders li.is-me {
	background: rgba(63, 243, 193, 0.12);
}

.aim__leaders i {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 600;
	color: var(--muted);
}

.aim__leaders li:nth-child(1) i {
	color: var(--gold);
}

.aim__leaders span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aim__leaders b {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}

.aim__leaders em {
	font-style: normal;
	text-align: right;
	color: var(--muted);
}

.aim__board-empty,
.aim__board-me {
	margin-top: 1.4rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	color: var(--muted);
}

.aim__board-me b {
	color: var(--ready);
}

.aim__settings {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 6, 9, 0.7);
	backdrop-filter: blur(0.6rem);
}

.aim__panel {
	width: 128rem;
	padding: 3rem 3.6rem;
	text-align: center;
	background: linear-gradient(160deg, rgba(24, 30, 39, 0.98), rgba(12, 16, 22, 0.98));
	border-top: 0.3rem solid var(--brand);
}

.aim__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3rem;
	text-transform: uppercase;
	color: var(--text);
}

.aim__panel-body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin: 2.4rem 0 3rem;
	text-align: left;
}

.aim__group-title {
	margin-bottom: 1.4rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand);
}

.aim__field {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	color: var(--text);
}

.aim__field span {
	flex: 0 0 15rem;
	color: #c9cfd6;
}

.aim__field input[type="number"],
.aim__field input[type="text"] {
	flex: 1;
	height: 4rem;
	padding: 0 1.2rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.8rem;
	color: var(--text);
	background: rgba(0, 0, 0, 0.35);
	border: 0.1rem solid rgba(255, 255, 255, 0.12);
	outline: none;
}

.aim__field input:focus {
	border-color: var(--brand);
}

.aim__field input[type="range"] {
	flex: 1;
	accent-color: var(--brand);
}

.aim__field b {
	width: 3rem;
	text-align: right;
	font-family: 'Oswald', sans-serif;
}

.aim__calc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem;
	margin: 0.4rem 0 1.6rem;
}

.aim__calc div {
	padding: 0.8rem 1rem;
	background: rgba(255, 255, 255, 0.04);
}

.aim__calc span {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.aim__calc b {
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	color: var(--ready);
}

.aim__check {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	color: #c9cfd6;
	cursor: pointer;
}

.aim__check input {
	width: 1.8rem;
	height: 1.8rem;
	margin-top: 0.1rem;
	accent-color: var(--brand);
}

.aim__note {
	margin-top: 0.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--muted);
}

.aim__colors {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.6rem;
}

.aim__color {
	width: 3rem;
	height: 3rem;
	background: var(--c);
	box-shadow: inset 0 0 0 0.2rem rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.aim__color.is-active {
	outline: 0.2rem solid #fff;
	outline-offset: 0.2rem;
}

.aim__colors input[type="color"] {
	width: 4rem;
	height: 3rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.aim__preview {
	display: block;
	width: 24rem;
	height: 14rem;
	margin-top: 0.6rem;
}

.story {
	position: relative;
	height: calc(100vh - 6.4rem);
}

.story__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.story__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
	background: #000;
	cursor: pointer;
	user-select: none;
	--bar: clamp(5rem, 8cqh, 8rem);
	--bg1: #ecdfc5;
	--bg2: #d4bc90;
	--ground: #b98a5a;
	--ground2: #9c6f3d;
	--glow: #fff6dc;
	--glow-a: 55%;
	--line: #3d2b1f;
	--ink: #2a1a13;
	--txt: #3d2b1f;
	--cap-fill: #ffb62e;
	--cap-ink: #2b1a1f;
	--cap-shadow: rgba(70, 35, 20, 0.35);
	--tree: #5a3f2d;
	--tree-a: 0.3;
	--paper-a: 0.4;
	--vig: 0.32;
	--stain: rgba(125, 85, 35, 0.16);
	--skin: #e9c7a2;
	--bb-wood: #b78f5e;
	--extra-dim: 1;
}

.story__stage[data-palette="dusk"] {
	--bg1: #050403;
	--bg2: #33200a;
	--ground: #4a3216;
	--ground2: #2a1c0c;
	--glow: #e9a93f;
	--glow-a: 92%;
	--line: #060403;
	--ink: #070503;
	--txt: #efd49a;
	--cap-fill: #f6c866;
	--cap-ink: #140b04;
	--cap-shadow: rgba(0, 0, 0, 0.55);
	--tree: #040302;
	--tree-a: 1;
	--paper-a: 0.25;
	--vig: 0.6;
	--stain: rgba(0, 0, 0, 0.35);
	--extra-dim: 0.72;
	--gg: 40%;
	--sh-a: 0.85;
}

.story__stage[data-palette="night"] {
	--bg1: #05070f;
	--bg2: #15203a;
	--ground: #232c46;
	--ground2: #141a2a;
	--gg: 32%;
	--sh-a: 0.85;
	--glow: #6f9bff;
	--glow-a: 55%;
	--line: #04060c;
	--ink: #04060c;
	--txt: #c9d8f3;
	--cap-fill: #a9d4ff;
	--cap-ink: #040812;
	--cap-shadow: rgba(0, 0, 0, 0.55);
	--tree: #03050a;
	--tree-a: 1;
	--paper-a: 0.2;
	--vig: 0.7;
	--stain: rgba(0, 0, 0, 0.35);
	--extra-dim: 0.75;
	--pc-glow: 1;
}

.story__stage[data-palette="storm"] {
	--bg1: #b7b1a5;
	--bg2: #8a8477;
	--ground: #6c6356;
	--ground2: #4a433b;
	--glow: #e8e2d6;
	--glow-a: 35%;
	--line: #2a2520;
	--ink: #211c18;
	--txt: #ece5d6;
	--cap-fill: #ece5d6;
	--cap-ink: #1f1b18;
	--cap-shadow: rgba(20, 15, 10, 0.4);
	--tree: #2d2823;
	--tree-a: 0.8;
	--paper-a: 0.45;
	--vig: 0.5;
	--stain: rgba(30, 25, 20, 0.25);
	--extra-dim: 0.85;
}

.story__stage[data-palette="red"] {
	--bg1: #1d0406;
	--bg2: #8d141f;
	--ground: #4a0e14;
	--ground2: #2a070b;
	--glow: #ff4655;
	--glow-a: 80%;
	--line: #0d0203;
	--ink: #0d0203;
	--txt: #ffd7d7;
	--cap-fill: #ffe9a6;
	--cap-ink: #1a0407;
	--cap-shadow: rgba(0, 0, 0, 0.6);
	--tree: #0d0203;
	--tree-a: 1;
	--paper-a: 0.25;
	--vig: 0.6;
	--gg: 34%;
	--sh-a: 0.85;
	--stain: rgba(0, 0, 0, 0.35);
	--extra-dim: 0.8;
}

.story__stage[data-palette="gold"] {
	--bg1: #f3e2b4;
	--bg2: #dcb46a;
	--ground: #bb8840;
	--ground2: #8f6126;
	--glow: #fff4c4;
	--glow-a: 85%;
	--line: #4a3215;
	--ink: #33220f;
	--txt: #4a3215;
	--cap-fill: #ff8f2a;
	--cap-ink: #2b1a14;
	--cap-shadow: rgba(90, 50, 10, 0.35);
	--tree: #5a3d1e;
	--tree-a: 0.3;
	--paper-a: 0.45;
	--vig: 0.3;
	--stain: rgba(140, 90, 20, 0.18);
	--extra-dim: 1;
}

.story__frame {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--bar);
	bottom: var(--bar);
	overflow: hidden;
	background: var(--bg1);
	--u: calc((100cqh - 2 * var(--bar)) / 85.6);
	--gy: 11;
	transform-origin: 50% 68%;
	animation: storyZoom 16s ease-in-out infinite alternate;
}

@keyframes storyZoom {
	to {
		transform: scale(1.04);
	}
}

.story__frame > * {
	position: absolute;
}

.story__frame::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 27%;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 62% 100% at 50% 0%, color-mix(in srgb, var(--glow) var(--gg, 0%), transparent), transparent 85%);
	mix-blend-mode: screen;
}

.story__bg {
	inset: 0;
	isolation: isolate;
	background:
		radial-gradient(ellipse 70% 42% at 50% 72%, color-mix(in srgb, var(--glow) var(--glow-a), transparent), transparent 70%),
		linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}

.story__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.16 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
	mix-blend-mode: multiply;
	opacity: var(--paper-a);
}

.story__stains {
	inset: 0;
	background:
		radial-gradient(ellipse 18% 22% at 14% 26%, var(--stain), transparent 70%),
		radial-gradient(ellipse 26% 16% at 78% 18%, var(--stain), transparent 70%),
		radial-gradient(ellipse 14% 20% at 90% 62%, var(--stain), transparent 70%),
		radial-gradient(ellipse 30% 14% at 38% 88%, var(--stain), transparent 70%),
		radial-gradient(ellipse 12% 12% at 60% 40%, var(--stain), transparent 70%);
}

.story__trees {
	left: 0;
	right: 0;
	bottom: 25%;
	width: 100%;
	height: 42%;
	fill: var(--tree);
	stroke: var(--tree);
	stroke-width: calc(0.7 * var(--u));
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: var(--tree-a);
}

.story__trees path {
	vector-effect: non-scaling-stroke;
}

.story__ground {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 27%;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.story__ground path {
	vector-effect: non-scaling-stroke;
}

.story__gs1 {
	stop-color: var(--ground);
}

.story__gs2 {
	stop-color: var(--ground2);
}

.story__ground-fill {
	fill: url(#story-ground-grad);
}

.story__ground-line {
	fill: none;
	stroke: var(--line);
	stroke-width: calc(0.45 * var(--u));
	opacity: 0.8;
}

.story__ground-sketch {
	fill: none;
	stroke: var(--line);
	stroke-width: calc(0.25 * var(--u));
	opacity: 0.35;
}

.story__scene {
	inset: 0;
	z-index: 2;
}

.story__scene > * {
	position: absolute;
}

.story__caption {
	left: 6%;
	right: 6%;
	top: 6%;
	z-index: 5;
	pointer-events: none;
	display: flex;
	justify-content: center;
}

.story__caption--full {
	inset: 0;
}

.story__caption--left {
	justify-content: flex-start;
}

.story__caption--right {
	justify-content: flex-end;
}

.story__sig {
	left: calc(3 * var(--u));
	bottom: calc(2 * var(--u));
	z-index: 5;
	font-family: 'Shantell Sans', cursive;
	font-weight: 500;
	font-size: calc(2 * var(--u));
	color: var(--txt);
	opacity: 0;
	rotate: -1.5deg;
	animation: storySig 0.8s ease 1.4s forwards;
}

@keyframes storySig {
	to {
		opacity: 0.75;
	}
}

.story__grain {
	inset: -50%;
	z-index: 6;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.09;
	animation: bgGrain 0.8s steps(5) infinite;
}

.story__vignette {
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 48%, transparent 40%, rgba(0, 0, 0, var(--vig)) 100%);
}

.story__flicker {
	inset: 0;
	z-index: 7;
	pointer-events: none;
	background: #000;
	opacity: 0;
	animation: storyFlicker 3.7s steps(1) infinite;
}

@keyframes storyFlicker {
	13% {
		opacity: 0.035;
	}

	14% {
		opacity: 0;
	}

	41% {
		opacity: 0.02;
	}

	43% {
		opacity: 0;
	}

	67% {
		opacity: 0.045;
	}

	68% {
		opacity: 0;
	}

	89% {
		opacity: 0.015;
	}

	91% {
		opacity: 0;
	}
}

.story__bar {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--bar);
	z-index: 9;
	background: #000;
	display: flex;
	align-items: center;
	padding: 0 4rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.story__bar--top {
	top: 0;
	justify-content: space-between;
}

.story__bar--top::after {
	content: 'POPUSK PRO · История';
}

.story__bar--bottom {
	bottom: 0;
	justify-content: center;
}

.story__dots {
	display: flex;
	gap: 1.2rem;
}

.story__dot {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 0.15rem solid rgba(255, 255, 255, 0.45);
	background: transparent;
	cursor: pointer;
	transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.story__dot:hover {
	border-color: #fff;
	transform: scale(1.25);
}

.story__dot.is-active {
	background: #fff;
	border-color: #fff;
}

.story__next {
	position: absolute;
	right: 4rem;
	top: 50%;
	translate: 0 -50%;
	font-family: 'Oswald', sans-serif;
	font-size: 1.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	background: transparent;
	cursor: pointer;
	padding: 1rem 0;
	transition: color 0.25s, letter-spacing 0.25s;
}

.story__next:hover {
	color: #fff;
	letter-spacing: 0.3em;
}

.story__next[hidden] {
	display: none;
}

.story__fade {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: #000;
	opacity: 1;
	pointer-events: none;
}

.story__stage[data-boil="0"] .boil {
	filter: url(#boil-0);
}

.story__stage[data-boil="1"] .boil {
	filter: url(#boil-1);
}

.story__stage[data-boil="2"] .boil {
	filter: url(#boil-2);
}

.story__stage.is-shake .story__frame {
	animation: storyZoom 16s ease-in-out infinite alternate, storyShake 0.09s linear var(--shake-d, 0s) 9;
}

@keyframes storyShake {
	25% {
		translate: calc(0.7 * var(--u)) calc(-0.4 * var(--u));
	}

	50% {
		translate: calc(-0.6 * var(--u)) calc(0.5 * var(--u));
	}

	75% {
		translate: calc(0.4 * var(--u)) calc(0.6 * var(--u));
	}
}

.cap {
	max-width: calc(120 * var(--u));
	font-family: 'Shantell Sans', cursive;
	font-weight: 800;
	font-style: italic;
	font-variation-settings: "BNCE" 48, "INFM" 70;
	font-size: calc(5.6 * var(--u));
	line-height: 1.12;
	text-align: center;
	text-wrap: balance;
	color: var(--cap-fill);
	rotate: var(--tilt, -2.5deg);
	--o: calc(0.24 * var(--u));
	text-shadow:
		var(--o) 0 0 var(--cap-ink),
		calc(-1 * var(--o)) 0 0 var(--cap-ink),
		0 var(--o) 0 var(--cap-ink),
		0 calc(-1 * var(--o)) 0 var(--cap-ink),
		calc(var(--o) * 0.72) calc(var(--o) * 0.72) 0 var(--cap-ink),
		calc(var(--o) * -0.72) calc(var(--o) * 0.72) 0 var(--cap-ink),
		calc(var(--o) * 0.72) calc(var(--o) * -0.72) 0 var(--cap-ink),
		calc(var(--o) * -0.72) calc(var(--o) * -0.72) 0 var(--cap-ink),
		calc(0.4 * var(--u)) calc(0.55 * var(--u)) 0 var(--cap-shadow);
}

.story__caption--left .cap,
.story__caption--right .cap {
	max-width: calc(74 * var(--u));
}

.story__caption--left .cap {
	text-align: left;
}

.story__caption--right .cap {
	text-align: right;
}

.cap__w {
	display: inline-block;
	rotate: var(--r);
	translate: 0 var(--dy);
	opacity: 0;
	animation: capWord 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) calc(0.5s + var(--i) * 0.1s) forwards;
}

@keyframes capWord {
	from {
		opacity: 0;
		transform: translateY(0.5em) scale(0.5);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.cap.is-done .cap__w {
	animation: none;
	opacity: 1;
}

.cap__nw {
	white-space: nowrap;
}

.cap--quote {
	max-width: none;
	line-height: 1.05;
	--tilt: -3.5deg;
	--o: calc(0.3 * var(--u));
}

.cap__line {
	display: block;
	white-space: nowrap;
	font-size: calc(8.4 * var(--u));
}

.cap__line--big {
	font-size: calc(11.6 * var(--u));
	margin-top: calc(1 * var(--u));
}

.cap__wd {
	display: inline-block;
	white-space: nowrap;
}

.cap__l {
	display: inline-block;
	rotate: var(--r);
	opacity: 0;
	animation: capLetter 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) calc(0.4s + var(--i) * 0.045s) forwards;
}

@keyframes capLetter {
	from {
		opacity: 0;
		transform: scale(2.6) translateY(-0.2em);
	}

	60% {
		opacity: 1;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.cap.is-done .cap__l {
	animation: none;
	opacity: 1;
}

.story__title {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(1.6 * var(--u));
	padding-bottom: calc(24 * var(--u));
	text-align: center;
}

.story__title--end {
	padding-bottom: calc(30 * var(--u));
}

.story__intro {
	position: absolute;
	left: 5%;
	top: 7%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.story__intro .cap {
	font-size: calc(10.5 * var(--u));
	line-height: 1.04;
	text-align: left;
	max-width: none;
	white-space: nowrap;
	--tilt: -4deg;
	--o: calc(0.32 * var(--u));
}

.story__intro .cap__l {
	animation-delay: calc(0.5s + var(--i) * 0.06s);
}

.story__intro .story__hint {
	margin: calc(3 * var(--u)) 0 0 calc(1.5 * var(--u));
	rotate: -2deg;
}

.story__title .cap {
	font-size: calc(11 * var(--u));
	line-height: 1;
	max-width: calc(160 * var(--u));
	--tilt: -2deg;
}

.story__title--end .cap {
	font-size: calc(9.6 * var(--u));
}

.story__end-pre {
	font-family: 'Shantell Sans', cursive;
	font-weight: 700;
	font-size: calc(3.8 * var(--u));
	color: var(--txt);
	opacity: 0;
	rotate: -1.5deg;
	animation: storyRise 0.8s ease 0.3s forwards;
}

.story__title .cap--long {
	font-size: calc(7 * var(--u));
	line-height: 1.1;
	max-width: calc(130 * var(--u));
}

.story__title .cap__l {
	animation-delay: calc(0.3s + var(--i) * 0.06s);
}

.story__title-sub {
	font-family: 'Shantell Sans', cursive;
	font-weight: 500;
	font-size: calc(3.6 * var(--u));
	color: var(--txt);
	opacity: 0;
	rotate: -1deg;
	animation: storyRise 0.8s ease 1.5s forwards;
}

.story__hint {
	margin-top: calc(4 * var(--u));
	font-family: 'Oswald', sans-serif;
	font-size: calc(1.6 * var(--u));
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--txt);
	opacity: 0;
	animation: storyHint 2.4s ease-in-out 2.4s infinite;
}

@keyframes storyRise {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	to {
		opacity: 0.9;
		transform: none;
	}
}

@keyframes storyHint {
	0%,
	100% {
		opacity: 0.25;
	}

	50% {
		opacity: 0.8;
	}
}

.story__end-buttons {
	display: flex;
	gap: calc(2 * var(--u));
	margin-top: calc(4 * var(--u));
	pointer-events: auto;
	opacity: 0;
	animation: storyRise 0.8s ease 1.8s forwards;
}

.story__btn {
	font-family: 'Shantell Sans', cursive;
	font-weight: 700;
	font-size: calc(2.4 * var(--u));
	color: var(--cap-ink);
	background: var(--cap-fill);
	border: calc(0.35 * var(--u)) solid var(--cap-ink);
	border-radius: 0.6em 0.8em 0.5em 0.75em / 0.75em 0.5em 0.8em 0.6em;
	padding: 0.4em 1.25em;
	box-shadow: 0.2em 0.25em 0 var(--cap-shadow);
	cursor: pointer;
	rotate: -1.5deg;
	transition: translate 0.2s, box-shadow 0.2s, background 0.2s;
}

.story__btn:hover {
	translate: 0.08em 0.12em;
	box-shadow: 0.08em 0.12em 0 var(--cap-shadow);
}

.story__btn--ghost {
	background: transparent;
	color: var(--txt);
	border-color: var(--txt);
	rotate: 1.5deg;
}

a.story__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
}

.actor {
	left: var(--x);
	bottom: calc(var(--gy) * var(--u));
	width: calc(var(--s) * var(--u));
	height: calc(var(--s) * 1.95 * var(--u));
	z-index: 3;
	transform: translate(-50%, 0);
	transform-origin: 50% 100%;
}

.actor--enter-drop {
	animation: actorDrop 1.15s cubic-bezier(0.4, 0, 0.6, 1) var(--d) both;
}

@keyframes actorDrop {
	0% {
		transform: translate(-50%, -120vh);
	}

	48% {
		transform: translate(-50%, 0);
	}

	60% {
		transform: translate(-50%, 0) scale(1.14, 0.84);
	}

	78% {
		transform: translate(-50%, calc(-2.4 * var(--u))) scale(0.96, 1.06);
	}

	90% {
		transform: translate(-50%, 0) scale(1.03, 0.97);
	}

	100% {
		transform: translate(-50%, 0);
	}
}

.actor--enter-walk {
	animation: actorWalk 1.4s ease-out var(--d) both;
}

@keyframes actorWalk {
	from {
		transform: translate(calc(-50% + var(--from)), 0);
	}

	to {
		transform: translate(-50%, 0);
	}
}

.actor--enter-walk .actor__body {
	animation: actorBob 0.35s ease-in-out var(--d) 4 alternate, actorIdle 2.8s ease-in-out calc(var(--d) + 1.4s) infinite alternate;
}

.actor--enter-walk .actor__leg--l {
	animation: legSwing 0.35s ease-in-out var(--d) 4 alternate;
}

.actor--enter-walk .actor__leg--r {
	animation: legSwing 0.35s ease-in-out var(--d) 4 alternate-reverse;
}

@keyframes actorBob {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 calc(-0.8 * var(--u));
	}
}

@keyframes legSwing {
	from {
		rotate: -22deg;
	}

	to {
		rotate: 22deg;
	}
}

.actor--enter-pop {
	animation: actorPop 0.62s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d) both;
}

@keyframes actorPop {
	from {
		transform: translate(-50%, 0) scale(0);
	}

	to {
		transform: translate(-50%, 0) scale(1);
	}
}

.actor--enter-none {
	animation: actorFade 0.4s ease var(--d) both;
}

@keyframes actorFade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.actor::before {
	content: '';
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: calc(-1.3 * var(--u));
	height: calc(2.8 * var(--u));
	border-radius: 50%;
	background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, var(--sh-a, 0.5)), rgba(0, 0, 0, calc(var(--sh-a, 0.5) * 0.45)) 60%, transparent);
}

.actor--happy::before {
	animation: shadowHop 1.1s ease-in-out var(--d) infinite;
}

.actor--shout::before {
	animation: shadowHop 0.75s ease-in-out var(--d) infinite;
}

@keyframes shadowHop {
	0%,
	45%,
	55%,
	85%,
	100% {
		transform: scaleX(1);
		opacity: 1;
	}

	70% {
		transform: scaleX(0.72);
		opacity: 0.55;
	}
}

.actor__body {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
	animation: actorIdle 2.8s ease-in-out var(--d) infinite alternate;
}

@keyframes actorIdle {
	from {
		transform: rotate(-1.2deg);
	}

	to {
		transform: rotate(1.2deg) scale(1.01, 1.02);
	}
}

.actor__head {
	position: absolute;
	left: 5%;
	top: 0;
	width: 90%;
	z-index: 2;
	transform-origin: 50% 88%;
	rotate: var(--ht, 0deg);
	scale: var(--hs, 1);
	--ol: calc(0.3 * var(--u));
	filter:
		sepia(0.3) contrast(1.06) saturate(0.85)
		drop-shadow(var(--ol) 0 0 var(--ink))
		drop-shadow(calc(-1 * var(--ol)) 0 0 var(--ink))
		drop-shadow(0 var(--ol) 0 var(--ink))
		drop-shadow(0 calc(-1 * var(--ol)) 0 var(--ink));
	transition: rotate 0.5s ease, scale 0.5s ease;
}

.actor__fig {
	position: absolute;
	left: 0;
	top: 42%;
	width: 100%;
	height: 58%;
	z-index: 1;
	overflow: visible;
	fill: none;
	stroke: var(--ink);
	stroke-width: 3.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.actor__torso {
	fill: var(--cloth);
}

.actor__fold {
	stroke-width: 2;
	opacity: 0.45;
}

.actor__hand {
	fill: var(--skin);
}

.actor__foot {
	fill: var(--ink);
}

.actor__arm {
	transition: rotate 0.55s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.actor__arm--l {
	transform-origin: 31px 20px;
	rotate: var(--al, 0deg);
}

.actor__arm--r {
	transform-origin: 69px 20px;
	rotate: var(--ar, 0deg);
}

.actor__leg--l {
	transform-origin: 40px 78px;
}

.actor__leg--r {
	transform-origin: 60px 78px;
}

.actor__name {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% calc(1.2 * var(--u));
	font-family: 'Shantell Sans', cursive;
	font-weight: 600;
	font-size: calc(2.1 * var(--u));
	white-space: nowrap;
	color: var(--txt);
	opacity: 0;
	rotate: -2deg;
	animation: storySig 0.6s ease calc(var(--d) + 0.9s) forwards;
}

.actor--idle .actor__arm--l {
	animation: armSwayL 3.2s ease-in-out var(--d) infinite alternate;
}

.actor--idle .actor__arm--r {
	animation: armSwayR 3.2s ease-in-out var(--d) infinite alternate;
}

@keyframes armSwayL {
	from {
		rotate: -3deg;
	}

	to {
		rotate: 7deg;
	}
}

@keyframes armSwayR {
	from {
		rotate: 3deg;
	}

	to {
		rotate: -7deg;
	}
}

.actor--wave {
	--al: 8deg;
	--ar: -100deg;
	--ht: -5deg;
}

.actor--wave .actor__arm--r {
	animation: armWave 0.45s ease-in-out var(--d) infinite alternate;
}

@keyframes armWave {
	from {
		rotate: -86deg;
	}

	to {
		rotate: -114deg;
	}
}

.actor--happy {
	--al: 108deg;
	--ar: -108deg;
	--ht: -4deg;
}

.actor--happy .actor__body {
	animation: actorHop 1.1s ease-in-out var(--d) infinite;
}

@keyframes actorHop {
	0%,
	45%,
	100% {
		transform: translateY(0) scale(1.03, 0.97);
	}

	55% {
		transform: translateY(0) scale(0.97, 1.04);
	}

	70% {
		transform: translateY(calc(-1.6 * var(--u))) scale(0.99, 1.02);
	}

	85% {
		transform: translateY(0) scale(1.05, 0.95);
	}
}

.actor--proud {
	--al: 24deg;
	--ar: -24deg;
	--ht: -8deg;
}

.actor--proud .actor__body {
	animation: actorProud 2.6s ease-in-out var(--d) infinite alternate;
}

@keyframes actorProud {
	from {
		transform: scale(1.04) rotate(-1deg);
	}

	to {
		transform: scale(1.06) rotate(1deg);
	}
}

.actor--love {
	--al: 10deg;
	--ar: -76deg;
	--ht: 9deg;
}

.actor--love .actor__body {
	animation: actorLove 1.2s ease-in-out var(--d) infinite alternate;
}

@keyframes actorLove {
	from {
		transform: rotate(-3deg) scale(1);
	}

	to {
		transform: rotate(3deg) scale(1.03);
	}
}

.actor--sad {
	--al: -8deg;
	--ar: 8deg;
	--ht: 13deg;
}

.actor--sad .actor__head {
	filter:
		sepia(0.3) contrast(1.06) saturate(0.55)
		drop-shadow(var(--ol) 0 0 var(--ink))
		drop-shadow(calc(-1 * var(--ol)) 0 0 var(--ink))
		drop-shadow(0 var(--ol) 0 var(--ink))
		drop-shadow(0 calc(-1 * var(--ol)) 0 var(--ink));
}

.actor--sad .actor__body {
	animation: actorSad 3.2s ease-in-out var(--d) infinite alternate;
}

@keyframes actorSad {
	from {
		transform: scale(1, 0.96) rotate(-1deg);
	}

	to {
		transform: scale(1, 0.94) rotate(1deg);
	}
}

.actor--angry {
	--al: 82deg;
	--ar: -82deg;
	--ht: 3deg;
}

.actor--angry .actor__body {
	animation: actorShake 0.12s linear var(--d) infinite;
}

@keyframes actorShake {
	25% {
		transform: translate(calc(-0.3 * var(--u)), 0) rotate(-1deg);
	}

	75% {
		transform: translate(calc(0.3 * var(--u)), 0) rotate(1deg);
	}
}

.actor--shout {
	--al: 112deg;
	--ar: -112deg;
	--ht: -8deg;
	--hs: 1.06;
}

.actor--shout .actor__body {
	animation: actorShout 0.75s ease-in-out var(--d) infinite;
}

@keyframes actorShout {
	0%,
	45%,
	100% {
		transform: translateY(0) scale(1.05, 0.95) rotate(-1.5deg);
	}

	55% {
		transform: translateY(0) scale(0.97, 1.05) rotate(0deg);
	}

	70% {
		transform: translateY(calc(-2 * var(--u))) scale(0.98, 1.04) rotate(1.5deg);
	}

	85% {
		transform: translateY(0) scale(1.06, 0.94) rotate(0deg);
	}
}

.actor--scared {
	--al: 104deg;
	--ar: -104deg;
	--ht: -5deg;
}

.actor--scared .actor__body {
	animation: actorTremble 0.09s linear var(--d) infinite;
}

@keyframes actorTremble {
	25% {
		transform: translate(calc(-0.25 * var(--u)), calc(0.1 * var(--u)));
	}

	75% {
		transform: translate(calc(0.25 * var(--u)), calc(-0.1 * var(--u)));
	}
}

.actor--think {
	--al: 4deg;
	--ar: -114deg;
	--ht: -7deg;
}

.actor--think .actor__body {
	animation: actorIdle 3.6s ease-in-out var(--d) infinite alternate;
}

.actor--shocked {
	--al: 96deg;
	--ar: -96deg;
	--ht: -10deg;
	--hs: 1.08;
}

.actor--shocked .actor__body {
	animation: actorShocked 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) var(--d) both;
}

@keyframes actorShocked {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-4deg) scale(1.02);
	}
}

.extra {
	left: var(--x);
	bottom: calc(var(--gy) * var(--u));
	width: calc(var(--sc) * 8.6 * var(--u));
	height: calc(var(--sc) * 12.9 * var(--u));
	z-index: 1;
	translate: -50% 0;
	overflow: visible;
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	filter: blur(calc(var(--bl) * var(--u))) brightness(var(--extra-dim));
	animation: extraIn 0.5s ease calc(0.3s + var(--d)) forwards;
}

@keyframes extraIn {
	to {
		opacity: var(--op);
	}
}

.extra__head {
	fill: var(--skin);
}

.extra__eye {
	fill: #fff;
	stroke-width: 2;
}

.extra__pupil {
	fill: var(--ink);
	stroke: none;
}

.extra__eyes {
	transform-origin: 30px 36px;
	animation: extraBlink var(--bt) steps(1) var(--bd) infinite;
}

@keyframes extraBlink {
	0%,
	93%,
	100% {
		transform: scaleY(1);
	}

	94%,
	98% {
		transform: scaleY(0.08);
	}
}

.extra__hair {
	stroke-width: 2;
}

.prop {
	z-index: 2;
}

.prop-pc {
	left: calc(var(--x) + var(--dx, 0) * var(--u));
	bottom: calc(var(--gy) * var(--u));
	width: calc(22 * var(--u));
	height: calc(17 * var(--u));
	translate: -50% 0;
	opacity: 0;
	animation: actorFade 0.5s ease 0.1s forwards;
}

.prop-pc svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--ink);
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pc__desk {
	fill: #a97d4e;
}

.pc__screen {
	fill: #1a2130;
	stroke-width: 4;
}

.pc__kb {
	fill: #5b5650;
}

.pc__text {
	position: absolute;
	left: 19%;
	top: 15%;
	width: 62%;
	height: 55%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Shantell Sans', cursive;
	font-weight: 700;
	font-size: calc(2.2 * var(--u));
	color: #bfe0ff;
	text-shadow: 0 0 0.45em rgba(120, 180, 255, 0.8);
	animation: pcBlink 1.1s steps(1) infinite;
}

@keyframes pcBlink {
	50% {
		opacity: 0.7;
	}
}

.pc__glow {
	position: absolute;
	left: 50%;
	top: 38%;
	width: 170%;
	height: 190%;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(120, 175, 255, 0.55), rgba(120, 175, 255, 0.16) 55%, transparent);
	opacity: var(--pc-glow, 0.3);
	pointer-events: none;
}

.prop-pc--alert .pc__glow {
	background: radial-gradient(closest-side, rgba(255, 80, 90, 0.5), rgba(255, 80, 90, 0.14) 55%, transparent);
}

.prop-pc--alert .pc__text {
	color: #ff9a9a;
	text-shadow: 0 0 0.45em rgba(255, 70, 85, 0.85);
	animation: pcLag 0.7s steps(2) infinite;
}

@keyframes pcLag {
	50% {
		opacity: 0.55;
		transform: translateX(0.08em);
	}
}

.prop-bb {
	left: var(--x);
	bottom: calc((var(--gy) - 1) * var(--u));
	width: calc(50 * var(--u));
	height: calc(34 * var(--u));
	translate: -50% 0;
	opacity: 0;
	animation: actorFade 0.5s ease 0.1s forwards;
}

.bb__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--ink);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb__post {
	stroke-width: 9;
	stroke: #4a3220;
}

.bb__post-light {
	stroke-width: 3;
	stroke: #c79b68;
	opacity: 0.7;
}

.bb__panel {
	fill: var(--bb-wood);
}

.bb__face {
	position: absolute;
	left: 8.1%;
	top: 11.6%;
	width: 83.8%;
	height: 54.8%;
	overflow: hidden;
	--nail: radial-gradient(circle, #2a1d12 0 calc(0.45 * var(--u)), transparent calc(0.5 * var(--u)));
	background:
		var(--nail) 3% 6% / calc(1.2 * var(--u)) calc(1.2 * var(--u)) no-repeat,
		var(--nail) 97% 6% / calc(1.2 * var(--u)) calc(1.2 * var(--u)) no-repeat,
		var(--nail) 3% 94% / calc(1.2 * var(--u)) calc(1.2 * var(--u)) no-repeat,
		var(--nail) 97% 94% / calc(1.2 * var(--u)) calc(1.2 * var(--u)) no-repeat,
		repeating-linear-gradient(180deg, transparent 0 calc(4.4 * var(--u)), rgba(0, 0, 0, 0.38) calc(4.4 * var(--u)) calc(4.7 * var(--u))),
		linear-gradient(180deg, #7d5938, #5c3f27);
	box-shadow: inset 0 0 0 calc(0.35 * var(--u)) var(--ink);
}

.bb__scrap {
	position: absolute;
	background: #1b1715;
}

.bb__scrap--1 {
	left: 0;
	top: 0;
	width: 16%;
	height: 24%;
	clip-path: polygon(0 0, 100% 0, 35% 100%, 0 70%);
}

.bb__scrap--2 {
	right: 0;
	bottom: 0;
	width: 20%;
	height: 28%;
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 55% 40%);
}

.bb__scrap--3 {
	left: 44%;
	top: 0;
	width: 11%;
	height: 16%;
	clip-path: polygon(0 0, 100% 0, 45% 100%);
	background: #ff7a1a;
}

.bb__tear {
	position: absolute;
	left: 8.1%;
	top: 11.6%;
	width: 83.8%;
	height: 54.8%;
	pointer-events: none;
}

.bb__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(0.4 * var(--u));
	font-family: 'Shantell Sans', cursive;
	text-align: center;
}

.bb__poster--virtus {
	background: #1b1715;
	color: #ff7a1a;
}

.bb__poster--virtus b {
	font-size: calc(6 * var(--u));
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	rotate: -2deg;
	text-shadow: 0.05em 0.05em 0 #5a2a00;
}

.bb__poster--virtus i {
	font-size: calc(2.4 * var(--u));
	font-style: normal;
	color: #f0d9c0;
	opacity: 0.9;
}

.bb__poster--virtus s {
	position: absolute;
	right: 2.5%;
	top: 1.5%;
	font-size: calc(3.4 * var(--u));
	text-decoration: none;
	color: #e8333f;
	rotate: 14deg;
}

.bb__poster--score {
	background: #221c17;
	color: #ffe28a;
}

.bb__poster--score small {
	font-size: calc(2.4 * var(--u));
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #d6c6a6;
	opacity: 0.8;
}

.bb__poster--score b {
	font-size: calc(8.4 * var(--u));
	font-weight: 800;
	line-height: 1;
	rotate: -2deg;
	text-shadow: 0.04em 0.04em 0 #5a3a00;
}

.prop-bb--big {
	width: calc(66 * var(--u));
	height: calc(45 * var(--u));
}

.bb__poster--chapter {
	background: linear-gradient(180deg, #ffd66e, #ffb63b);
	color: #2b1a1f;
	gap: calc(1 * var(--u));
}

.bb__poster--chapter b {
	font-size: calc(9.5 * var(--u));
	font-weight: 800;
	line-height: 1;
	rotate: -3deg;
	text-shadow: 0.05em 0.05em 0 rgba(110, 60, 10, 0.3);
}

.bb__poster--chapter i {
	font-size: calc(4.4 * var(--u));
	font-style: normal;
	font-weight: 700;
	rotate: -1.5deg;
}

.bb__poster--chapter img {
	position: absolute;
	right: 3.5%;
	top: 5%;
	width: calc(7 * var(--u));
	filter: brightness(0);
	opacity: 0.8;
	rotate: 12deg;
}

.bb__poster--popusk {
	color: #1b1215;
	background: linear-gradient(180deg, #ffc64a, #f59a1f);
	clip-path: inset(0 100% 0 0);
	animation: bbWipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
}

.prop-bb--static .bb__poster--popusk {
	clip-path: none;
	animation: none;
}

.prop-bb--big .bb__poster--popusk img {
	width: calc(13 * var(--u));
}

.prop-bb--big .bb__poster--popusk b {
	font-size: calc(7.6 * var(--u));
}

@keyframes bbWipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

.bb__poster--popusk img {
	width: calc(9 * var(--u));
	filter: brightness(0);
}

.bb__poster--popusk b {
	font-size: calc(5.4 * var(--u));
	font-weight: 800;
	line-height: 1;
	rotate: -2deg;
	text-shadow: 0.045em 0.045em 0 rgba(255, 255, 255, 0.45);
}

.bb__tear {
	filter: drop-shadow(calc(0.3 * var(--u)) calc(0.4 * var(--u)) 0 rgba(0, 0, 0, 0.35));
}

.bb__half {
	position: absolute;
	inset: 0;
	animation: 1.6s linear 0.9s forwards;
}

.bb__half > .bb__poster {
	box-shadow: inset 0 0 0 calc(0.3 * var(--u)) var(--ink);
}

.bb__half--l {
	clip-path: polygon(0 0, 52% 0, 46% 18%, 55% 34%, 47% 52%, 54% 70%, 48% 86%, 52% 100%, 0 100%);
	animation-name: bbTearL;
	transform-origin: 4% 7%;
}

.bb__half--r {
	clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 48% 86%, 54% 70%, 47% 52%, 55% 34%, 46% 18%);
	animation-name: bbTearR;
	transform-origin: 96% 7%;
}

@keyframes bbTearL {
	0% {
		transform: none;
	}

	12% {
		transform: translateX(-2%) rotate(-3deg);
	}

	40% {
		transform: rotate(58deg);
	}

	62% {
		transform: rotate(36deg);
	}

	80% {
		transform: rotate(49deg);
	}

	100% {
		transform: rotate(44deg);
	}
}

@keyframes bbTearR {
	0% {
		transform: none;
	}

	12% {
		transform: translateX(2%) rotate(3deg);
	}

	40% {
		transform: rotate(-58deg);
	}

	62% {
		transform: rotate(-36deg);
	}

	80% {
		transform: rotate(-49deg);
	}

	100% {
		transform: rotate(-44deg);
	}
}

.prop-hearts {
	left: var(--x);
	bottom: calc(var(--y) * var(--u));
	width: 0;
	height: 0;
}

.prop-hearts i {
	position: absolute;
	left: 0;
	bottom: 0;
	font-style: normal;
	font-size: calc((2.4 + var(--i) * 0.3) * var(--u));
	color: #e8333f;
	--ol: calc(0.14 * var(--u));
	text-shadow: var(--ol) 0 0 var(--ink), calc(-1 * var(--ol)) 0 0 var(--ink), 0 var(--ol) 0 var(--ink), 0 calc(-1 * var(--ol)) 0 var(--ink);
	opacity: 0;
	animation: heartUp 2.4s ease-out calc(var(--i) * 0.33s) infinite;
}

@keyframes heartUp {
	0% {
		opacity: 0;
		transform: translate(-50%, 0) scale(0.4);
	}

	15% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--dx) * var(--u)), calc(-22 * var(--u))) rotate(var(--rr)) scale(1.1);
	}
}

.prop-rain {
	left: var(--x);
	bottom: calc(var(--y) * var(--u));
	width: calc(var(--span, 0) * 1% + 30 * var(--u));
	height: calc(14 * var(--u));
	translate: -50% 0;
	animation: rainIn 0.7s ease both;
}

@keyframes rainIn {
	from {
		opacity: 0;
		transform: translateY(-3rem);
	}
}

.prop-rain svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: #8e8a84;
	stroke: var(--ink);
	stroke-width: 3.6;
	stroke-linejoin: round;
	animation: rainFloat 3s ease-in-out infinite alternate;
}

@keyframes rainFloat {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 calc(-0.8 * var(--u));
	}
}

.prop-rain i {
	position: absolute;
	left: var(--l);
	top: 85%;
	width: calc(0.32 * var(--u));
	height: calc(2.8 * var(--u));
	border-radius: 1rem;
	background: var(--ink);
	opacity: 0;
	animation: rainDrop 0.85s linear var(--d) infinite;
}

@keyframes rainDrop {
	0% {
		opacity: 0;
		transform: translateY(0);
	}

	10% {
		opacity: 0.55;
	}

	100% {
		opacity: 0;
		transform: translateY(calc(var(--h) * var(--u)));
	}
}

.prop-stamp {
	left: var(--x);
	top: var(--y);
	padding: 0.08em 0.33em;
	font-family: 'Shantell Sans', cursive;
	font-weight: 800;
	font-size: calc(3.6 * var(--u));
	line-height: 1.1;
	color: #fff;
	background: #c8102e;
	border: 0.1em solid var(--cap-ink);
	box-shadow: 0.11em 0.14em 0 rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	transform: translate(-50%, 0) rotate(var(--r));
	opacity: 0;
	animation: stampSlam 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) var(--d) forwards;
	z-index: 4;
}

@keyframes stampSlam {
	from {
		opacity: 0;
		transform: translate(-50%, 0) rotate(var(--r)) scale(3);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0) rotate(var(--r)) scale(1);
	}
}

.prop-bubble {
	left: calc(var(--x) + (var(--dx) + 2) * var(--u));
	bottom: calc(var(--y) * var(--u));
	width: calc(15 * var(--u));
	height: calc(10.5 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: calc(1.6 * var(--u));
	font-family: 'Shantell Sans', cursive;
	font-weight: 800;
	font-size: calc(4.4 * var(--u));
	color: var(--ink);
	transform-origin: 15% 100%;
	animation: actorPopIn 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.7s both;
}

.prop-bubble svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: #fff8ec;
	stroke: var(--ink);
	stroke-width: 4;
	stroke-linejoin: round;
	z-index: -1;
}

@keyframes actorPopIn {
	from {
		opacity: 0;
		transform: scale(0);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.prop-idea {
	left: var(--x);
	bottom: calc((var(--y) + 1) * var(--u));
	width: calc(16 * var(--u));
	height: calc(22 * var(--u));
	translate: -50% 0;
	transform-origin: 50% 100%;
	animation: actorPopIn 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 0.9s both;
}

.idea__rays {
	position: absolute;
	left: 50%;
	top: 38%;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	translate: -50% -50%;
	stroke: #ffd34d;
	stroke-width: 2.4;
	stroke-linecap: round;
	overflow: visible;
	opacity: 0.9;
	animation: ideaRays 9s linear infinite;
}

@keyframes ideaRays {
	to {
		rotate: 360deg;
	}
}

.idea__bulb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: #ffe68a;
	stroke: var(--ink);
	stroke-width: 3.6;
	stroke-linejoin: round;
	stroke-linecap: round;
	filter: drop-shadow(0 0 calc(1.6 * var(--u)) rgba(255, 210, 80, 0.75));
}

.idea__logo {
	position: absolute;
	left: 50%;
	top: 29%;
	width: calc(8.4 * var(--u));
	translate: -50% -50%;
	filter: brightness(0);
	opacity: 0.9;
}

.prop-confetti {
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.prop-confetti i {
	position: absolute;
	left: var(--x);
	top: calc(-4 * var(--u));
	width: calc(1.8 * var(--u));
	height: calc(1.1 * var(--u));
	background: var(--c);
	border: calc(0.22 * var(--u)) solid var(--ink);
	opacity: 0;
	animation: confettiFall var(--t) linear var(--d) infinite;
}

@keyframes confettiFall {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		transform: translate(calc(var(--sw) * var(--u)), 50vh) rotate(380deg);
	}

	100% {
		opacity: 1;
		transform: translate(0, 100vh) rotate(720deg);
	}
}

.actor__sweat {
	position: absolute;
	left: 5%;
	top: 0;
	width: 90%;
	aspect-ratio: 1;
	z-index: 3;
	transform-origin: 50% 88%;
	rotate: var(--ht, 0deg);
	scale: var(--hs, 1);
	pointer-events: none;
	transition: rotate 0.5s ease, scale 0.5s ease;
}

.actor__drop {
	position: absolute;
	height: auto;
	aspect-ratio: 20 / 28;
	overflow: visible;
	fill: #bfe6ff;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.actor__drop ellipse {
	fill: #fff;
	stroke: none;
	opacity: 0.85;
}

.actor__drop--1 {
	left: 79%;
	top: 15%;
	width: 15%;
	rotate: 14deg;
	animation: dropSlide 2.4s ease-in-out var(--d) infinite;
}

.actor__drop--2 {
	left: 85%;
	top: 42%;
	width: 8%;
	rotate: 8deg;
	opacity: 0;
	animation: dropFall 1.8s ease-in calc(var(--d) + 0.6s) infinite;
}

@keyframes dropSlide {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 4% 12%;
	}
}

@keyframes dropFall {
	0% {
		opacity: 0;
		translate: 0 0;
	}

	15% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		translate: -10% 260%;
	}
}

.topbar__auth {
	position: relative;
}

.topbar__auth:empty {
	display: none;
}

.topbar__login {
	height: 3.4rem;
	padding: 0 1.6rem;
	background: transparent;
	border: 0.1rem solid var(--brand);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--brand);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.topbar__login:hover {
	background: var(--brand);
	color: var(--brand-ink);
}

.topbar__user {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 3.4rem;
	padding: 0 1.4rem 0 0.4rem;
	border: 0.1rem solid rgba(255, 255, 255, 0.25);
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s;
}

.topbar__user:hover {
	border-color: var(--brand);
}

.topbar__avatar {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	overflow: hidden;
	background: var(--brand);
	font-weight: 600;
	color: var(--brand-ink);
}

.topbar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topbar__nick {
	letter-spacing: 0.04rem;
	text-transform: none;
}

.topbar__menu {
	position: absolute;
	top: calc(100% + 0.8rem);
	right: 0;
	z-index: 30;
	min-width: 100%;
	background: #141c26;
	border: 0.1rem solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.5);
}

.topbar__menu[hidden] {
	display: none;
}

.topbar__menu a {
	display: block;
	padding: 1.2rem 1.6rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	color: var(--text);
	white-space: nowrap;
}

.topbar__menu a:hover {
	color: var(--brand);
	background: rgba(255, 255, 255, 0.05);
}

.auth {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth[hidden] {
	display: none;
}

.auth__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 10, 0.78);
	backdrop-filter: blur(0.6rem);
	animation: profileFade 0.3s ease both;
}

.auth__box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	width: 46rem;
	padding: 3.2rem 4rem;
	background: linear-gradient(160deg, rgba(24, 30, 39, 0.98), rgba(12, 16, 22, 0.98));
	border-top: 0.3rem solid var(--brand);
	box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.6);
	animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth__close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	width: 3.6rem;
	height: 3.6rem;
	border: 0.1rem solid rgba(255, 255, 255, 0.2);
	font-size: 1.6rem;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s;
}

.auth__close:hover {
	border-color: var(--brand);
}

.auth__logo {
	align-self: center;
	width: 6.4rem;
	height: 6.4rem;
	object-fit: contain;
}

.auth__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 3.6rem;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: var(--text);
}

.auth__lead {
	margin-top: -0.4rem;
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: center;
	color: var(--muted);
	text-wrap: balance;
}

.auth__providers {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.8rem;
	margin-top: 0.6rem;
}

a.auth__provider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	height: 4.6rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	color: #fff;
	transition: filter 0.2s, translate 0.2s;
}

a.auth__provider:hover {
	filter: brightness(1.12);
	translate: 0 -0.2rem;
}

.auth__provider svg {
	flex: none;
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}

a.auth__provider--google {
	background: #fff;
	color: #1f1f1f;
}

.auth__provider--discord {
	background: #5865f2;
}

.auth__provider--twitch {
	background: #9146ff;
}

.auth__notice {
	margin-top: -0.4rem;
	font-size: 1.2rem;
	line-height: 1.45;
	text-align: center;
	color: var(--muted);
	text-wrap: balance;
}

.auth__notice a {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.auth__notice a:hover {
	color: var(--brand);
}

.auth__or {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 1.2rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--muted);
}

.auth__or::before,
.auth__or::after {
	content: '';
	flex: 1;
	height: 0.1rem;
	background: rgba(255, 255, 255, 0.12);
}

.auth__form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.auth__field {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 1.2rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--muted);
}

.auth__field input {
	width: 100%;
	padding: 1.2rem 1.4rem;
	background: rgba(255, 255, 255, 0.05);
	border: 0.1rem solid rgba(255, 255, 255, 0.15);
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	transition: border-color 0.2s;
}

.auth__field input:focus {
	border-color: var(--brand);
	outline: none;
}

.auth__hp {
	position: absolute;
	left: -999rem;
	width: 0.1rem;
	height: 0.1rem;
	opacity: 0;
}

.auth__submit {
	margin-top: 0.4rem;
	padding: 1.4rem;
	background: var(--brand);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
	color: var(--brand-ink);
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

.auth__submit:hover {
	background: color-mix(in srgb, var(--brand), #fff 15%);
}

.auth__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.auth__status {
	font-size: 1.4rem;
	text-align: center;
	color: var(--loss);
}

.auth__status:empty {
	display: none;
}

.auth__switch {
	font-size: 1.4rem;
	text-align: center;
	color: var(--muted);
}

.auth__switch button,
.aim__link {
	font: inherit;
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 0.3rem;
	cursor: pointer;
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 4rem;
	z-index: 250;
	padding: 1.4rem 2.6rem;
	background: rgba(15, 22, 30, 0.96);
	border-left: 0.3rem solid var(--brand);
	box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.5);
	font-size: 1.6rem;
	color: var(--text);
	translate: -50% 2rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, translate 0.25s ease;
}

.toast.is-shown {
	opacity: 1;
	translate: -50% 0;
}

.toast b {
	color: var(--brand);
}

.auth__control {
	position: relative;
	display: block;
}

.auth__control:has(.auth__eye) input {
	padding-right: 5rem;
}

.auth__eye {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	color: var(--muted);
	cursor: pointer;
	translate: 0 -50%;
	transition: color 0.2s;
}

.auth__eye svg {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}

.auth__eye:hover,
.auth__eye.is-on {
	color: var(--text);
}

.auth__eye.is-on svg {
	fill: var(--brand);
}

.auth__field.is-error input {
	border-color: var(--loss);
}

.auth__error {
	font-size: 1.3rem;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	color: var(--loss);
}

.auth__error:empty {
	display: none;
}

.auth__meter {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	align-items: center;
	gap: 0.4rem;
}

.auth__meter i {
	height: 0.3rem;
	background: rgba(255, 255, 255, 0.12);
	transition: background 0.2s;
}

.auth__meter b {
	min-width: 13rem;
	margin-left: 0.8rem;
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: 0;
	text-align: right;
	text-transform: none;
	color: var(--muted);
}

.auth__meter[data-level='1'] i:nth-of-type(1) {
	background: var(--loss);
}

.auth__meter[data-level='2'] i:nth-of-type(-n + 2) {
	background: var(--gold);
}

.auth__meter[data-level='3'] i:nth-of-type(-n + 3),
.auth__meter[data-level='4'] i {
	background: var(--ready);
}

.auth__lead b {
	font-weight: 500;
	color: var(--text);
}

.auth__field input.auth__code {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 2.8rem;
	letter-spacing: 1.2rem;
	text-align: center;
}

.auth__link {
	align-self: center;
	font-size: 1.4rem;
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 0.3rem;
	cursor: pointer;
}

.auth__link:disabled {
	color: var(--muted);
	text-decoration: none;
	cursor: default;
}

.auth__status.is-ok {
	color: var(--ready);
}

.legal {
	position: absolute;
	left: var(--wrapper-padding);
	bottom: 2.4rem;
	display: flex;
	gap: 2.4rem;
	transition: opacity 0.45s ease;
}

.legal a {
	font-size: 1.25rem;
	letter-spacing: 0.04rem;
	color: rgba(236, 232, 225, 0.38);
	transition: color 0.2s;
}

.legal a:hover {
	color: var(--brand);
}

.lobby.is-focus .legal {
	opacity: 0;
	pointer-events: none;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.3rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--muted);
	cursor: pointer;
}

.consent input {
	flex: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	margin-top: 0.1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 0.1rem solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.consent input::after {
	content: '';
	width: 0.9rem;
	height: 0.5rem;
	margin-top: -0.2rem;
	border: solid var(--brand-ink);
	border-width: 0 0 0.2rem 0.2rem;
	rotate: -45deg;
	opacity: 0;
}

.consent input:checked {
	background: var(--brand);
	border-color: var(--brand);
}

.consent input:checked::after {
	opacity: 1;
}

.consent a {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.consent a:hover {
	color: var(--brand);
}

.consent.is-error input {
	border-color: var(--loss);
	box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--loss) 25%, transparent);
}