@font-face {
	font-family: "PeydaWeb";
	src: url("https://rubigame.ir/wp-content/uploads/font/PeydaWeb-Medium.woff2") format("woff2");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "PeydaWeb";
	src: url("https://rubigame.ir/wp-content/uploads/font/PeydaWeb-Bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "PeydaWeb";
	src: url("https://rubigame.ir/wp-content/uploads/font/PeydaWeb-ExtraBold.woff2") format("woff2");
	font-style: normal;
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: "PeydaWeb";
	src: url("https://rubigame.ir/wp-content/uploads/font/PeydaWeb-ExtraBold.woff2") format("woff2");
	font-style: normal;
	font-weight: 900;
	font-display: swap;
}

.rbxw {
	--rbxw-bg: #07091f;
	--rbxw-panel: #0e1232;
	--rbxw-panel-2: #13183d;
	--rbxw-text: #f4f2ff;
	--rbxw-muted: #aaa8c8;
	--rbxw-border: #30265c;
	--rbxw-accent: #e93caf;
	--rbxw-accent-strong: #9f45ee;
	--rbxw-on-accent: #ffffff;
	--rbxw-error: #ff6689;
	--rbxw-radius: 16px;
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
	gap: clamp(24px, 5vw, 72px);
	max-width: 1180px;
	margin: 32px auto;
	padding: clamp(24px, 5vw, 72px);
	overflow: hidden;
	border: 1px solid var(--rbxw-border);
	border-radius: var(--rbxw-radius);
	background:
		radial-gradient(circle at 6% 88%, rgba(127, 54, 203, .18), transparent 30%),
		radial-gradient(circle at 94% 4%, rgba(225, 48, 169, .12), transparent 34%),
		var(--rbxw-bg);
	color: var(--rbxw-text);
	font-family: "PeydaWeb", Tahoma, Arial, sans-serif;
	line-height: 1.65;
	box-shadow: 0 28px 80px rgba(2, 3, 18, .42), inset 0 1px 0 rgba(255, 255, 255, .025);
}

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

.rbxw__ambient {
	position: absolute;
	inset: auto auto -20% -6%;
	z-index: -1;
	display: grid;
	width: clamp(220px, 34vw, 420px);
	aspect-ratio: 1;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(189, 66, 232, .22);
	background: radial-gradient(circle at 34% 30%, rgba(233, 60, 175, .28), rgba(92, 48, 175, .13) 54%, transparent 72%);
	filter: blur(.2px);
	transform: rotate(-11deg);
}

.rbxw__ambient span {
	color: rgba(221, 211, 255, .13);
	font-size: clamp(76px, 14vw, 170px);
	font-weight: 900;
	letter-spacing: -.08em;
	line-height: 1;
}

.rbxw__story { align-self: center; padding-block: 18px; }

.rbxw__eyebrow {
	margin: 0 0 18px;
	color: #ec4ab7;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
}

.rbxw__title {
	max-width: 12ch;
	margin: 0;
	color: var(--rbxw-text);
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: 1.1;
}

.rbxw__lead {
	max-width: 48ch;
	margin: 24px 0 0;
	color: var(--rbxw-muted);
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.9;
}

.rbxw__trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
}

.rbxw__trust > div {
	display: grid;
	grid-template-columns: 12px 1fr;
	gap: 0 10px;
	align-items: center;
}

.rbxw__trust-mark {
	grid-row: 1 / 3;
	width: 10px;
	height: 10px;
	border: 3px solid var(--rbxw-accent);
	border-radius: 50%;
}

.rbxw__trust strong { color: var(--rbxw-text); font-size: 14px; }
.rbxw__trust small { color: var(--rbxw-muted); font-size: 12px; }

.rbxw__panel {
	position: relative;
	align-self: center;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--rbxw-border);
	border-radius: var(--rbxw-radius);
	background: linear-gradient(145deg, rgba(18, 23, 61, .97), rgba(10, 13, 42, .98));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 50px rgba(2, 3, 18, .38);
}

.rbxw__sale {
	width: fit-content;
	margin: -48px 0 20px auto;
	padding: 8px 13px;
	border: 1px solid rgba(233, 60, 175, .44);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--rbxw-accent-strong), var(--rbxw-accent));
	color: var(--rbxw-on-accent);
	font-size: 12px;
	font-weight: 900;
}

.rbxw__form { margin: 0; }
.rbxw__field-group + .rbxw__field-group { margin-top: 22px; }
.rbxw__field-group label { display: block; margin-bottom: 10px; color: var(--rbxw-text); font-size: 14px; font-weight: 800; }

.rbxw__stepper {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	gap: 8px;
}

.rbxw__stepper button {
	display: grid;
	min-width: 48px;
	min-height: 52px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--rbxw-border);
	border-radius: 12px;
	background: var(--rbxw-panel-2);
	color: var(--rbxw-text);
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.rbxw__stepper button:hover { border-color: var(--rbxw-accent-strong); background: #1b1746; }
.rbxw__stepper button:active { transform: scale(.97); }

.rbxw__input-shell { position: relative; min-width: 0; }
.rbxw__input-shell span { position: absolute; top: 50%; left: 16px; color: var(--rbxw-muted); font-weight: 900; transform: translateY(-50%); pointer-events: none; }

.rbxw input[type="number"], .rbxw__username, .rbxw__gamepass-input {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--rbxw-border);
	border-radius: 12px;
	outline: 0;
	background: rgba(8, 11, 35, .58);
	color: var(--rbxw-text);
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.rbxw input[type="number"] { padding-left: 50px; text-align: center; -moz-appearance: textfield; }
.rbxw input[type="number"]::-webkit-inner-spin-button, .rbxw input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.rbxw input::placeholder { color: color-mix(in srgb, var(--rbxw-muted) 74%, transparent); font-weight: 500; }
.rbxw input:focus { border-color: var(--rbxw-accent-strong); box-shadow: 0 0 0 3px rgba(159, 69, 238, .22); }
.rbxw input[aria-invalid="true"] { border-color: var(--rbxw-error); box-shadow: 0 0 0 3px rgba(255, 102, 137, .16); }

.rbxw__hint { min-height: 22px; margin: 7px 2px 0; color: var(--rbxw-muted); font-size: 12px; }

.rbxw__field-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.rbxw__field-meta .rbxw__hint { margin: 0; }

.rbxw__tutorial {
	display: inline-flex;
	min-height: 44px;
	padding: 8px 13px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(159, 69, 238, .54);
	border-radius: 12px;
	background: rgba(159, 69, 238, .1);
	color: var(--rbxw-text) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none !important;
	white-space: nowrap;
	touch-action: manipulation;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.rbxw__tutorial:hover { border-color: var(--rbxw-accent); background: rgba(233, 60, 175, .1); }
.rbxw__tutorial:active { transform: scale(.98); }
.rbxw__tutorial b { font-family: Arial, sans-serif; font-size: 16px; font-weight: 700; }

.rbxw__field-error {
	margin: 8px 2px 0;
	color: var(--rbxw-error);
	font-size: 12px;
	font-weight: 700;
}

.rbxw__field-error[hidden] { display: none; }

.rbxw__summary {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	min-height: 86px;
	margin-top: 24px;
	padding: 18px;
	border-radius: 12px;
	border: 1px solid rgba(110, 77, 185, .16);
	background: rgba(20, 25, 62, .82);
}

.rbxw__summary > div { display: grid; gap: 4px; }
.rbxw__summary span { color: var(--rbxw-muted); font-size: 12px; }
.rbxw__summary del { color: var(--rbxw-muted); font-size: 12px; }
.rbxw__summary > strong { color: var(--rbxw-text); font-size: clamp(20px, 3vw, 28px); font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }

.rbxw__error {
	display: none;
	min-height: 24px;
	margin: 12px 0 0;
	padding: 9px 12px;
	border-inline-start: 3px solid var(--rbxw-error);
	border-radius: 8px;
	background: rgba(255, 102, 137, .08);
	color: var(--rbxw-error);
	font-size: 13px;
	font-weight: 700;
}

.rbxw__error.is-visible { display: block; }

.rbxw__submit {
	display: flex;
	width: 100%;
	min-height: 56px;
	margin-top: 16px;
	padding: 12px 18px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid rgba(228, 61, 178, .78);
	border-radius: 12px;
	background: linear-gradient(110deg, var(--rbxw-accent-strong), var(--rbxw-accent));
	color: var(--rbxw-on-accent);
	font: inherit;
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: inset 0 -2px 0 rgba(34, 9, 66, .24), 0 12px 28px rgba(169, 53, 210, .16);
	transition: background-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.rbxw__submit:hover { background: linear-gradient(110deg, #ad55f1, #f052bd); }
.rbxw__submit:active { transform: scale(.985); }
.rbxw__submit:disabled { cursor: wait; opacity: .66; }
.rbxw__submit b { font-size: 22px; font-weight: 600; transition: transform 160ms ease; }
.rbxw__submit:hover b { transform: translateX(-3px); }

.rbxw__success {
	display: flex;
	margin-top: 12px;
	padding: 12px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid rgba(159, 69, 238, .52);
	border-radius: 12px;
	background: rgba(159, 69, 238, .1);
	color: var(--rbxw-text);
	font-size: 13px;
}

.rbxw__success[hidden] { display: none; }
.rbxw__success a { color: var(--rbxw-text); font-weight: 900; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

.rbxw button:focus-visible, .rbxw a:focus-visible { outline: 3px solid #cf4cc3; outline-offset: 3px; }

@media (max-width: 767px) {
	.rbxw {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		width: calc(100% - 24px);
		margin: 18px auto;
		padding: 24px 16px 16px;
	}

	.rbxw__story { padding: 0 6px; }
	.rbxw__title { max-width: 13ch; font-size: clamp(34px, 11vw, 50px); }
	.rbxw__lead { margin-top: 16px; font-size: 15px; }
	.rbxw__trust { gap: 12px; margin-top: 24px; }
	.rbxw__trust > div { grid-template-columns: 10px 1fr; gap: 0 8px; }
	.rbxw__trust small { font-size: 11px; }
	.rbxw__panel { padding: 18px 14px; }
	.rbxw__sale { margin: -36px 0 16px auto; }
	.rbxw__summary { align-items: center; }
	.rbxw__ambient { right: auto; bottom: 32%; left: -28%; opacity: .42; }
}

@media (max-width: 390px) {
	.rbxw__trust { grid-template-columns: 1fr; }
	.rbxw__summary { align-items: flex-start; flex-direction: column; }
	.rbxw__summary > strong { font-size: 22px; }
	.rbxw__success { align-items: flex-start; flex-direction: column; }
	.rbxw__field-meta { align-items: stretch; flex-direction: column; }
	.rbxw__tutorial { width: 100%; }
}

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

@supports not (color: color-mix(in srgb, white, black)) {
	.rbxw__ambient { background: rgba(159, 69, 238, .18); }
	.rbxw__stepper button:hover { background: var(--rbxw-panel-2); }
	.rbxw input:focus { box-shadow: 0 0 0 3px rgba(159, 69, 238, .22); }
	.rbxw__error { background: var(--rbxw-panel-2); }
	.rbxw__success { background: var(--rbxw-panel-2); }
}