@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
	--font-display: "Syne", sans-serif;
	--font-body: "DM Sans", sans-serif;

	--fs-xs:   11px;
	--fs-sm:   13px;
	--fs-base: 15px;
	--fs-md:   18px;
	--fs-lg:   22px;
	--fs-xl:   28px;
	--fs-2xl:  36px;

	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    600;

	--default-background: #0d0e12;

	--surface-0: #0d0e12;
	--surface-1: #13141a;
	--surface-2: #191b23;
	--surface-3: #1f2029;
	--surface-4: #252731;

	--border-subtle:  rgba(255,255,255,0.05);
	--border-default: rgba(255,255,255,0.09);
	--border-strong:  rgba(255,255,255,0.15);

	--text-primary:   rgba(255,255,255,0.95);
	--text-secondary: rgba(255,255,255,0.65);
	--text-tertiary:  rgba(255,255,255,0.35);

	--accent-violet: #7c5cfc;
	--accent-violet-dim: rgba(124,92,252,0.15);
	--accent-violet-glow: rgba(124,92,252,0.25);

	--accent-gold: #d4a832;
	--accent-gold-dim: rgba(212,168,50,0.15);

	--accent-crimson: #e84054;
	--accent-crimson-dim: rgba(232,64,84,0.15);

	--radius-sm:  6px;
	--radius-md:  10px;
	--radius-lg:  14px;
	--radius-xl:  20px;
	--radius-full: 9999px;

	--shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
	--shadow-md:  0 4px 24px rgba(0,0,0,0.45);
	--shadow-lg:  0 8px 48px rgba(0,0,0,0.55);

	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

	--progress-bar-1:       #4c6ef5;
	--progress-bar-1-hover: #748ffc;
	--progress-bar-2:       #e84054;
	--progress-bar-2-hover: #ff6b7a;
	--progress-bar-3:       #7c1c2a;
	--progress-bar-3-hover: #c52d44;
}

:root[data-theme=red_black] {
	--accent-color-800: var(--surface-4);
	--accent-color-900: var(--surface-3);
	--bg-color-800:     var(--surface-2);
	--bg-color-700:     var(--surface-1);
	--bg-color-900:     var(--surface-0);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

* {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--text-primary);
}

img {
	-webkit-user-drag: none;
	user-drag: none;
}

body {
	background-color: var(--default-background);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::-webkit-scrollbar { width: 0; }

.container {
	max-width: 1427px;
	width: auto;
}

/* ============================================================
   HIDDEN ELEMENTS
   ============================================================ */

.Banner-module__img,
.Header-module__logoWrapper,
.Shop-module__header,
.LangSwitcher-module__currentLang,
.Categories-module__categories,
.Product-module__name,
.MonitoringWidget-module__header,
.Widgets-module__widgetWrapper .boxFooter,
.MonitoringServer-module__icon,
.productModalProductAvailability,
.productModalItemCount,
.ProfileNav-module__header.boxHeader,
.productModalContainsItems,
.productModalContainsTitle,
.ProfileContent-module__header.boxHeader {
	display: none;
}

/* ============================================================
   GLOBAL BORDER-RADIUS
   ============================================================ */

.content__image,
.HeaderButtons-module__container,
.PlayerMenu-module__loginLink,
.Header-module__wrapper,
.custom__btn,
.Servers-module__server,
.Search-module__wrapper,
.Product-module__wrapper,
.DesktopCopyright-module__wrapper,
.MobileCopyright-module__wrapper,
.PlayerBalance-module__btn,
.PlayerMenu-module__profileLink,
.MonitoringServer-module__wrapper,
.MonitoringServer-module__progressBarWrapper,
.Social-Module__wrapper .boxBodyCustom,
.Button-module__btn.Button-module__accent,
.Button-module__btn.Button-module__gray,
.TotalSum-module__inputWrapper,
.CountSelector-module__inputWrapper,
.Toast-module__toast,
.ProductItemSelector-module__items,
.ProductItemSelector-module__item.ProductItemSelector-module__active,
.ProductItemSelector-module__item:hover,
.ProductItemSelector-module__item:focus,
.productModalDescription,
.productModalContainsItem,
.PlayerMenuMobile-module__profileLink,
.PlayerMenuMobile-module__loginLink,
.Widgets-module__widgetWrapper,
.PlayerBalanceModal-module__inputWrapper,
.HeaderNav-module__link:hover,
.HeaderNav-module__link:focus,
.ProfileContent-module__infoWrapper,
.Selector-module__dropDownCurrentItem,
.ProfileContent-module__input,
.ProfileNav-module__img,
.BasketSearch-module__wrapper,
.BasketTable-module__tableHeader,
.BasketTable-module__tableLine:nth-child(2n-1),
.HistorySearch-module__wrapper,
.HistoryTable-module__tableHeader,
.HistoryTable-module__tableLine:nth-child(2n-1),
.Cookie-module__wrapper {
	border-radius: var(--radius-lg) !important;
}

/* ✅ Убран .boxBody:last-child из глобального border-radius —
   он вызывал конфликты при динамическом добавлении элементов */
.boxBody {
	border-radius: var(--radius-lg);
}

.MonitoringWidget-module__header,
.ProfileContent-module__header,
.ProfileNav-module__header,
.BasketContent-module__header.boxHeader,
.HistoryContent-module__header.boxHeader,
.WelcomeSelectServer-module__header.boxHeader,
.ProductModal-module__header.boxHeader,
.PlayerBalanceModal-module__header {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.MonitoringWidget-module__body,
.ProfileNav-module__wrapper .boxFooter,
.ItemContent-module__footer.boxFooter,
.PlayerBalanceModal-module__footer,
.RouletteContent-module__footer.boxFooter {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================
   HEADER
   ============================================================ */

.Header-module__custom {
	margin-bottom: 40px;
	min-height: 56px;
	font-weight: var(--fw-medium);
	font-family: var(--font-display);
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 24px;
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(20px);
	background: rgba(13,14,18,0.85);
	padding: 0 8px;
	border-bottom: 1px solid var(--border-subtle);
}

.Header-module__wrapper {
	padding: 0 80px;
	margin-bottom: 0;
}

.HeaderButtons-module {
	display: flex;
	gap: 24px;
	align-items: center;
}

.HeaderButtons-module__container {
	display: flex;
	gap: 10px;
	padding: 6px;
	align-items: center;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
}

/* ============================================================
   NAV LINKS
   ============================================================ */

.HeaderNav-module__wrapper,
.PlayerBalance-module__btn,
.PlayerMenu-module__profileLink,
.PlayerMenu-module__loginLink {
	text-transform: capitalize;
	letter-spacing: 0.5px;
}

.HeaderNav-module__link,
.PlayerMenuMobile-module__profileLink,
.PlayerMenuMobile-module__loginLink {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-base);
	color: var(--text-secondary);
	padding: 14px 12px;
	position: relative;
	transition: color 0.25s var(--ease-out-cubic);
	text-decoration: none;
}

.HeaderNav-module__link:hover,
.HeaderNav-module__link:focus {
	color: var(--text-primary);
}

.HeaderNav-module__link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--accent-violet);
	border-radius: var(--radius-full);
	transform: scaleX(0);
	transition: transform 0.25s var(--ease-out-cubic);
}

.HeaderNav-module__link:hover::after,
.HeaderNav-module__link:focus::after,
.HeaderNav-module__linkActive::after {
	transform: scaleX(1);
}

.HeaderNav-module__linkActive {
	color: var(--text-primary) !important;
}

/* ============================================================
   PLAYER MENU & LOGIN
   ============================================================ */

.PlayerMenu-module__loginLink,
.PlayerBalance-module__btn,
.PlayerMenu-module__profileLink {
	background: var(--surface-2);
	font-weight: var(--fw-medium);
	border: 1px solid var(--border-subtle);
	transition: background 0.2s, border-color 0.2s;
}

.PlayerMenu-module__loginLink:hover,
.PlayerBalance-module__btn:hover,
.PlayerMenu-module__profileLink:hover {
	background: var(--surface-3);
	border-color: var(--border-default);
}

.PlayerMenu-module__loginLink {
	line-height: 1.4;
	letter-spacing: 0.5px;
	padding: 10px 14px;
	font-family: var(--font-display);
}

.PlayerMenu-module__loginLink > p > span {
	font-weight: var(--fw-bold);
}

.PlayerMenu-module__avatar {
	border-radius: 50%;
	border: 2px solid var(--accent-violet);
	width: 46px;
	height: 46px;
	transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}

.PlayerMenu-module__avatar:hover,
.PlayerMenu-module__avatar:focus {
	transform: scale(1.12);
	box-shadow: 0 0 0 3px var(--accent-violet-glow);
}

.PlayerMenu-module__avatar > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* ============================================================
   MODAL
   ============================================================ */

.ModalLayout-module__positionWrapper,
.customModalPosition {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	backdrop-filter: blur(14px);
	background: rgba(0,0,0,0.4);
	transition: backdrop-filter 0.4s;
}

/* ============================================================
   PROMO / BONUS BANNERS
   ============================================================ */

.Container__promo {
	background: linear-gradient(135deg, #1e1452 0%, #2e1d6b 100%);
	border: 1px solid rgba(124,92,252,0.25);
	transition: transform 0.25s var(--ease-out-cubic), box-shadow 0.25s;
	backface-visibility: hidden;
}

.Container__promo:hover {
	box-shadow: 0 12px 60px rgba(124,92,252,0.3);
	transform: translateY(-4px) scale(1.02);
}

.Container__bonus {
	background: linear-gradient(135deg, #2c2000 0%, #4a3800 100%);
	border: 1px solid rgba(212,168,50,0.25);
	transition: transform 0.25s var(--ease-out-cubic), box-shadow 0.25s;
	backface-visibility: hidden;
}

.Container__bonus:hover {
	box-shadow: 0 12px 60px rgba(212,168,50,0.25);
	transform: translateY(-4px) scale(1.02);
}

.content__image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}

.Container__promo .content__image {
	background: rgba(124,92,252,0.3);
	box-shadow: 0 0 30px rgba(124,92,252,0.4);
}

.Container__bonus .content__image {
	background: rgba(212,168,50,0.25);
	box-shadow: 0 0 30px rgba(212,168,50,0.35);
}

.content__text {
	font-weight: var(--fw-light);
	font-size: var(--fs-base);
	color: var(--text-secondary);
}

/* ============================================================
   NEWS SECTION
   ============================================================ */

.newsContainer {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-bottom: 48px;
}

.News-module__container {
	height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px 44px;
	gap: 12px;
	border-radius: var(--radius-xl);
	position: relative;
	overflow: hidden;
}

.News-module__container::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 0;
}

.News-module__container > * {
	position: relative;
	z-index: 1;
}

.news__promo {
	background-image: url(https://gspics.org/images/2024/02/28/0e1ybj.png);
	background-size: cover;
	background-position: center;
}

.news__24h {
	background-image: url(https://gspics.org/images/2024/02/28/0e1pME.png);
	background-size: cover;
	background-position: center;
}

.News-module__container.news__promo { width: 40% !important; }
.News-module__container.news__24h   { width: 60% !important; }

.news__promo > .title  { width: 220px; }
.news__24h > .title    { width: 340px; }

.News-module__container > .title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: #fff;
	line-height: 1.2;
}

.News-module__container > .description {
	color: rgba(255,255,255,0.7);
	font-size: var(--fs-sm);
	width: 215px;
}

.News-module__container > p > span {
	font-weight: var(--fw-bold);
}

/* Animated CTA buttons */
.custom__btn {
	width: 160px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.5px;
	border-radius: var(--radius-md);
}

.news__promo > .custom__btn {
	animation: ctaViolet 3s ease-in-out infinite;
}

.news__24h > .custom__btn {
	animation: ctaBlue 3s ease-in-out infinite;
}

@keyframes ctaViolet {
	0%,100% { background: #6241d8; box-shadow: 0 4px 20px rgba(98,65,216,0.25); color: rgba(255,255,255,0.8); }
	50%      { background: #7c5cfc; box-shadow: 0 4px 32px rgba(124,92,252,0.55); color: #fff; }
}

@keyframes ctaBlue {
	0%,100% { background: #2c4cb3; box-shadow: 0 4px 20px rgba(44,76,179,0.25); color: rgba(255,255,255,0.8); }
	50%      { background: #4268e0; box-shadow: 0 4px 32px rgba(66,104,224,0.55); color: #fff; }
}

/* ============================================================
   MODULES CONTAINER
   ============================================================ */

.Modules-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.Modules-container > .content {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 16px;
}

.Modules-container > .title,
.ProductModal-module__header.boxHeader {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--text-primary);
	letter-spacing: -0.3px;
}

.HeaderLinks-module {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

/* ============================================================
   SEARCH
   ============================================================ */

.Search-module__wrapper {
	margin-top: 0;
	height: 40px;
	max-width: 300px;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	transition: border-color 0.2s;
}

.Search-module__wrapper:focus-within {
	border-color: var(--accent-violet);
	box-shadow: 0 0 0 3px var(--accent-violet-dim);
}

.Search-module__input {
	font-size: var(--fs-sm);
	min-width: 240px;
	width: 100%;
	padding: 0 12px;
	background: transparent;
	color: var(--text-primary);
}

.Search-module__input::placeholder {
	color: var(--text-tertiary);
}

/* ============================================================
   SERVERS
   ============================================================ */

.Servers-module__servers {
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
}

.Servers-module__server {
	margin: 0 8px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--text-secondary);
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	transition: all 0.2s var(--ease-out-cubic);
}

.Servers-module__server.Servers-module__active,
.Servers-module__server:hover,
.Servers-module__server:focus {
	background: var(--surface-4);
	border-color: var(--accent-violet);
	color: var(--text-primary);
	box-shadow: 0 0 0 1px var(--accent-violet-dim);
}

/* ============================================================
   PRODUCTS GRID
   ============================================================ */

.Products-module__wrapper {
	margin-top: 24px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}

.Product-module__wrapper {
	height: auto;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: var(--surface-1);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 0.25s var(--ease-out-cubic),
	            border-color 0.25s,
	            box-shadow 0.25s;
	position: relative;
}

.Product-module__wrapper:hover {
	transform: translateY(-8px);
	border-color: var(--border-default);
	box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border-default);
	background: var(--surface-2);
}

.Product-module__img {
	width: 85%;
	flex: 1;
	object-fit: contain;
	padding: 12px 8px 6px;
}

.Product-module__price {
	position: static;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	background: rgba(13,14,18,0.85);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--border-subtle);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	transition: background 0.2s, border-color 0.2s;
	flex-shrink: 0;
}

.Product-module__wrapper:hover .Product-module__price {
	background: rgba(124,92,252,0.15);
	border-color: var(--accent-violet);
}

.Product-module__discount {
	top: -10px;
	right: -10px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	font-family: var(--font-display);
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid var(--surface-0);
	background: var(--accent-violet);
	color: #fff;
	transition: transform 0.2s var(--ease-spring);
}

.Product-module__wrapper:hover .Product-module__discount {
	transform: scale(1.1);
}

.Product-module__oldPrice {
	position: relative;
	margin-right: 8px;
	font-size: var(--fs-xs);
	opacity: 0.5;
	text-decoration: line-through;
}

.span__price {
	display: flex;
	align-items: center;
	gap: 5px;
}

.Product-module__wrapper > .Product-module__price > .span__price > img {
	opacity: 0.6;
	transition: opacity 0.2s;
}

.Product-module__wrapper:hover > .Product-module__price > .span__price > img {
	opacity: 1;
}

/* ============================================================
   MONITORING
   ============================================================ */

.MonitoringServer-module__wrapper {
	background: var(--surface-1);
	border: 1px solid var(--border-subtle);
	padding: 16px;
	border-radius: var(--radius-lg);
	transition: transform 0.25s var(--ease-out-cubic),
	            border-color 0.25s,
	            box-shadow 0.25s;
	backface-visibility: hidden;
}

.MonitoringServer-module__wrapper:hover {
	transform: scale(1.03);
	border-color: var(--border-default);
	box-shadow: var(--shadow-md);
}

.MonitoringServer-module__wrapper:hover > .MonitoringServer-module__name,
.MonitoringServer-module__wrapper:hover > .MonitoringServer-module__info {
	color: var(--text-primary);
}

.MonitoringServer-module__wrapper > .MonitoringServer-module__name,
.MonitoringServer-module__info {
	transition: color 0.2s;
	color: var(--text-secondary);
}

.MonitoringServer-module__info {
	font-size: var(--fs-xs);
	color: var(--text-tertiary);
}

.MonitoringServer-module__wrapper + .MonitoringServer-module__wrapper {
	margin-top: 16px;
}

.MonitoringServer-module__progressBarWrapper {
	height: 5px;
	background: rgba(255,255,255,0.06);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.MonitoringServer-module__progressBarAnim {
	border-radius: var(--radius-full);
	box-shadow: none;
	transition: background 0.25s, width 0.6s var(--ease-out-cubic);
}

[data-monitoringserverid="34954"] .MonitoringServer-module__progressBarAnim {
	background: var(--progress-bar-1);
}
[data-monitoringserverid="34931"] .MonitoringServer-module__progressBarAnim {
	background: var(--progress-bar-3);
}
[data-monitoringserverid="34954"]:hover .MonitoringServer-module__progressBarAnim {
	background: var(--progress-bar-1-hover);
}
[data-monitoringserverid="34931"]:hover .MonitoringServer-module__progressBarAnim {
	background: var(--progress-bar-3-hover);
}

/* ============================================================
   SOCIAL WIDGET
   ============================================================ */

.Social-Module__wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 14px 0;
}

.Social-Module__wrapper .boxBodyCustom {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	transition: background 0.2s, border-color 0.2s;
}

.Social-Module__wrapper .boxBodyCustom:hover {
	background: var(--surface-3);
	border-color: var(--border-default);
	color: var(--text-primary);
}

.Social-Module__wrapper .boxBodyCustom > p {
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
}

/* ============================================================
   DISCORD BOX
   ============================================================ */

.discord__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}

.discord__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin-bottom: 16px;
	border: 2px solid var(--border-default);
	animation: spin 4s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.btn__ds {
	text-decoration: none;
	background: var(--surface-3);
	border: 1px solid var(--border-default);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-base);
	font-family: var(--font-display);
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn__ds:hover {
	background: var(--surface-4);
	border-color: var(--accent-violet);
	box-shadow: 0 0 20px var(--accent-violet-glow);
}

.btn__ds img {
	width: 20px;
	height: 20px;
}

/* ============================================================
   BOX SYSTEM
   ============================================================ */

.boxHeader,
.boxBody,
.boxFooter {
	padding: 16px;
	margin: 4px;
}

.boxBody {
	background: var(--surface-1);
	border-radius: var(--radius-lg);
}

.widgetWrapper--flex .boxBody {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	border-radius: var(--radius-lg);
	transition: transform 0.25s var(--ease-out-cubic);
}

.widgetWrapper--flex .boxBody:hover {
	transform: translateY(-8px);
}

.Shop-module__wrapper .boxBody,
.Shop-module__wrapper .boxFooter,
.MonitoringWidget-module__body.boxBody,
.Social-Module__wrapper .boxBody,
.ProfileNav-module__wrapper .boxFooter {
	background: transparent;
	padding: 12px 0;
}

.MonitoringWidget-module__body.boxBody {
	padding: 4px 0 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.Button-module__btn {
	height: 40px;
	min-width: 110px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.3px;
	border-radius: var(--radius-md);
	color: var(--text-primary) !important;
	transition: all 0.2s var(--ease-out-cubic);
}

.Button-module__btn.Button-module__accent {
	background: var(--accent-violet);
	border: 1px solid transparent;
}

.Button-module__btn.Button-module__accent:hover,
.Button-module__btn.Button-module__accent:focus {
	background: #9272ff;
	box-shadow: 0 4px 20px var(--accent-violet-glow);
	color: #fff !important;
}

.Button-module__btn.Button-module__gray {
	background: transparent;
	border: 1px solid var(--border-default);
}

.Button-module__btn.Button-module__gray:hover,
.Button-module__btn.Button-module__gray:focus {
	background: var(--accent-crimson-dim);
	border-color: var(--accent-crimson);
	color: #fff !important;
}

.customModalOverflow .Button-module__btn.Button-module__gray {
	color: #fff;
	background: transparent;
	border: none;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.customModalOverflow .Button-module__btn.Button-module__gray:hover {
	opacity: 1;
}

/* ============================================================
   CUSTOM MODAL
   ============================================================ */

.customModalContent {
	width: 520px;
}

.customModalContent .boxHeader {
	display: flex;
	justify-content: space-between;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.customModalContent .boxBody {
	background: var(--surface-2);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	text-align: left;
}

.customModalContent > .boxHeader > .text {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 10px;
}

.customModalContent > .boxHeader > .text > .title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.customModalContent .boxFooter {
	color: var(--text-tertiary);
	border: 1px dashed var(--border-subtle);
	padding: 10px;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--surface-3);
	font-size: var(--fs-xs);
}

/* ============================================================
   PRODUCT MODAL
   ============================================================ */

.ProductModal-module__header.boxHeader {
	display: flex;
	justify-content: center;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.Product-module__price,
.customModalContent .boxBody {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.ProductModal-module__command,
.ProductModal-module__bp,
.ProductModal-module__item,
.ProductModal-module__dropdown {
	width: 520px;
}

.productModalGiveText {
	color: var(--text-tertiary);
	border: 1px dashed var(--border-subtle);
	padding: 12px;
	border-radius: var(--radius-md);
	background: var(--surface-3);
	font-size: var(--fs-xs);
}

.productModalContainsItem {
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	transition: transform 0.2s var(--ease-out-cubic), border-color 0.2s;
}

.productModalContainsItem:hover {
	transform: translateY(-4px);
	border-color: var(--border-default);
}

.productModalContainsItem > .productModalItemInfo > span {
	color: var(--text-secondary) !important;
	transition: color 0.2s;
}

.productModalContainsItem:hover > .productModalItemInfo > span {
	color: var(--text-primary) !important;
}

/* ============================================================
   PRODUCT ITEM SELECTOR
   ============================================================ */

.ProductItemSelector-module__item.ProductItemSelector-module__active,
.ProductItemSelector-module__item:hover,
.ProductItemSelector-module__item:focus {
	border: 1px solid var(--accent-violet);
	background: var(--accent-violet-dim);
}

.ProductItemSelector-module__item:hover,
.ProductItemSelector-module__item:focus {
	transform: translateY(-4px);
}

/* ============================================================
   BALANCE MODAL
   ============================================================ */

.PlayerBalanceModal-module__header {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.PlayerBalanceModal-module__currency,
.PlayerBalanceModal-module__input {
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
}

.PlayerBalanceModal-module__inputWrapper {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.PlayerBalanceModal-module__form::before {
	display: block;
	content: "";
	margin-bottom: 12px;
	padding: 8px;
	text-align: center;
	font-size: var(--fs-base);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-subtle);
}

/* ============================================================
   COUNT / TOTAL SELECTORS
   ============================================================ */

.TotalSum-module__inputWrapper,
.CountSelector-module__inputWrapper {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.CountSelector-module__changeCountBtn {
	transition: background 0.2s;
}

.CountSelector-module__changeCountBtn:hover,
.CountSelector-module__changeCountBtn:focus {
	background: var(--surface-4);
}

.CountSelector-module__changeCountBtn.CountSelector-module__left  { border-right: 0; }
.CountSelector-module__changeCountBtn.CountSelector-module__right { border-left: 0; }

/* ============================================================
   PROFILE
   ============================================================ */

.ProfileContent-module__box {
	padding: 0 4px;
	background: var(--surface-3);
	border-radius: var(--radius-md);
}

.ProfileContent-module__infoLine + .ProfileContent-module__infoLine {
	border-top: 0;
}

.ProfileContent-module__infoLineValue,
.ProfileContent-module__infoLineValue.ProfileContent-module__steamid {
	color: var(--text-secondary);
	transition: color 0.2s;
	display: flex;
	justify-content: flex-end;
}

.ProfileContent-module__infoLineValue:hover,
.ProfileContent-module__infoLineValue.ProfileContent-module__steamid:hover {
	color: var(--text-primary);
}

.ProfileContent-module__title {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-sm);
	color: var(--text-tertiary);
}

.ProfileContent-module__input {
	width: 100%;
	display: flex;
	height: 38px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	padding: 0 14px;
	background: var(--surface-4);
	border: 1px solid var(--border-subtle);
	color: var(--text-primary);
}

.ProfileContent-module__infoWrapper {
	border-radius: var(--radius-md);
}

.Selector-module__dropDownCurrentItem,
.ProfileContent-module__box {
	background: var(--surface-3);
}

.Selector-module__dropDownList {
	background: var(--surface-4);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-lg);
}

/* ============================================================
   PROFILE NAV
   ============================================================ */

.ProfileNav-module__navItem:hover,
.ProfileNav-module__navItem:focus,
.ProfileNav-module__navItem.ProfileNav-module__active {
	background: var(--surface-3);
	border-radius: var(--radius-md);
	color: var(--text-primary);
}

.ProfileNav-module__navItem {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background 0.2s, color 0.2s;
}

.ProfileNav-module__navItem > img {
	width: 18px;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.ProfileNav-module__navItem:hover > img,
.ProfileNav-module__navItem:focus > img,
.ProfileNav-module__navItem.ProfileNav-module__active > img {
	opacity: 1;
}

.ProfileNav-module__body.boxBody {
	gap: 4px;
	border-radius: var(--radius-lg);
}

.ProfileNav-module__wrapper .boxFooter {
	padding: 0;
}

.ProfileNav-module__logOut {
	width: 100%;
	margin-top: 16px;
}

.profileLink {
	font-weight: var(--fw-light);
	padding: 14px 12px;
	position: relative;
	transition: color 0.2s;
	text-decoration: none;
	font-size: var(--fs-base);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	letter-spacing: 0.5px;
}

/* ============================================================
   BASKET / HISTORY TABLES
   ============================================================ */

.BasketSearch-module__input,
.HistorySearch-module__input {
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
}

.BasketTable-module__tableLine:nth-child(2n-1),
.HistoryTable-module__tableLine:nth-child(2n-1) {
	background: var(--surface-3);
	border: 1px dashed var(--border-subtle);
}

.BasketTable-module__tableLine.BasketTable-module__canSell,
.BasketTable-module__tableHeader.BasketTable-module__canSell {
	grid-template-columns: 1fr 1fr 110px;
}

/* ============================================================
   ROULETTE
   ============================================================ */

.RouletteContent-module__lineWrapper::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 0;
	width: 50%;
	z-index: 1;
	background: linear-gradient(to right, var(--surface-2) 0%, rgba(25,27,35,0.5) 30%, transparent 100%);
}

.RouletteContent-module__lineWrapper::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	right: 0;
	width: 50%;
	z-index: 1;
	background: linear-gradient(to left, var(--surface-2) 0%, rgba(25,27,35,0.5) 30%, transparent 100%);
}

.RouletteContent-module__rouletteItem {
	background: transparent;
}

.RouletteContent-module__rouletteItemImg {
	transform: skewY(-2deg);
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: 12px;
	box-shadow: var(--shadow-sm);
}

.RouletteContent-module__triangle.RouletteContent-module__bottom {
	display: none;
}

.RouletteContent-module__triangle.RouletteContent-module__top {
	border-top: 10px solid var(--accent-violet);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.RouletteContent-module__rouletteItemInfo {
	margin-top: 14px;
	color: var(--text-tertiary);
	font-size: var(--fs-sm);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.RouletteContent-module__line {
	margin-top: 50px;
}

/* ============================================================
   KIT ITEMS
   ============================================================ */

.KitContent-module__containsItem {
	border-radius: var(--radius-md);
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
	transition: transform 0.2s var(--ease-out-cubic), border-color 0.2s;
}

.KitContent-module__containsItem:hover {
	transform: translateY(-4px);
	border-color: var(--border-default);
}

.KitContent-module__itemName {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	display: none;
	justify-content: center;
}

.KitContent-module__itemCount {
	border-radius: 0 var(--radius-md) 0 var(--radius-md);
}

.KitContent-module__itemImg {
	padding: 14px;
}

.KitContent-module__containsItem:hover .KitContent-module__itemName,
.KitContent-module__containsItem:hover .KitContent-module__itemCount {
	color: var(--text-primary);
}

/* ============================================================
   TOAST
   ============================================================ */

.Toast-module__toast {
	background: var(--surface-3);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(10px);
}

/* ============================================================
   LOADER
   ============================================================ */

.gs-loader {
	position: fixed;
	inset: 0;
	z-index: 30000;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(14px);
	background: rgba(13,14,18,0.5);
	transition: opacity 0.3s;
}

.gs-loader__spinner {
	width: 48px;
	height: 48px;
	border: 3px solid transparent;
	border-top-color: #fff;
	border-right-color: rgba(255,255,255,0.4);
	border-radius: 50%;
	animation: spinnerRotate 1s linear infinite;
}

.gs-loader__spinner::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	border: 3px solid transparent;
	border-top-color: var(--accent-violet);
	border-radius: 50%;
	animation: spinnerRotate 0.6s linear infinite reverse;
}

@keyframes spinnerRotate {
	to { transform: rotate(360deg); }
}

/* ============================================================
   PRODUCT DESC (colored tiers)
   ============================================================ */

.body__content {
	padding: 14px;
	border-radius: var(--radius-md);
	background: var(--surface-2);
	box-shadow: var(--shadow-sm);
}

.body__content > p { font-weight: var(--fw-light); }
.body__content > p > span { font-weight: var(--fw-medium); }

.desc__title      { margin-bottom: 5px; }
.desc__title__kit { margin-top: 18px; margin-bottom: 5px; }

.desc__content {
	padding: 10px 14px;
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
	transition: border-color 0.2s;
}

.desc__content:hover { border-color: var(--border-default); }

.desc__content > a > img { width: 135px; border-radius: var(--radius-md); }

.desc__content > font,
.desc__content__img > font {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	padding: 4px 10px;
	background: var(--surface-4);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}

.desc__content_bummer {
	padding: 10px 14px;
	background: #2a0010;
	border: 1px solid rgba(232,64,84,0.2);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.desc__content_premium {
	padding: 10px 14px;
	background: #0e1e4a;
	border: 1px solid rgba(55,138,221,0.25);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.desc__content_lite {
	padding: 10px 14px;
	background: #2b2500;
	border: 1px solid rgba(186,117,23,0.25);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.desc__content_bummer > font, .desc__content__imgb > font {
	font-size: var(--fs-sm); font-weight: 500;
	padding: 4px 10px; background: rgba(232,64,84,0.15);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
}

.desc__content_premium > font, .desc__content__imgp > font {
	font-size: var(--fs-sm); font-weight: 500;
	padding: 4px 10px; background: rgba(55,138,221,0.15);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
}

.desc__content_lite > font, .desc__content__imgl > font {
	font-size: var(--fs-sm); font-weight: 500;
	padding: 4px 10px; background: rgba(186,117,23,0.15);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
}

.desc__content_bummer > a > img { width: 175px; border-radius: var(--radius-md); }
.desc__content_premium > a > img,
.desc__content_lite > a > img   { width: 135px; border-radius: var(--radius-md); }

.content__info > .title {
	font-size: 17px;
	color: var(--text-primary);
	margin-bottom: 3px;
	font-weight: var(--fw-medium);
}

.content__info > .description {
	font-weight: var(--fw-light);
	color: var(--text-secondary);
	font-size: var(--fs-sm);
}

.desc__content__img,
.desc__content__imgl,
.desc__content__imgp,
.desc__content__imgb {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.productModalDescription a {
	color: var(--accent-violet);
	cursor: pointer;
	transition: color 0.15s;
}

/* ============================================================
   FOOTER
   ============================================================ */

.DesktopCopyright-module__wrapper {
	font-size: var(--fs-xs) !important;
	background: var(--surface-2) !important;
	border-top: 1px solid var(--border-subtle);
}

.MobileCopyright-module__wrapper {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	font-size: var(--fs-base) !important;
	background: var(--surface-2) !important;
}

.MobileCopyright-module__wrapper > .MobileCopyright-module__link {
	white-space: nowrap;
	margin-left: 5px;
	color: var(--text-primary);
}

.DesktopCopyright-module__link,
.ShopFooter-module__link,
.ShopFooter-module__link:hover {
	white-space: nowrap;
	margin-left: 5px;
	color: var(--text-secondary);
	transition: color 0.2s;
}

.DesktopCopyright-module__link:hover,
.ShopFooter-module__link:hover {
	color: var(--text-primary);
}

footer .footer__link {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-tertiary);
	letter-spacing: 0.8px;
	transition: color 0.2s;
}

footer .footer__link:hover { color: var(--text-secondary); }

/* ============================================================
   MISC
   ============================================================ */

.boxCustom {
	display: flex;
	flex-direction: row;
	gap: 40px;
	justify-content: space-between;
	padding-bottom: 28px;
}

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

.price {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 10px;
	width: 90px;
	text-align: center;
	background: var(--surface-3);
	border: 1px solid var(--border-subtle);
}

.body__price {
	gap: 8px;
	display: flex;
	flex-direction: column;
}

.discount {
	padding: 10px;
	border-radius: var(--radius-md);
	background: var(--surface-3);
	box-shadow: var(--shadow-sm);
}

.body__text > p {
	text-align: center;
	align-items: center;
}

.c__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1.3;
	margin-top: 8px;
	letter-spacing: -0.2px;
	color: #fff;
	font-weight: var(--fw-bold);
}

.personalInfoContainer {
	text-align: center;
	margin: 20px 0;
}

.personalInfoContainer .infoLine {
	font-size: var(--fs-xs);
	opacity: 0;
	color: #fff;
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 1170px) {
	.Product-module__wrapper { min-height: 220px; }
}

@media (max-width: 980px) {
	.Header-module__wrapper { padding: 0 12px; }
	.newsContainer { display: none; }
	.News-module__container.news__promo,
	.News-module__container.news__24h { width: 100% !important; }
	.News-module__container { margin-bottom: 16px; }
	.Products-module__wrapper { gap: 24px; }

	.HeaderNav-module__link,
	.PlayerMenuMobile-module__profileLink,
	.PlayerBalance-module__btn {
		font-weight: var(--fw-light);
		justify-content: flex-start;
		letter-spacing: 0.5px;
		display: flex;
	}

	.PlayerMenuMobile-module__playerMenu {
		margin-bottom: 0;
		row-gap: 0;
	}
}

@media (max-width: 670px) {
	.boxBody.PlayerMenuMobile-module__body {
		border-radius: 0 !important;
	}
	.News-module__container {
		height: auto;
		padding: 20px;
		margin-bottom: 10px;
	}
}

@media (max-width: 600px) {
	.Product-module__wrapper {
		min-height: 240px;
		max-width: 300px;
		width: 100%;
	}
	.Modules-container {
		flex-direction: column;
		gap: 16px;
	}
	.Search-module__wrapper {
		max-width: unset;
	}
	.Servers-module__servers {
		flex-wrap: nowrap;
		margin: 0;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.Product-module__wrapper { min-height: 180px; }
}