/* =========================================================
   MAROON STORE — Midnight Navy Gaming UI
   Replace the contents of wwwroot/css/site.css with this file.
   Keeps existing Razor markup, account buttons and chat classes.
   ========================================================= */

:root {
	color-scheme: dark;
	--bg: #060b16;
	--bg-soft: #091225;
	--surface: #0c172c;
	--surface-2: #101f39;
	--surface-3: #142846;
	--line: rgba(130, 177, 255, .16);
	--line-strong: rgba(71, 151, 255, .42);
	--blue: #1677ff;
	--blue-bright: #3b9bff;
	--cyan: #69e0ff;
	--text: #f3f7ff;
	--muted: #91a2bf;
	--success: #48e2ae;
	--shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 95px;
}

body {
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(ellipse at 80% -15%, rgba(17, 90, 196, .18), transparent 42%), radial-gradient(ellipse at 0% 45%, rgba(22, 119, 255, .06), transparent 36%), var(--bg);
	color: var(--text);
	font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
	direction: rtl;
	-webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
	font: inherit;
}

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

button {
	cursor: pointer;
}

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

::selection {
	color: white;
	background: rgba(22, 119, 255, .55);
}

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}

/* Header */
.store-header {
	position: sticky;
	top: 0;
	z-index: 50;
	min-height: 82px;
	padding: 14px clamp(18px, 6vw, 100px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: rgba(6, 11, 22, .84);
	border-bottom: 1px solid rgba(116, 169, 255, .13);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.store-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	direction: ltr;
}

.brand-emblem {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(89, 180, 255, .7);
	border-radius: 14px;
	background: linear-gradient(145deg, #174f9e, #0a1b39 68%);
	box-shadow: inset 0 0 18px rgba(53, 155, 255, .18), 0 0 24px rgba(22, 119, 255, .16);
	color: white;
	font-size: 26px;
	font-weight: 1000;
	font-style: italic;
}

.store-brand b {
	font-size: 17px;
	font-weight: 900;
	letter-spacing: .7px;
}

.store-brand i {
	color: var(--cyan);
	font-style: normal;
}

.store-brand small {
	display: block;
	margin-top: 4px;
	color: #7e95b8;
	font-size: 8px;
	letter-spacing: 2px;
}

.store-header nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 34px);
}

	.store-header nav a {
		position: relative;
		color: #b3c3dc;
		font-size: 12px;
		font-weight: 700;
		transition: color .2s ease;
	}

		.store-header nav a::after {
			position: absolute;
			right: 0;
			bottom: -9px;
			width: 0;
			height: 2px;
			content: "";
			background: linear-gradient(90deg, var(--blue), var(--cyan));
			transition: width .25s ease;
		}

		.store-header nav a:hover {
			color: white;
		}

			.store-header nav a:hover::after {
				width: 100%;
			}

.header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex-wrap: nowrap;
	min-width: max-content;
	position: relative;
	z-index: 5;
}

.header-contact, .store-footer button {
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid rgba(61, 151, 255, .38);
	border-radius: 11px;
	background: rgba(22, 119, 255, .1);
	color: #e7f3ff;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
	transition: .22s ease;
}

	.header-contact:hover, .store-footer button:hover {
		border-color: var(--cyan);
		background: rgba(22, 119, 255, .2);
		transform: translateY(-2px);
	}

	.header-contact span {
		margin-right: 8px;
		color: var(--cyan);
	}

.header-auth-button {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: max-content;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(132, 174, 232, .25);
	border-radius: 11px;
	background: rgba(255, 255, 255, .035);
	color: #edf5ff;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
	transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}

	.header-auth-button:hover {
		border-color: var(--blue-bright);
		background: rgba(22, 119, 255, .12);
		transform: translateY(-1px);
	}

.header-register-button {
	border-color: transparent;
	background: linear-gradient(120deg, #1261dc, #168cff);
	box-shadow: 0 7px 22px rgba(22, 119, 255, .23);
}

	.header-register-button:hover {
		border-color: rgba(105, 224, 255, .7);
		background: linear-gradient(120deg, #1977fa, #31a6ff);
		box-shadow: 0 9px 26px rgba(22, 119, 255, .33);
	}

.header-login-button {
	border-color: rgba(80, 156, 255, .3);
	background: rgba(18, 50, 94, .45);
}

.header-customer-name {
	display: inline-flex;
	align-items: center;
	max-width: 150px;
	overflow: hidden;
	color: #9adfff;
	font-size: 11px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-logout-form {
	display: inline-flex !important;
	flex: 0 0 auto;
	margin: 0;
}

.header-logout-button {
	color: #ffb4c0;
	border-color: rgba(255, 100, 130, .28);
	background: rgba(255, 65, 100, .07);
}

	.header-logout-button:hover {
		color: white;
		border-color: #ff6884;
		background: rgba(255, 65, 100, .2);
	}

/* Hero */
.store-hero {
	position: relative;
	isolation: isolate;
	min-height: 570px;
	padding: 76px clamp(20px, 8vw, 135px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(35px, 5vw, 76px);
	overflow: hidden;
	border-bottom: 1px solid rgba(116, 169, 255, .1);
	background: radial-gradient(ellipse at 77% 50%, rgba(18, 105, 234, .18), transparent 43%), linear-gradient(115deg, rgba(6, 11, 22, .12), rgba(9, 24, 48, .58));
}

	.store-hero::before {
		position: absolute;
		z-index: -1;
		inset: 0;
		content: "";
		opacity: .23;
		background-image: linear-gradient(rgba(91, 157, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 157, 255, .08) 1px, transparent 1px);
		background-size: 48px 48px;
		mask-image: linear-gradient(to left, black, transparent 78%);
	}

.hero-copy {
	position: relative;
	z-index: 2;
}

.hero-kicker, .section-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--cyan);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .5px;
}

	.hero-kicker i {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 14px var(--cyan);
		animation: pulse-dot 1.8s infinite;
	}

.hero-copy h1 {
	margin: 22px 0 18px;
	color: #f7faff;
	font-size: clamp(42px, 5.2vw, 70px);
	font-weight: 1000;
	line-height: 1.28;
	letter-spacing: -1.6px;
}

	.hero-copy h1 span {
		color: transparent;
		background: linear-gradient(90deg, #69e0ff 0%, #4ca6ff 42%, #3682ff 100%);
		-webkit-background-clip: text;
		background-clip: text;
		filter: drop-shadow(0 8px 28px rgba(22, 119, 255, .14));
	}

.hero-copy > p {
	max-width: 500px;
	color: var(--muted);
	font-size: 13px;
	line-height: 2.2;
}

.hero-ctas {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 27px;
}

.btn-red, .btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 900;
	transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
}

.btn-red {
	border: 1px solid rgba(112, 203, 255, .42);
	background: linear-gradient(115deg, #1264e4, #168cff);
	box-shadow: 0 12px 32px rgba(22, 119, 255, .25);
	color: white;
}

	.btn-red:hover {
		transform: translateY(-3px);
		box-shadow: 0 16px 36px rgba(22, 119, 255, .38);
	}

	.btn-red span {
		margin-right: 18px;
		color: #a9f0ff;
		font-size: 17px;
	}

.btn-ghost {
	border: 1px solid rgba(144, 182, 238, .25);
	background: rgba(255, 255, 255, .035);
	color: #eaf3ff;
}

	.btn-ghost:hover {
		border-color: var(--cyan);
		background: rgba(22, 119, 255, .1);
		transform: translateY(-2px);
	}

.hero-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
	margin-top: 28px;
	color: #9db0cd;
	font-size: 10px;
}

	.hero-benefits span::first-letter {
		color: var(--cyan);
	}

/* Hero artwork */
.hero-art {
	position: relative;
	isolation: isolate;
	min-height: 365px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid rgba(86, 167, 255, .3);
	border-radius: 28px;
	background: radial-gradient(ellipse at 50% 45%, rgba(18, 103, 225, .31), transparent 47%), linear-gradient(145deg, #10294b 0%, #09152a 48%, #071020 100%);
	box-shadow: inset 0 0 55px rgba(28, 113, 234, .09), 0 30px 80px rgba(0, 0, 0, .25);
}

	.hero-art::before, .hero-art::after {
		position: absolute;
		z-index: -1;
		width: 310px;
		height: 310px;
		content: "";
		border: 1px solid rgba(79, 170, 255, .25);
		border-radius: 50%;
		transform: rotateX(65deg) rotateZ(-25deg);
		box-shadow: 0 0 35px rgba(22, 119, 255, .08);
	}

	.hero-art::after {
		width: 430px;
		height: 430px;
		border-color: rgba(105, 224, 255, .12);
	}

.hero-art-glow {
	position: absolute;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: rgba(22, 119, 255, .28);
	filter: blur(58px);
	animation: glow-drift 5s ease-in-out infinite alternate;
}

.hero-art-ring {
	position: absolute;
	width: 280px;
	height: 185px;
	border: 1px solid rgba(105, 224, 255, .45);
	border-radius: 50%;
	transform: rotate(-28deg);
	box-shadow: 0 0 35px rgba(22, 119, 255, .13);
}

.hero-art-title {
	z-index: 1;
	color: white;
	font-size: clamp(35px, 4.4vw, 62px);
	font-weight: 1000;
	font-style: italic;
	letter-spacing: -2px;
	text-shadow: 0 0 35px rgba(53, 148, 255, .4);
}

	.hero-art-title b {
		color: var(--cyan);
	}

.hero-art-sub {
	z-index: 1;
	margin-top: 12px;
	color: #a2bad9;
	font-size: 9px;
	letter-spacing: 4px;
}

.hero-chip {
	position: absolute;
	z-index: 2;
	padding: 11px 13px;
	border: 1px solid rgba(139, 194, 255, .25);
	border-radius: 10px;
	background: rgba(5, 15, 31, .8);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
	color: #d8eaff;
	font-size: 9px;
	letter-spacing: 1px;
	backdrop-filter: blur(10px);
}

	.hero-chip b {
		color: var(--cyan);
	}

.chip-a {
	top: 24px;
	right: 22px;
}

.chip-b {
	bottom: 24px;
	left: 22px;
}

.hero-lines {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: repeating-linear-gradient(125deg, transparent 0 34px, rgba(62, 149, 255, .035) 35px 36px);
}

/* Products */
.store-products {
	padding: 74px clamp(20px, 8vw, 135px);
	background: rgba(7, 14, 28, .7);
}

.section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}

	.section-head h2, .order-steps h2 {
		margin: 10px 0 0;
		color: #f5f8ff;
		font-size: clamp(25px, 3vw, 34px);
		font-weight: 1000;
	}

		.section-head h2 em, .order-steps h2 em {
			color: var(--cyan);
			font-style: normal;
		}

.section-note {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: rgba(255, 255, 255, .025);
	color: #9cb2d3;
	font-size: 10px;
}

.store-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.store-product-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(132, 177, 245, .13);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(17, 33, 59, .92), rgba(9, 18, 34, .98));
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

	.store-product-card:hover {
		transform: translateY(-6px);
		border-color: rgba(73, 163, 255, .62);
		box-shadow: 0 23px 48px rgba(0, 0, 0, .28), 0 0 30px rgba(22, 119, 255, .08);
	}

.store-product-image {
	position: relative;
	height: 218px;
	overflow: hidden;
	background: #0c1a30;
}

	.store-product-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .5s ease, filter .5s ease;
	}

.store-product-card:hover .store-product-image img {
	transform: scale(1.06);
	filter: saturate(1.08);
}

.store-product-image::after {
	position: absolute;
	inset: 35% 0 0;
	content: "";
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(6, 12, 24, .75));
}

.image-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(3, 10, 22, .12), transparent 45%, rgba(3, 10, 22, .25));
}

.product-tag, .product-number {
	position: absolute;
	z-index: 2;
	top: 13px;
	padding: 7px 9px;
	border: 1px solid rgba(154, 203, 255, .24);
	border-radius: 7px;
	background: rgba(4, 13, 28, .8);
	color: #d9edff;
	font-size: 8px;
	letter-spacing: .8px;
	backdrop-filter: blur(8px);
}

.product-tag {
	left: 12px;
	color: var(--cyan);
}

.product-number {
	right: 12px;
}

.store-product-info {
	padding: 18px;
}

.product-overline {
	color: #70caff;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 1.6px;
}

.store-product-info h3 {
	margin: 10px 0 7px;
	color: #f4f8ff;
	font-size: 16px;
	font-weight: 900;
}

.store-product-info p {
	min-height: 40px;
	margin: 0 0 18px;
	color: #94a6c3;
	font-size: 11px;
	line-height: 1.9;
}

.store-product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid rgba(132, 177, 245, .12);
}

.price {
	color: #c5d7f0;
	font-size: 11px;
}

	.price strong {
		color: white;
		font-size: 18px;
		font-weight: 900;
	}

	.price small {
		margin-right: 4px;
		color: #8da6c9;
	}

.store-product-footer button {
	min-height: 39px;
	padding: 0 13px;
	border: 1px solid rgba(87, 174, 255, .34);
	border-radius: 10px;
	background: rgba(22, 119, 255, .12);
	color: #eef7ff;
	font-size: 10px;
	font-weight: 900;
	white-space: nowrap;
	transition: .2s ease;
}

	.store-product-footer button:hover {
		border-color: var(--cyan);
		background: linear-gradient(120deg, #1264e4, #168cff);
		box-shadow: 0 7px 20px rgba(22, 119, 255, .2);
	}

	.store-product-footer button b {
		margin-right: 8px;
		color: var(--cyan);
	}

	.store-product-footer button:hover b {
		color: white;
	}

/* Order steps */
.order-steps {
	padding: 55px clamp(20px, 8vw, 135px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	border-top: 1px solid rgba(116, 169, 255, .1);
	border-bottom: 1px solid rgba(116, 169, 255, .1);
	background: linear-gradient(110deg, rgba(9, 20, 39, .94), rgba(7, 13, 26, .9));
}

.steps-grid {
	flex: 1;
	max-width: 680px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

	.steps-grid > div {
		padding: 19px;
		border: 1px solid rgba(132, 177, 245, .14);
		border-radius: 14px;
		background: rgba(17, 33, 59, .62);
		transition: transform .2s, border-color .2s, background .2s;
	}

		.steps-grid > div:hover {
			transform: translateY(-3px);
			border-color: var(--line-strong);
			background: rgba(20, 43, 76, .8);
		}

	.steps-grid b {
		color: var(--cyan);
		font-size: 23px;
		font-weight: 1000;
	}

	.steps-grid h3 {
		margin: 12px 0 6px;
		color: #edf5ff;
		font-size: 12px;
	}

	.steps-grid p {
		margin: 0;
		color: #94a6c3;
		font-size: 10px;
		line-height: 1.8;
	}

/* Footer and floating chat */
.store-footer {
	padding: 30px clamp(20px, 6vw, 100px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: #92a5c4;
	font-size: 11px;
}

	.store-footer p {
		margin: 0;
	}

	.store-footer > small {
		color: #667b9d;
		font-size: 10px;
	}

.floating-chat {
	position: fixed;
	z-index: 70;
	bottom: 22px;
	left: 22px;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 15px;
	border: 1px solid rgba(128, 207, 255, .42);
	border-radius: 15px;
	background: linear-gradient(120deg, #115ed8, #168cff);
	box-shadow: 0 14px 38px rgba(0, 0, 0, .4), 0 0 28px rgba(22, 119, 255, .2);
	color: white;
	text-align: right;
	transition: transform .22s, box-shadow .22s;
}

	.floating-chat:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 44px rgba(0, 0, 0, .44), 0 0 32px rgba(22, 119, 255, .3);
	}

.chat-bubble-icon {
	font-size: 22px;
}

.floating-chat > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11px;
	font-weight: 900;
}

.floating-chat small {
	color: #d5eaff;
	font-size: 9px;
	font-weight: 500;
}

.floating-chat > b {
	margin-right: 8px;
	color: #a6f0ff;
}

/* Customer chat window */
.customer-chat {
	position: fixed;
	z-index: 80;
	bottom: 88px;
	left: 22px;
	width: min(390px, calc(100vw - 28px));
	height: min(590px, calc(100vh - 115px));
	display: none;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(80, 160, 255, .35);
	border-radius: 20px;
	background: #081225;
	box-shadow: 0 28px 90px rgba(0, 0, 0, .62), 0 0 35px rgba(22, 119, 255, .09);
}

	.customer-chat.open {
		display: flex;
		animation: chat-enter .22s ease-out;
	}

.customer-chat-head {
	min-height: 70px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 15px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(110deg, #10294b, #0c1a32);
}

.support-logo {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(105, 224, 255, .5);
	border-radius: 12px;
	background: linear-gradient(145deg, #1677ff, #0a2b5c);
	color: white;
	font-size: 21px;
	font-weight: 1000;
}

.support-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

	.support-title b {
		color: #f2f7ff;
		font-size: 12px;
	}

	.support-title small {
		color: #a0b6d5;
		font-size: 10px;
	}

	.support-title i {
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 4px;
		border-radius: 50%;
		background: var(--success);
		box-shadow: 0 0 10px rgba(72, 226, 174, .45);
	}

.customer-chat-head > button {
	margin-right: auto;
	border: 0;
	background: transparent;
	color: #c9dbf4;
	font-size: 27px;
	transition: color .2s;
}

	.customer-chat-head > button:hover {
		color: var(--cyan);
	}

.customer-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: auto;
	padding: 15px 12px;
}

.chat-intro {
	max-width: 245px;
	margin: auto;
	color: #93a6c5;
	font-size: 12px;
	line-height: 1.9;
	text-align: center;
}

	.chat-intro > span {
		width: 48px;
		height: 48px;
		display: grid;
		place-items: center;
		margin: 0 auto 13px;
		border: 1px solid rgba(105, 224, 255, .2);
		border-radius: 50%;
		background: rgba(22, 119, 255, .12);
		color: var(--cyan);
		font-size: 22px;
	}

	.chat-intro b {
		color: white;
		font-size: 15px;
	}

.customer-message-row {
	display: flex;
	width: 100%;
}

.customer-out {
	justify-content: flex-start;
}

.customer-in {
	justify-content: flex-end;
}

.customer-message-bubble {
	max-width: 84%;
	padding: 10px 12px;
	overflow-wrap: anywhere;
	color: #eaf3ff;
	font-size: 12px;
	line-height: 1.8;
}

.customer-out .customer-message-bubble {
	border: 1px solid rgba(57, 143, 255, .3);
	border-radius: 14px 14px 4px 14px;
	background: linear-gradient(140deg, #103b77, #10284b);
}

.customer-in .customer-message-bubble {
	border: 1px solid rgba(132, 177, 245, .15);
	border-radius: 14px 14px 14px 4px;
	background: #14223a;
}

.customer-message-bubble small {
	display: block;
	margin-top: 5px;
	color: #9ab1d2;
	font-size: 9px;
}

.customer-composer {
	flex-shrink: 0;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--line);
	background: #0b172b;
}

	.customer-composer > input {
		width: 100%;
		margin-bottom: 8px;
		padding: 9px 11px;
		border: 1px solid #243d61;
		border-radius: 9px;
		outline: 0;
		background: #081225;
		color: white;
		font-size: 11px;
	}

.composer-row {
	display: flex;
	align-items: center;
	gap: 7px;
}

	.composer-row input {
		flex: 1;
		min-width: 0;
		padding: 12px;
		border: 1px solid #263f62;
		border-radius: 11px;
		outline: 0;
		background: #10213b;
		color: white;
		font-size: 12px;
	}

		.composer-row input:focus, .customer-composer > input:focus {
			border-color: var(--blue-bright);
			box-shadow: 0 0 0 3px rgba(22, 119, 255, .1);
		}

.plus-button, .send-button {
	width: 39px;
	height: 39px;
	flex-shrink: 0;
	border: 1px solid #2b466c;
	border-radius: 11px;
	background: #142846;
	color: #d9eaff;
	font-size: 20px;
}

	.plus-button:hover {
		border-color: var(--cyan);
	}

.send-button {
	border-color: transparent;
	background: linear-gradient(135deg, #1264e4, #168cff);
	color: white;
	font-size: 16px;
}

.customer-composer > small {
	display: block;
	margin-top: 8px;
	color: #7890b2;
	font-size: 9px;
}

/* Login and register pages */
.auth-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: radial-gradient(ellipse at 50% 15%, rgba(22, 119, 255, .2), transparent 44%), radial-gradient(ellipse at 10% 90%, rgba(105, 224, 255, .06), transparent 30%), var(--bg);
}

.auth-card {
	width: min(460px, 100%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 5vw, 36px);
	border: 1px solid rgba(120, 176, 255, .2);
	border-radius: 23px;
	background: linear-gradient(145deg, rgba(17, 34, 61, .98), rgba(9, 18, 35, .99));
	box-shadow: var(--shadow), 0 0 45px rgba(22, 119, 255, .07);
}

	.auth-card h1 {
		margin: 18px 0 0;
		color: #f4f8ff;
		font-size: 27px;
		font-weight: 1000;
	}

	.auth-card p, .auth-card > small {
		color: #9db0cc;
		font-size: 12px;
		line-height: 1.9;
	}

	.auth-card label {
		margin-top: 8px;
		color: #dce9fb;
		font-size: 12px;
		font-weight: 700;
	}

	.auth-card input {
		width: 100%;
		padding: 14px;
		border: 1px solid #294365;
		border-radius: 11px;
		outline: 0;
		background: #081326;
		color: white;
		transition: border-color .2s, box-shadow .2s;
	}

		.auth-card input:focus {
			border-color: var(--blue-bright);
			box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
		}

	.auth-card .btn-red {
		width: 100%;
		margin-top: 10px;
		border: 0;
		color: white;
	}

.auth-error {
	padding: 11px;
	border: 1px solid rgba(255, 100, 130, .24);
	border-radius: 9px;
	background: rgba(255, 65, 100, .1);
	color: #ffb5c3;
	font-size: 12px;
}

/* Existing support/admin chat UI, if these classes are used on another page */
.support-app {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 330px minmax(0, 1fr);
	background: #070f1e;
	color: var(--text);
	font-family: inherit;
}

.support-sidebar {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 22px 15px;
	border-left: 1px solid var(--line);
	background: #0b172b;
}

.support-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 5px 24px;
	border-bottom: 1px solid var(--line);
	direction: ltr;
}

.support-brand-icon {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--blue-bright);
	border-radius: 11px;
	color: white;
	font-size: 21px;
	font-weight: 1000;
}

.support-brand b {
	color: var(--cyan);
}

.support-brand small {
	display: block;
	margin-top: 4px;
	color: #8297b8;
	font-size: 8px;
	letter-spacing: 1.5px;
}

.support-side-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 22px 3px 13px;
	font-size: 13px;
	font-weight: 900;
}

	.support-side-title span {
		padding: 4px 7px;
		border-radius: 6px;
		background: rgba(22, 119, 255, .13);
		color: var(--cyan);
		font-size: 10px;
	}

.support-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #101f39;
}

	.support-search span {
		color: #8196b7;
		font-size: 24px;
	}

	.support-search input {
		width: 100%;
		padding: 11px 0;
		border: 0;
		outline: 0;
		background: transparent;
		color: white;
		font-size: 11px;
	}

.conversation-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.conversation-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 9px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	color: white;
	text-align: right;
}

	.conversation-row:hover, .conversation-row.selected {
		border-color: rgba(71, 151, 255, .3);
		background: rgba(22, 119, 255, .1);
	}

.list-avatar, .customer-avatar {
	width: 39px;
	height: 39px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #172b49;
	color: #e7f3ff;
	font-size: 14px;
}

.conversation-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.conversation-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

	.conversation-top b {
		overflow: hidden;
		font-size: 11px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.conversation-top small, .conversation-preview {
		color: #8fa4c4;
		font-size: 9px;
	}

.conversation-preview {
	overflow: hidden;
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-list {
	padding: 20px 5px;
	color: #8296b5;
	font-size: 11px;
	line-height: 1.8;
	text-align: center;
}

.back-store {
	margin-top: auto;
	padding: 18px 8px 5px;
	border-top: 1px solid var(--line);
	color: #9db1d0;
	font-size: 11px;
}

.support-main {
	min-width: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.support-topbar {
	height: 72px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	border-bottom: 1px solid var(--line);
	background: #0a1528;
}

	.support-topbar > div:first-child {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #a1b3ce;
		font-size: 11px;
	}

.live-dot {
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 50%;
	background: var(--success);
}

.agent-profile {
	display: flex;
	align-items: center;
	gap: 9px;
}

.agent-avatar {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #123b70;
	color: var(--cyan);
	font-weight: 900;
}

.agent-profile > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.agent-profile b {
	font-size: 11px;
}

.agent-profile small {
	color: #8fa4c4;
	font-size: 9px;
}

.no-conversation {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 30px;
	text-align: center;
}

.empty-chat-icon {
	width: 70px;
	height: 70px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: rgba(22, 119, 255, .12);
	color: var(--cyan);
	font-size: 30px;
}

.no-conversation h2 {
	margin: 20px 0 8px;
	font-size: 20px;
}

.no-conversation p {
	max-width: 350px;
	color: #91a5c5;
	font-size: 12px;
	line-height: 2;
}

.active-chat {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

	.active-chat[hidden], .no-conversation[hidden] {
		display: none;
	}

.active-chat-header {
	height: 78px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-bottom: 1px solid var(--line);
}

.customer-meta h2 {
	margin: 0 0 7px;
	font-size: 13px;
}

.customer-meta small, .chat-ref {
	color: #91a5c5;
	font-size: 10px;
}

.chat-ref {
	margin-right: auto;
	color: #7188aa;
}

.message-stream {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 13px;
	overflow: auto;
	padding: 25px 5%;
}

.message-row {
	display: flex;
	width: 100%;
}

	.message-row.incoming {
		justify-content: flex-start;
	}

	.message-row.outgoing {
		justify-content: flex-end;
	}

.message-bubble {
	max-width: min(75%, 520px);
	padding: 11px 14px;
	overflow-wrap: anywhere;
	font-size: 12px;
	line-height: 1.9;
}

.incoming .message-bubble {
	border: 1px solid var(--line);
	border-radius: 14px 14px 14px 4px;
	background: #13233d;
}

.outgoing .message-bubble {
	border: 1px solid rgba(57, 143, 255, .3);
	border-radius: 14px 14px 4px 14px;
	background: #103b77;
}

.message-bubble small {
	display: block;
	margin-top: 4px;
	color: #a0b4d2;
	font-size: 9px;
	text-align: left;
}

.stream-empty {
	margin: auto;
	color: #8ba0c0;
	font-size: 12px;
}

.reply-composer {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 22px 20px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: #101f39;
}

	.reply-composer input {
		flex: 1;
		min-width: 0;
		padding: 10px;
		border: 0;
		outline: 0;
		background: transparent;
		color: white;
		font-size: 12px;
	}

.composer-icon, .send-message {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #1a2d4a;
	color: #bdd7f6;
	font-size: 20px;
}

.send-message {
	border-color: transparent;
	background: linear-gradient(135deg, #1264e4, #168cff);
	color: white;
	font-size: 17px;
}

.reply-composer > small {
	color: #7e94b5;
	font-size: 9px;
	white-space: nowrap;
}

/* Chat attachment support */
.chat-attachment-image {
	display: block;
	max-width: 230px;
	max-height: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 6px;
	border-radius: 10px;
	cursor: zoom-in;
}

.chat-attachment-file {
	display: block;
	margin-bottom: 6px;
	color: var(--cyan);
	text-decoration: underline;
}

.plus-button {
	cursor: pointer !important;
}

/* Animations and responsive layout */
@keyframes pulse-dot {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 12px var(--cyan);
	}

	50% {
		opacity: .55;
		box-shadow: 0 0 3px var(--cyan);
	}
}

@keyframes glow-drift {
	from {
		transform: translate(-12px, 7px) scale(.92);
	}

	to {
		transform: translate(13px, -8px) scale(1.08);
	}
}

@keyframes chat-enter {
	from {
		opacity: 0;
		transform: translateY(10px) scale(.985);
	}

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

@media (max-width: 1100px) {
	.store-header {
		padding-inline: 24px;
		gap: 14px;
	}

		.store-header nav {
			gap: 16px;
		}

	.header-contact {
		display: none;
	}

	.store-hero, .store-products, .order-steps {
		padding-inline: 5%;
	}

	.store-product-grid {
		gap: 15px;
	}
}

@media (max-width: 850px) {
	.store-header {
		min-height: 74px;
		flex-wrap: wrap;
		padding: 12px 5%;
	}

		.store-header nav {
			display: none;
		}

	.header-actions {
		gap: 5px;
		min-width: 0;
		flex-wrap: wrap;
	}

	.header-auth-button {
		min-height: 36px;
		padding-inline: 10px;
		font-size: 10px;
	}

	.header-customer-name {
		display: none;
	}

	.store-hero {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-block: 42px;
	}

	.hero-art {
		min-height: 285px;
		grid-row: 1;
	}

	.hero-copy h1 {
		font-size: clamp(39px, 8vw, 58px);
	}

	.store-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.store-product-image {
		height: 180px;
	}

	.order-steps {
		display: block;
		padding-block: 42px;
	}

	.steps-grid {
		max-width: none;
		margin-top: 22px;
	}

	.support-app {
		grid-template-columns: 270px minmax(0, 1fr);
	}

	.support-sidebar {
		padding: 17px 10px;
	}

	.reply-composer > small {
		display: none;
	}
}

@media (max-width: 600px) {
	.store-header {
		gap: 8px;
		padding: 11px 13px;
	}

	.store-brand {
		gap: 8px;
	}

		.store-brand b {
			font-size: 13px;
		}

		.store-brand small {
			font-size: 6px;
			letter-spacing: 1.3px;
		}

	.brand-emblem {
		width: 35px;
		height: 35px;
		border-radius: 11px;
		font-size: 21px;
	}

	.header-actions {
		gap: 4px;
	}

	.header-auth-button {
		min-height: 33px;
		padding: 0 8px;
		border-radius: 8px;
		font-size: 9px;
	}

	.store-hero, .store-products, .order-steps {
		padding-inline: 17px;
	}

	.store-hero {
		padding-block: 31px 38px;
	}

	.hero-art {
		min-height: 235px;
		border-radius: 20px;
	}

	.hero-art-title {
		font-size: 35px;
	}

	.hero-art-sub {
		font-size: 7px;
		letter-spacing: 2.5px;
	}

	.hero-chip {
		padding: 8px;
		font-size: 8px;
	}

	.chip-a {
		top: 13px;
		right: 12px;
	}

	.chip-b {
		bottom: 13px;
		left: 12px;
	}

	.hero-copy h1 {
		margin-top: 17px;
		font-size: 40px;
	}

	.hero-copy > p {
		font-size: 12px;
	}

	.hero-benefits {
		gap: 10px;
		font-size: 9px;
	}

	.store-products {
		padding-block: 43px;
	}

	.section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

		.section-head h2, .order-steps h2 {
			font-size: 27px;
		}

	.store-product-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.store-product-image {
		height: 215px;
	}

	.store-product-info {
		padding: 16px;
	}

	.steps-grid {
		grid-template-columns: 1fr;
	}

		.steps-grid > div {
			padding: 15px;
		}

	.store-footer {
		flex-wrap: wrap;
		padding: 24px 17px;
	}

		.store-footer p {
			width: 100%;
			order: 3;
		}

		.store-footer > small {
			width: 100%;
		}

	.floating-chat {
		bottom: 12px;
		left: 12px;
		padding: 10px 12px;
	}

	.customer-chat {
		bottom: 76px;
		left: 10px;
		width: calc(100vw - 20px);
		height: min(600px, calc(100vh - 92px));
	}

	.support-app {
		grid-template-columns: 1fr;
	}

	.support-sidebar {
		min-height: 0;
		height: auto;
		padding: 12px;
		border-left: 0;
		border-bottom: 1px solid var(--line);
	}

	.support-brand {
		padding-bottom: 10px;
	}

	.support-side-title {
		margin: 12px 3px;
	}

	.support-search {
		margin-bottom: 5px;
	}

	.conversation-list {
		flex-direction: row;
		overflow-x: auto;
	}

	.conversation-row {
		min-width: 200px;
	}

	.back-store {
		display: none;
	}

	.support-main {
		min-height: 70vh;
	}

	.support-topbar {
		height: 55px;
		padding-inline: 13px;
	}

	.no-conversation {
		min-height: 260px;
	}

	.active-chat-header {
		height: 65px;
		padding: 10px 13px;
	}

	.message-stream {
		padding: 18px 13px;
	}

	.reply-composer {
		margin: 0 10px 12px;
	}

		.reply-composer > small {
			display: none;
		}

	.auth-page {
		padding: 15px;
	}

	.auth-card {
		padding: 24px 19px;
		border-radius: 18px;
	}
}

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

/* ===== Mar Store arcade home refresh ===== */
:root{--bg:#020b1b;--bg-soft:#04152c;--surface:#071a33;--surface-2:#092344;--line:rgba(38,137,255,.28);--line-strong:rgba(24,139,255,.7);--blue:#087cf0;--blue-bright:#159cff;--cyan:#17c8ff;--text:#f5f9ff;--muted:#a8c2e0}
body{background:radial-gradient(ellipse at 72% 0%,rgba(0,105,255,.2),transparent 34%),radial-gradient(ellipse at 10% 45%,rgba(0,87,180,.13),transparent 32%),#020b1b;font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif}
.store-header{min-height:62px;padding:8px clamp(14px,2.8vw,44px);gap:18px;background:rgba(2,10,25,.96);border-bottom:1px solid rgba(27,130,255,.22)}
.brand-emblem{background:linear-gradient(145deg,#26c9ff,#0759c9);color:#00162d;font-size:30px;font-weight:1000;box-shadow:none;border-radius:5px;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%)}
.brand-wordmark{display:flex;flex-direction:column;line-height:1;direction:ltr}.store-brand b{font-size:26px;letter-spacing:1px;color:#fff}.store-brand b span{color:#f2f7ff}.store-brand small{font-size:8px;letter-spacing:5px;color:#27caff;margin-top:4px}
.header-search{height:42px;display:flex;align-items:center;gap:10px;flex:1;max-width:530px;padding:0 15px;border:1px solid #124c8b;border-radius:12px;background:linear-gradient(100deg,#091c39,#0a2449);direction:rtl}.header-search span{font-size:25px;color:#13c7ff;line-height:1}.header-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:13px}.header-search input::placeholder{color:#9db5d5}
.header-actions{gap:8px}.header-contact,.header-auth-button{min-height:40px;border-radius:10px}.cart-shortcut{font-size:24px!important;position:relative;padding:0 10px!important;background:transparent!important;border:0!important}.cart-count{position:absolute;top:0;right:0;border-radius:50%;width:18px;height:18px;background:#ff2d43;color:#fff;font-size:10px;display:grid;place-items:center}.header-auth-button{font-size:12px}
.game-nav{height:52px;display:flex;align-items:center;gap:5px;overflow-x:auto;white-space:nowrap;padding:5px clamp(12px,2.8vw,42px);background:rgba(3,15,34,.98);border-bottom:1px solid rgba(20,112,218,.45);scrollbar-width:thin;scrollbar-color:#0a65bb transparent}.game-nav a,.game-nav button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;padding:0 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:#e6f2ff;font-size:12px;font-weight:800}.game-nav .nav-home{font-size:19px}.game-nav .nav-home span{font-size:12px}.game-nav .active,.game-nav a:hover,.game-nav button:hover,.game-nav button.selected{background:linear-gradient(120deg,#0879ef,#168dff);border-color:#249bff;color:#fff}.nav-game-icon{font-size:18px}.razer-coin-mini{width:22px;height:22px;display:grid;place-items:center;background:linear-gradient(140deg,#ffe38a,#d78a00);border-radius:50%;color:#583100;font-weight:1000;font-size:17px}
.store-main{max-width:1800px;margin:auto;padding:10px clamp(12px,2.2vw,34px) 0}.store-hero{min-height:255px;margin:0 0 16px;padding:25px clamp(20px,5vw,70px);border:1px solid #0b4a88;border-radius:22px;overflow:hidden;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:radial-gradient(ellipse at 75% 55%,rgba(11,91,190,.55),transparent 40%),linear-gradient(100deg,#020b1b 0%,#03152e 55%,#062b55 100%);box-shadow:inset 0 0 35px rgba(0,94,255,.09)}.store-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020b1b 0%,rgba(2,11,27,.92) 35%,rgba(2,11,27,.04) 100%);pointer-events:none}.hero-copy{position:relative;z-index:2;max-width:600px}.hero-kicker,.section-kicker{font-size:11px;letter-spacing:.2px;color:#64c8ff;font-weight:800}.hero-kicker i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18d8ff;margin-left:7px;box-shadow:0 0 12px #18d8ff}.hero-copy h1{font-size:clamp(27px,3.2vw,46px);line-height:1.3;margin:8px 0;color:#fff;font-weight:1000;letter-spacing:-1px}.hero-copy h1 span{color:#1399ff}.hero-copy>p{margin:6px 0 16px;font-size:15px;color:#e1edff}.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}.btn-red{background:linear-gradient(120deg,#0785ff,#1472ee)!important;border-radius:10px;min-height:43px;display:inline-flex;align-items:center;gap:12px;padding:0 25px;font-weight:900;box-shadow:0 8px 25px rgba(0,116,255,.23)}.btn-ghost{border:1px solid #1761a7;border-radius:10px;padding:0 18px;background:#061a32;color:#e8f4ff;font-weight:800}.hero-benefits{display:flex;gap:18px;flex-wrap:wrap;margin-top:17px;color:#bdd9f5;font-size:11px}.hero-art{min-height:205px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 58%,rgba(26,138,255,.35),transparent 55%)}.hero-art-glow{position:absolute;width:240px;height:240px;border-radius:50%;top:-10px;left:25%;background:radial-gradient(circle,rgba(15,137,255,.3),transparent 68%)}.hero-art-ring{position:absolute;inset:15px 8% 0;border:1px solid rgba(46,175,255,.25);border-radius:50%;transform:rotate(-18deg) skewX(-14deg);box-shadow:0 0 45px rgba(0,128,255,.2)}.hero-art-title{position:absolute;top:35%;left:12%;font-size:clamp(25px,4vw,53px);font-weight:1000;letter-spacing:2px;text-shadow:0 5px 24px #007fff;transform:rotate(-8deg)}.hero-art-title b{color:#22c7ff}.hero-art-sub{position:absolute;top:62%;left:15%;font-size:9px;letter-spacing:3px;color:#9fdfff}.hero-chip{position:absolute;z-index:2;padding:9px 13px;border:1px solid #287dc0;background:linear-gradient(130deg,#112e53,#06142b);border-radius:9px;font-size:10px;font-weight:900;box-shadow:0 10px 24px #0008;transform:rotate(-9deg)}.chip-a{top:13%;right:14%}.chip-b{bottom:8%;right:23%;transform:rotate(8deg)}.hero-orb{position:absolute;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;border:1px solid #5abfff;background:linear-gradient(145deg,#1763b9,#071b3c);box-shadow:0 0 25px #168bff66;font-weight:1000;font-size:20px}.orb-one{right:3%;bottom:8%;transform:rotate(14deg)}.orb-two{right:36%;top:5%;transform:rotate(-15deg);color:#ffe1a1}
.store-products{padding:0 2px 12px}.section-head{margin:12px 0 10px;display:flex;align-items:end;justify-content:space-between;gap:12px}.section-head h2,.bundle-heading h2{font-size:22px;margin:3px 0 0;font-weight:1000;color:#fff}.section-head h2 em{font-style:normal;color:#25aaff}.show-all{border:1px solid #1058a0;background:#061a34;color:#bce8ff;border-radius:8px;padding:7px 12px;font-size:11px;font-weight:800;white-space:nowrap}.store-product-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}.store-product-card{display:block;text-align:center;padding:0;overflow:hidden;border:1px solid #123c68;border-radius:11px;background:linear-gradient(180deg,#071a32,#061326);color:#fff;min-width:0;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.store-product-card:hover,.store-product-card.selected{transform:translateY(-3px);border-color:#168dff;box-shadow:0 7px 25px #007bff26}.store-product-image{height:clamp(90px,8.1vw,125px);position:relative;overflow:hidden;background:#071a33}.store-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}.store-product-card:hover img{transform:scale(1.06)}.product-tag{position:absolute;top:7px;right:7px;padding:3px 5px;border-radius:4px;background:#03172bbf;color:#8bd8ff;font-size:7px;font-weight:900;letter-spacing:.5px}.product-number{position:absolute;left:7px;top:7px;color:#d7eaff;font-size:10px;font-weight:900}.image-shade{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#061326d9)}.store-product-info{padding:8px 8px 10px}.store-product-info h3{font-size:12px;line-height:1.5;margin:0 0 3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.store-product-info p{font-size:10px;color:#a7c3e1;margin:0 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;border-radius:10px;background:linear-gradient(110deg,#087cf4,#4357ff);font-size:11px;font-weight:900;color:#fff}.game-card-action b{font-size:16px}
.bundle-section{display:grid;grid-template-columns:168px minmax(0,1fr);gap:14px;padding:12px;margin:3px 0 16px;border:1px solid #104779;border-radius:15px;background:linear-gradient(100deg,rgba(3,17,37,.97),rgba(3,22,44,.9));box-shadow:inset 0 0 25px #007bff0b}.razer-feature-card{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid #1d8b51;border-radius:13px;background:radial-gradient(circle at 50% 44%,#4bff79 0,#0d8b4d 32%,#06271c 70%,#020d15 100%);color:#fff;box-shadow:inset 0 0 25px #28ff7033}.razer-feature-flag{position:absolute;top:12px;left:12px;font-size:22px}.razer-big-coin{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff2a4,#ffc02f 48%,#b66b00 78%);border:5px solid #ffdf6b;color:#4a3400;font-size:49px;font-weight:1000;text-shadow:0 2px 0 #ffec9b;box-shadow:0 7px 24px #0009}.razer-brand-text{margin-top:10px;color:#8bffb4;font-size:10px;letter-spacing:5px}.razer-gold-word{font-size:30px;line-height:1;font-weight:300;letter-spacing:2px}.razer-feature-card small{font-size:8px;letter-spacing:2px;margin-top:5px}.bundle-content{min-width:0}.bundle-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1px 0 12px}.bundle-heading h2{font-size:19px}.bundle-heading p{font-size:12px;color:#b8d8f1;margin:3px 0 0}.bundle-grid{display:grid;grid-template-columns:repeat(10,minmax(70px,1fr));gap:8px}.bundle-card{min-width:0;min-height:145px;padding:0 5px 8px;border:1px solid #16466f;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#062d32,#031326);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;transition:.2s}.bundle-card:hover{border-color:#20a5ff;transform:translateY(-3px);box-shadow:0 8px 20px #007bff24}.bundle-art{height:70px;width:100%;position:relative;display:grid;place-items:center;background:linear-gradient(150deg,#13c65c,#05883d 48%,#031d19);overflow:hidden}.bundle-art:before{content:"";position:absolute;inset:-50% 20% 20% -20%;background:linear-gradient(35deg,transparent 35%,#8dffc44d 36%,transparent 63%);transform:rotate(15deg)}.bundle-coin{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff3a4,#ffc02f 50%,#a85c00);border:3px solid #ffe58a;color:#654000;font-size:24px;font-weight:1000;box-shadow:0 3px 10px #001a0c}.bundle-flag{position:absolute;top:5px;left:5px;font-size:16px}.bundle-brand{font-size:7px;letter-spacing:3px;color:#9dffbf;margin-top:3px}.bundle-price{font-size:19px;font-weight:1000;line-height:1.3;margin:1px 0 4px;direction:ltr}.bundle-name{font-size:9px;color:#d6eaff;text-align:center;white-space:nowrap}.bundle-card .bundle-buy{margin-top:auto;color:#4bd8ff;font-size:9px;font-weight:900;padding-top:5px}.bundle-card.generic .bundle-art{background:linear-gradient(140deg,#096bd1,#0c2d73,#111a52)}.bundle-card.generic .bundle-coin{background:linear-gradient(140deg,#b3efff,#348cff);border-color:#9bdfff;color:#03254b}.bundle-empty{grid-column:1/-1;padding:25px;text-align:center;color:#abc8e6;border:1px dashed #164a7c;border-radius:10px}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #103d68;border-radius:14px;background:linear-gradient(90deg,#06172b,#071c35);padding:15px 8px;margin:12px -14px 18px}.trust-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 8px;border-left:1px solid #12395c}.trust-item:last-child{border-left:0}.trust-item>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#30c8ff,#0871ee);font-size:27px;color:#fff;box-shadow:0 0 20px #008bff44}.trust-item b,.trust-item small{display:block}.trust-item b{font-size:13px}.trust-item small{font-size:10px;color:#a8c8e6;margin-top:3px}.store-footer{padding:20px clamp(15px,4vw,50px);background:#020a17;border-top:1px solid #12365a;gap:15px}.store-footer p{color:#a6c4e4;font-size:12px}
.social-rail{position:fixed;z-index:80;right:8px;top:50%;transform:translateY(-10%);display:flex;flex-direction:column;gap:5px;padding:7px;border:1px solid #0c4b83;border-radius:13px;background:rgba(2,15,32,.95);box-shadow:0 12px 40px #0008}.social-link{width:68px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:9px;background:transparent;color:#eaf7ff;text-align:center}.social-link>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#25c9ff,#0878ed);font-size:27px;font-weight:900;box-shadow:0 0 18px #008cff3b}.social-link small{font-size:10px;font-weight:800}.social-link:hover{background:#0b2947}.site-chat-link>span{background:linear-gradient(140deg,#b15cff,#6e32f0);font-size:17px;letter-spacing:1px}.telegram-personal>span{background:linear-gradient(140deg,#2bc9ff,#0875e8)}
.customer-chat{z-index:100;right:88px;bottom:20px;width:min(370px,calc(100vw - 24px));max-height:min(570px,calc(100dvh - 35px));border:1px solid #155b91;background:#06162b;box-shadow:0 20px 65px #000a;border-radius:17px;overflow:hidden}.customer-chat.open{display:flex}.customer-chat-head{background:linear-gradient(110deg,#06284a,#075a9a);padding:12px 15px}.support-logo{background:linear-gradient(140deg,#22c8ff,#1269ed);border-radius:10px}.customer-messages{background:radial-gradient(ellipse at top,#0b2340,#041123);scrollbar-color:#17578a transparent}.customer-message-bubble{border:1px solid #17436a;background:#0b2846;color:#e8f5ff}.customer-out .customer-message-bubble{background:linear-gradient(135deg,#075fbd,#0b438c);border-color:#168aff}.customer-composer{background:#06172b;border-top:1px solid #163c60}.composer-row input{background:#0b2139;color:#fff;border-color:#1a456b}.send-button{background:linear-gradient(135deg,#119fff,#075fe0)}
.chat-attachment-image{display:block;max-width:230px;max-height:260px;width:auto;height:auto;object-fit:contain;border-radius:10px;margin-bottom:6px;cursor:zoom-in}.chat-attachment-file{display:block;color:#8bdcff;text-decoration:underline;margin-bottom:6px}.plus-button{cursor:pointer!important}
@media(max-width:1200px){.store-product-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.bundle-grid{grid-template-columns:repeat(5,minmax(70px,1fr))}.game-nav{gap:1px}.game-nav a,.game-nav button{padding:0 8px}.store-header{gap:10px}}
@media(max-width:760px){.store-header{min-height:auto;padding:9px 12px;gap:8px;flex-wrap:wrap}.store-brand{gap:7px}.brand-emblem{width:34px;height:34px;font-size:22px}.store-brand b{font-size:19px}.store-brand small{font-size:6px;letter-spacing:2px}.header-search{order:3;flex:1 0 100%;max-width:none;height:37px}.header-actions{margin-right:auto;gap:5px}.header-auth-button{min-height:34px;padding:0 8px;font-size:10px}.header-customer-name{display:none}.game-nav{height:47px;padding:4px 9px}.game-nav a,.game-nav button{height:35px;font-size:11px}.store-main{padding:8px 10px 0}.store-hero{grid-template-columns:1fr;min-height:280px;padding:20px 18px;border-radius:15px}.store-hero:before{background:linear-gradient(90deg,rgba(2,11,27,.95),rgba(2,11,27,.62))}.hero-copy{max-width:100%}.hero-copy h1{font-size:30px}.hero-copy>p{font-size:12px}.hero-art{position:absolute;inset:0 0 0 0;opacity:.5;pointer-events:none}.hero-art-title{left:9%;top:52%;font-size:31px}.hero-art-sub{left:12%;top:69%;font-size:7px}.hero-chip{font-size:8px}.hero-benefits{gap:10px;font-size:10px}.section-head h2{font-size:19px}.store-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.store-product-image{height:125px}.store-product-info h3{font-size:12px}.store-product-info p{font-size:10px}.bundle-section{grid-template-columns:86px minmax(0,1fr);gap:9px;padding:8px;margin:5px 0 12px}.razer-feature-card{min-height:180px}.razer-big-coin{width:54px;height:54px;font-size:30px;border-width:3px}.razer-brand-text{font-size:7px;letter-spacing:2px}.razer-gold-word{font-size:20px}.razer-feature-flag{font-size:15px;top:6px;left:6px}.bundle-heading{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:8px}.bundle-heading h2{font-size:15px}.bundle-heading p{font-size:10px;line-height:1.5}.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.bundle-card{min-height:127px}.bundle-art{height:58px}.bundle-price{font-size:17px}.bundle-name{font-size:8px}.trust-strip{grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0;padding:12px 5px}.trust-item{justify-content:flex-start;border-left:0;gap:8px}.trust-item>span{width:36px;height:36px;border-radius:12px;font-size:20px}.trust-item b{font-size:11px}.trust-item small{font-size:9px}.store-footer{flex-wrap:wrap}.social-rail{right:5px;top:auto;bottom:8px;transform:none;flex-direction:row;gap:3px;padding:4px;border-radius:12px}.social-link{width:57px;min-height:57px;gap:2px}.social-link>span{width:32px;height:32px;font-size:19px}.social-link small{font-size:8px}.customer-chat{right:8px;bottom:76px;width:calc(100vw - 16px);max-height:calc(100dvh - 100px)}.floating-chat{display:none}}
@media(min-width:761px) and (max-width:980px){.store-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bundle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.store-hero{padding:22px}.hero-copy h1{font-size:31px}.header-search{max-width:260px}.nav-game:nth-of-type(n+8){display:none}}

/* =========================================================
   MAR STORE — Premium 2026 home-page finish
   Final polish overrides for the current Index.cshtml markup
   ========================================================= */
:root{
  --bg:#020b1b;--bg-soft:#06142a;--surface:#071a33;--surface-2:#0a2342;
  --surface-3:#0d2c50;--line:rgba(44,145,255,.25);--line-strong:rgba(26,145,255,.72);
  --blue:#087cf0;--blue-bright:#159dff;--cyan:#24c9ff;--text:#f5f8ff;
  --muted:#a5bad5;--shadow:0 18px 50px rgba(0,0,0,.42)
}
body{background:radial-gradient(ellipse at 52% 0,rgba(0,101,218,.19),transparent 43%),linear-gradient(180deg,#020a18 0%,#04152b 55%,#020b19 100%);color:var(--text)}
.store-header{min-height:68px;padding:10px clamp(14px,3vw,42px);background:rgba(2,12,29,.96);border-bottom:1px solid rgba(30,134,255,.25);box-shadow:0 8px 24px #0003}
.store-brand{gap:10px;text-decoration:none}.brand-emblem{display:grid;place-items:center;width:43px;height:43px;border:2px solid #16a9ff;border-radius:11px;color:#48c9ff;font-size:27px;font-weight:950;transform:skew(-5deg);box-shadow:0 0 22px #078dff25}.brand-wordmark b{letter-spacing:1.5px;font-size:clamp(18px,2vw,27px)}.brand-wordmark small{letter-spacing:3px;color:#55bfff}
.header-search{border:1px solid #15518b;background:#091e3a;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff08}.header-search:focus-within{border-color:#168fff;box-shadow:0 0 0 3px #168fff20}.header-search input{color:#fff}.header-auth-button,.header-contact{border:1px solid #1261a8;background:linear-gradient(180deg,#0b2547,#071a32);border-radius:11px;transition:transform .2s,border-color .2s,background .2s}.header-auth-button:hover,.header-contact:hover{transform:translateY(-2px);border-color:#2bb6ff;background:#0b2d55}
.game-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:5px;padding:7px clamp(10px,2.5vw,34px);background:rgba(2,12,29,.97);border-bottom:1px solid #174575;box-shadow:0 8px 22px #0002;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#145e9e transparent}.game-nav a,.game-nav button{flex:0 0 auto;border-radius:9px;color:#e4efff;transition:.2s}.game-nav a:hover,.game-nav button:hover,.game-nav .selected{background:#0c3158;border-color:#168fff;color:#fff}.game-nav .nav-home.active{background:linear-gradient(135deg,#0787ff,#1264df);box-shadow:0 5px 18px #007bff38}.nav-razer{border:1px solid #1464a5!important;background:#09213d!important}.razer-coin-mini{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#5c3100;background:linear-gradient(135deg,#fff2a3,#ffb82e,#e58a08);font-weight:900}
.store-main{width:min(100%,1600px);margin:auto;padding:12px clamp(12px,2.2vw,34px) 0}.store-hero{position:relative;isolation:isolate;overflow:hidden;min-height:250px;border:1px solid #12559b;border-radius:22px;background:radial-gradient(ellipse at 77% 45%,#104f91 0,transparent 39%),linear-gradient(110deg,#020a18 0%,#041a36 55%,#06254a 100%);box-shadow:0 20px 45px #0003}.store-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,10,24,.97) 0%,rgba(2,12,28,.88) 37%,rgba(2,12,28,.16) 100%),repeating-linear-gradient(135deg,transparent 0 42px,#4db8ff06 43px 44px)}.hero-copy{padding:clamp(22px,4vw,48px);max-width:680px}.hero-kicker{color:#80d8ff;letter-spacing:.2px}.hero-kicker i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20caff;box-shadow:0 0 12px #20caff}.hero-copy h1{font-size:clamp(30px,4vw,48px);line-height:1.28;letter-spacing:-1px}.hero-copy h1 span{color:#168fff;text-shadow:0 0 28px #078dff30}.hero-copy>p{color:#d7e8ff}.btn-red{background:linear-gradient(135deg,#149eff,#0964e9);border:1px solid #2aaaff;border-radius:12px;box-shadow:0 9px 25px #007bff32}.btn-red:hover{filter:brightness(1.12);transform:translateY(-2px)}.btn-ghost{border:1px solid #25679f;border-radius:12px;background:#071d36;color:#dff2ff}.hero-art{opacity:.96}.hero-art-glow{background:radial-gradient(circle,#0a8fff4d,transparent 68%)}.hero-art-ring{border-color:#3ab6ff30;box-shadow:0 0 45px #008aff16}.hero-art-title{color:#eaf7ff;text-shadow:0 5px 25px #000}.hero-art-title b{color:#29aaff}.hero-chip{border:1px solid #55bfff4d;background:#071d38d9;border-radius:9px;box-shadow:0 12px 30px #0004}.hero-orb{border:1px solid #75d5ff80;background:linear-gradient(135deg,#168eff,#063d87);box-shadow:0 0 32px #008bff40}
.store-products{padding-top:20px}.section-head,.bundle-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.section-kicker{color:#45c7ff;font-size:12px;font-weight:800}.section-head h2,.bundle-heading h2{margin:3px 0 0;font-size:clamp(20px,2.1vw,27px);font-weight:900;color:#f5f8ff}.section-head h2 em{color:#269fff;font-style:normal}.show-all{flex:0 0 auto;border:1px solid #155b98;background:#071c35;color:#8edbff;border-radius:9px;padding:8px 13px}.show-all:hover{background:#0b3158;border-color:#219dff;color:#fff}
.store-product-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.store-product-card{min-width:0;overflow:hidden;text-align:center;padding:0;border:1px solid #17416c;border-radius:12px;background:linear-gradient(180deg,#0b1c34,#061328);color:#f3f7ff;box-shadow:0 8px 22px #0002;transition:transform .22s,border-color .22s,box-shadow .22s}.store-product-card:hover,.store-product-card.selected{transform:translateY(-4px);border-color:#159aff;box-shadow:0 12px 28px #007bff24}.store-product-image{position:relative;overflow:hidden;background:#071b32}.store-product-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.store-product-card:hover .store-product-image img{transform:scale(1.06)}.product-tag{background:#071b33d9;border:1px solid #58baff45;color:#9cddff;border-radius:5px}.product-number{color:#fff;background:#0879e8;border-radius:5px}.image-shade{background:linear-gradient(180deg,transparent 50%,#0310259c)}.store-product-info{padding:10px 8px 12px}.store-product-info h3{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.store-product-info p{color:#9eb3d0}.game-card-action{display:flex;align-items:center;justify-content:center;gap:8px;margin:9px auto 0;padding:9px 6px;border-radius:10px;background:linear-gradient(135deg,#128fff,#3158f5);color:#fff;font-size:12px;font-weight:800;box-shadow:0 6px 16px #006dff25}
.bundle-section{display:grid;grid-template-columns:165px minmax(0,1fr);gap:16px;margin:14px 0 18px;padding:14px;border:1px solid #135ba0;border-radius:16px;background:linear-gradient(135deg,#04142a,#061b34 62%,#031124);box-shadow:0 14px 35px #0003}.razer-feature-card{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;border:1px solid #1c7b62;border-radius:13px;background:radial-gradient(circle at 50% 40%,#50c94a 0,#138d43 36%,transparent 37%),linear-gradient(145deg,#0d8c42,#071a27 60%,#020812);box-shadow:inset 0 0 35px #0005}.razer-feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff14,transparent 35%,#0005);pointer-events:none}.razer-feature-flag{position:absolute;top:12px;left:12px}.razer-big-coin{display:grid;place-items:center;width:84px;height:84px;border:5px solid #ffd36c;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff0a8,#ffbd35 55%,#bd6500);color:#633700;font-size:43px;font-weight:950;text-shadow:0 1px #fff7;box-shadow:0 7px 18px #0006}.razer-brand-text{margin-top:10px;color:#7aff8c;letter-spacing:4px;font-size:11px;font-weight:900}.razer-gold-word{font-size:29px;font-weight:950;letter-spacing:1px;color:#fff;text-shadow:0 3px 8px #000}.razer-feature-card small{color:#d9e5ed;letter-spacing:2px}.bundle-heading{align-items:center}.bundle-heading p{margin:5px 0 0;color:#9db8d6;font-size:13px}.bundle-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}.bundle-card{display:flex;min-width:0;overflow:hidden;flex-direction:column;align-items:stretch;border:1px solid #17466f;border-radius:10px;padding:0 0 9px;background:linear-gradient(180deg,#0b2039,#041226);color:#f4f8ff;text-align:center;transition:transform .2s,border-color .2s,box-shadow .2s}.bundle-card:hover{transform:translateY(-4px);border-color:#27aaff;box-shadow:0 10px 24px #007dff24}.bundle-art{position:relative;display:grid;place-items:center;height:66px;background:linear-gradient(145deg,#06a84e,#08752e 53%,#06251b)}.bundle-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff17,transparent 50%,#0003)}.bundle-flag{position:absolute;z-index:1;left:6px;top:5px;font-size:15px}.bundle-coin{position:relative;z-index:1;display:grid;place-items:center;width:43px;height:43px;border:3px solid #ffd66c;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff3ad,#ffbb2e 55%,#b96300);color:#673900;font-size:23px;font-weight:950;box-shadow:0 4px 10px #0005}.bundle-brand{margin:6px 3px 0;color:#7aff94;font-size:8px;font-weight:900;letter-spacing:1.2px}.bundle-price{margin:1px 2px;color:#fff;font-size:clamp(14px,1.4vw,20px);font-weight:950;white-space:nowrap}.bundle-name{font-size:10px;color:#c6d8ed}.bundle-buy{margin:7px 5px 0;padding:5px 2px;border-radius:6px;background:#0c2c4d;color:#72d4ff;font-size:10px;font-weight:800}.bundle-card:hover .bundle-buy{background:#087cf0;color:white}
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:14px 0 20px;padding:17px 10px;border:1px solid #123d69;border-radius:15px;background:linear-gradient(100deg,#06162b,#08213e,#06162b)}.trust-item{display:flex;align-items:center;justify-content:center;gap:12px;border-left:1px solid #17416a}.trust-item:last-child{border-left:0}.trust-item>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid #2cafff;border-radius:15px;background:linear-gradient(145deg,#169fff,#0750c8);color:white;font-size:25px;box-shadow:0 0 22px #008dff2b}.trust-item b{display:block;font-size:13px}.trust-item small{display:block;margin-top:4px;color:#9db7d3;font-size:11px}.store-footer{border-top:1px solid #143e68;color:#8ca8c8}.store-footer button{border:1px solid #1679c5;border-radius:9px;background:#082746;color:#dff4ff;padding:9px 13px}
.social-rail{position:fixed;z-index:80;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:7px;border:1px solid #17558b;border-radius:17px;background:rgba(3,16,35,.94);box-shadow:0 15px 40px #0006;backdrop-filter:blur(14px)}.social-link{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:64px;min-height:67px;border:0;border-radius:12px;background:transparent;color:#d9edff;text-decoration:none;cursor:pointer}.social-link>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#24b9ff,#0870df);color:white;font-size:24px;box-shadow:0 5px 14px #008bff30}.social-link.site-chat-link>span{background:linear-gradient(145deg,#8b68ff,#4d39d9)}.social-link:hover{background:#0c2b4a}.social-link small{font-size:10px;white-space:nowrap}
.customer-chat{border:1px solid #1b75ba!important;border-radius:18px!important;overflow:hidden;background:#06172b!important;box-shadow:0 24px 70px #0009!important}.customer-chat-head{background:linear-gradient(110deg,#08294a,#075ca2)!important;border-bottom:1px solid #3a9eea!important}.support-logo{background:linear-gradient(145deg,#2dc5ff,#0759d7)!important;box-shadow:0 0 18px #169eff35}.support-title small{color:#bde7ff!important}.support-title small i{background:#47efb2!important}.customer-messages{background:radial-gradient(ellipse at top,#0b2742,#041225 72%)!important}.chat-intro{border:1px solid #18436a!important;border-radius:15px!important;background:#0a2038!important;color:#eaf5ff!important}.chat-intro p{color:#9eb7d2!important}.customer-message-bubble{border:1px solid #1c4c72!important;border-radius:13px!important;background:#0d2944!important;color:#f3f8ff!important}.customer-out .customer-message-bubble{border-color:#0878c8!important;background:linear-gradient(135deg,#075b9f,#0a3970)!important}.customer-message-bubble small{color:#8eabc8!important}.customer-composer{background:#071b31!important;border-top:1px solid #17456f!important}.composer-row input{border:1px solid #1c4c73!important;border-radius:11px!important;background:#031226!important;color:#fff!important}.composer-row input:focus{outline:2px solid #168fff55!important;border-color:#168fff!important}.plus-button,.send-button{border:1px solid #1c6ca8!important;border-radius:10px!important;background:#0b3155!important;color:#e9f7ff!important}.send-button{background:linear-gradient(135deg,#119cff,#075de0)!important}.customer-chat-status,#customerChatStatus{color:#91b2d2!important}
@media(max-width:1200px){.store-product-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.bundle-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.bundle-section{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:900px){.store-header{flex-wrap:wrap;gap:10px}.header-search{order:3;flex:1 0 100%;max-width:none}.store-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bundle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bundle-section{grid-template-columns:120px minmax(0,1fr)}.trust-item{gap:8px}.trust-item>span{width:39px;height:39px;font-size:20px}}
@media(max-width:600px){.store-header{padding:9px 12px}.brand-emblem{width:36px;height:36px;font-size:22px}.brand-wordmark b{font-size:19px}.brand-wordmark small{font-size:7px;letter-spacing:2px}.header-actions{gap:5px}.header-auth-button{padding:8px;font-size:11px}.game-nav{top:0;padding:7px 9px}.store-main{padding:10px 10px 0}.store-hero{min-height:280px;border-radius:15px}.store-hero:after{background:linear-gradient(90deg,#020b1bf2,#03152bd9 70%,#03152b99)}.hero-copy{padding:22px 16px}.hero-copy h1{font-size:29px}.hero-copy>p{font-size:12px;line-height:1.8}.hero-benefits{flex-wrap:wrap}.hero-art{position:absolute;inset:0;opacity:.3;pointer-events:none}.hero-art-title{font-size:28px}.section-head h2{font-size:19px}.store-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.store-product-image{height:145px}.store-product-info{padding:9px 7px 10px}.store-product-info h3{font-size:12px}.store-product-info p{min-height:28px;font-size:10px}.game-card-action{font-size:11px}.bundle-section{grid-template-columns:1fr;gap:12px;padding:10px}.razer-feature-card{min-height:170px}.bundle-heading{align-items:flex-start;flex-direction:column;gap:8px}.bundle-heading h2{font-size:18px}.bundle-heading p{font-size:11px}.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bundle-card{min-height:132px}.bundle-art{height:65px}.bundle-price{font-size:20px}.bundle-name{font-size:10px}.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:13px 7px}.trust-item{justify-content:flex-start;border:0;gap:8px}.trust-item>span{width:34px;height:34px;border-radius:11px;font-size:18px}.trust-item b{font-size:10px}.trust-item small{font-size:9px}.store-footer{gap:12px;padding:15px}.social-rail{right:7px;top:auto;bottom:10px;transform:none;flex-direction:row;gap:2px;padding:4px;border-radius:14px}.social-link{width:61px;min-height:54px;gap:2px}.social-link>span{width:31px;height:31px;font-size:18px}.social-link small{font-size:8px}.customer-chat{right:8px!important;bottom:77px!important;left:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 95px)!important;border-radius:16px!important}.customer-chat-head{padding:10px}.customer-messages{max-height:calc(100dvh - 250px);overflow-y:auto}.customer-composer{padding:9px}.composer-row{gap:5px}.composer-row input{min-width:0;font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* MAROO STORE — responsive finishing and accessibility */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { overflow-x: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #47c7ff; outline-offset: 3px; }
.store-product-card, .bundle-card, .social-link, .header-auth-button { touch-action: manipulation; }
.store-product-card { animation: marooRise .55s both; }
.store-product-card:nth-child(2n) { animation-delay: .04s; }
.store-product-card:nth-child(3n) { animation-delay: .08s; }
@keyframes marooRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) {
 .game-nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
 .store-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .bundle-section { grid-template-columns: 1fr; }
 .razer-feature-card { min-height: 165px; }
 .bundle-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
 .social-rail { right: 8px; }
}
@media (max-width: 600px) {
 .store-header { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; }
 .store-brand { min-width: 0; }
 .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
 .header-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
 .header-customer-name { display: none; }
 .game-nav { gap: 7px; padding: 8px 10px; }
 .game-nav > a, .nav-game { flex: 0 0 auto; }
 .store-main { padding: 10px 10px 0; }
 .store-hero { grid-template-columns: 1fr; padding: 22px 17px; min-height: auto; }
 .hero-art { min-height: 170px; }
 .hero-copy h1 { font-size: clamp(25px,7vw,35px); }
 .hero-copy > p { font-size: 13px; }
 .hero-benefits { gap: 9px 13px; }
 .store-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .store-product-card { min-width: 0; }
 .store-product-image { height: 135px; }
 .store-product-info { padding: 10px; }
 .store-product-info h3 { font-size: 13px; }
 .store-product-info p { font-size: 11px; }
 .bundle-section { padding: 9px; }
 .bundle-heading { align-items: flex-start; }
 .bundle-heading h2 { font-size: 17px; }
 .bundle-heading p { font-size: 11px; }
 .bundle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
 .bundle-card { min-height: 160px; }
 .bundle-art { height: 75px; }
 .trust-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .social-rail { right: 8px; bottom: 12px; top: auto; gap: 7px; }
 .social-link { width: 43px; height: 43px; border-radius: 14px; }
 .social-link small { display: none; }
 .customer-chat { width: min(94vw,380px); right: 3vw; bottom: 68px; max-height: min(72dvh,620px); }
 .customer-messages { max-height: calc(min(72dvh,620px) - 145px); }
 .store-footer { padding: 22px 14px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Maroo package image preview and selection */
.bundle-game-image{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:5px;filter:drop-shadow(0 5px 8px #0008)}
.bundle-art .bundle-flag{z-index:2;text-shadow:0 2px 5px #000}
.bundle-card.selected-bundle{border-color:#32c5ff;box-shadow:0 0 0 2px #148de855,0 12px 28px #007bff2c;transform:translateY(-2px)}
.bundle-card.selected-bundle .bundle-buy{background:#087cf0;color:#fff}
.bundle-card .bundle-buy{white-space:normal;line-height:1.4}
.razer-feature-card.has-selected-package{background:radial-gradient(circle at 50% 15%,#143f31,#061629 65%,#020817);padding:12px;gap:7px}
.selected-package-preview{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:6px;text-align:center}
.selected-package-preview[hidden],.selected-package-order[hidden]{display:none!important}
.selected-package-preview img{width:100%;max-width:145px;height:95px;object-fit:contain;border-radius:9px;filter:drop-shadow(0 8px 12px #0008)}
.selected-package-preview strong{font-size:25px;line-height:1.2;color:#fff;font-weight:950;direction:ltr}
.selected-package-preview span{font-size:10px;color:#b9d7f3;line-height:1.4}
.selected-package-order{position:relative;z-index:2;width:100%;border:1px solid #2aa6ff;border-radius:8px;background:linear-gradient(135deg,#087cf0,#0953a6);color:#fff;font:inherit;font-size:11px;font-weight:900;padding:9px 5px;cursor:pointer}
.selected-package-order:hover{filter:brightness(1.15)}
@media(max-width:600px){.selected-package-preview img{max-width:180px;height:90px}.selected-package-preview strong{font-size:23px}.selected-package-order{font-size:12px;padding:10px 5px}.bundle-game-image{padding:7px}}


/* Maroo Store campaign banner */
.hero-art-banner {
  min-height: 0; aspect-ratio: 1280 / 547; height: auto;
  background: #05070c; border-color: rgba(39, 154, 255, .42);
  border-radius: 24px; isolation: isolate;
}
.hero-art-banner::before, .hero-art-banner::after { display: none; }
.hero-art-banner img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; border-radius:inherit; }
@media (max-width: 850px) { .hero-art-banner { width:100%; aspect-ratio:1280 / 547; min-height:0; border-radius:16px; } .hero-art-banner img { object-fit:contain; } }
@media (max-width: 480px) { .hero-art-banner { border-radius:12px; } }

/* FINAL MOBILE FIX — prevent hero/grid overflow on narrow phones */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
.store-main, .store-header, .store-hero, .store-products, .store-product-grid,
.store-product-card, .bundle-section, .bundle-section > *, .bundle-grid,
.bundle-card, .trust-strip, .store-footer { min-width: 0; max-width: 100%; }
.store-main { width: 100%; }
.store-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-copy { min-width: 0; overflow-wrap: anywhere; }
.hero-copy h1, .hero-copy p { max-width: 100%; overflow-wrap: anywhere; }
.hero-art-banner { width: 100%; min-width: 0; align-self: center; overflow: hidden; }
.hero-art-banner img { display: block; max-width: 100%; }
.game-nav { width: 100%; max-width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .store-main { padding-inline: 10px; }
  .store-hero { display: flex !important; flex-direction: column !important; align-items: stretch; gap: 12px; padding: 12px !important; min-height: 0 !important; }
  .hero-art-banner { order: 0; position: relative !important; inset: auto !important; opacity: 1 !important; pointer-events: auto; height: auto !important; min-height: 0 !important; aspect-ratio: 1280 / 547; width: 100%; }
  .hero-art-banner img { width: 100%; height: 100%; object-fit: contain !important; object-position: center; }
  .hero-copy { order: 1; width: 100%; max-width: none; padding: 12px 5px 8px !important; text-align: center; }
  .hero-copy h1 { font-size: clamp(24px, 6.8vw, 34px) !important; line-height: 1.35; letter-spacing: 0; }
  .hero-copy > p { font-size: 12px; line-height: 1.8; }
  .hero-ctas { justify-content: center; }
  .hero-benefits { justify-content: center; }
  .store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bundle-section { grid-template-columns: minmax(0, 1fr) !important; }
  .bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-footer { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .store-main { padding-inline: 7px; }
  .store-hero { padding: 8px !important; }
  .store-header { grid-template-columns: minmax(0, 1fr) auto !important; padding-inline: 8px; }
  .brand-wordmark b { font-size: 16px !important; }
  .header-auth-button { font-size: 10px; padding-inline: 6px; }
  .store-product-grid { gap: 6px !important; }
  .store-product-image { height: 110px !important; }
  .social-rail { right: 5px; bottom: 7px; }
  .social-link { width: 38px; height: 38px; }
}


/* Maroo premium motion + responsive hero and contact actions */
.store-hero { animation: marooHeroIn .75s cubic-bezier(.2,.8,.2,1) both; }
.hero-art-banner { transform: translateZ(0); box-shadow: 0 18px 38px #0005, 0 0 0 1px #159eff20; animation: marooBannerFloat 6s ease-in-out infinite; }
.hero-art-banner img { transform-origin: center; animation: marooBannerBreath 8s ease-in-out infinite; }
.hero-art-banner::after { content:""; position:absolute; inset:-60% auto -60% -55%; width:32%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,#ffffff20,transparent); pointer-events:none; animation:marooShine 7s ease-in-out infinite; }
.hero-copy { animation: marooCopyIn .85s .08s both; }
.hero-kicker i { animation: marooPulse 2s ease-in-out infinite; }
.btn-red, .btn-ghost { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; text-decoration:none; cursor:pointer; }
.telegram-support-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px #078bff25; }
.social-link { text-decoration:none; }
@keyframes marooHeroIn { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes marooCopyIn { from { opacity:0; transform:translateX(12px) } to { opacity:1; transform:translateX(0) } }
@keyframes marooBannerFloat { 0%,100% { transform:translateY(0) rotate(0deg) } 50% { transform:translateY(-5px) rotate(.25deg) } }
@keyframes marooBannerBreath { 0%,100% { filter:saturate(1) brightness(1) } 50% { filter:saturate(1.08) brightness(1.04) } }
@keyframes marooShine { 0%,55% { left:-55%; opacity:0 } 65% { opacity:1 } 85%,100% { left:130%; opacity:0 } }
@keyframes marooPulse { 0%,100% { box-shadow:0 0 5px #20caff } 50% { box-shadow:0 0 17px #20caff } }
@media (max-width:760px) {
 .store-hero { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:14px!important; padding:12px!important; min-height:0!important; }
 .hero-art-banner { order:0; position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:1280/547; opacity:1!important; border-radius:14px!important; animation:marooBannerFloat 6s ease-in-out infinite; }
 .hero-art-banner img { width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; }
 .hero-copy { order:1; width:100%!important; max-width:none!important; padding:10px 5px 8px!important; text-align:center!important; }
 .hero-copy h1 { font-size:clamp(25px,7.2vw,36px)!important; line-height:1.35!important; overflow-wrap:normal!important; }
 .hero-ctas { justify-content:center!important; }
 .hero-benefits { justify-content:center!important; }
 .social-rail { right:50%!important; transform:translateX(50%)!important; bottom:8px!important; top:auto!important; flex-direction:row!important; width:max-content; max-width:calc(100vw - 16px); justify-content:center; padding:5px!important; gap:4px!important; }
 .social-link { width:clamp(76px,27vw,105px)!important; min-height:55px!important; height:auto!important; display:flex!important; flex-direction:row!important; gap:6px!important; padding:5px 7px!important; border-radius:10px!important; }
 .social-link>span { width:30px!important; height:30px!important; flex:0 0 30px; font-size:18px!important; }
 .social-link small { display:block!important; font-size:9px!important; line-height:1.4; white-space:normal; }
 .store-footer { padding-bottom:84px!important; }
 .customer-chat { bottom:76px!important; }
}
@media (max-width:380px) {
 .social-rail { width:calc(100vw - 12px); max-width:calc(100vw - 12px); }
 .social-link { width:33.333%!important; min-width:0; padding:4px!important; gap:4px!important; }
 .social-link small { font-size:8px!important; }
 .hero-copy h1 { font-size:25px!important; }
}
@media (prefers-reduced-motion: reduce) {
 .store-hero,.hero-copy,.hero-art-banner,.hero-art-banner img,.hero-art-banner::after,.hero-kicker i { animation:none!important; }
}

/* Dynamic game artwork for the package showcase */
.razer-feature-card { isolation:isolate; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; }
.bundle-feature-game-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px; z-index:0; animation:featureImageIn .38s ease both; filter:drop-shadow(0 10px 18px #0009); }
.bundle-feature-game-image[hidden] { display:none!important; }
.razer-feature-card.feature-game-mode { background:radial-gradient(circle at 50% 20%,#123e67,#06172b 68%,#020914); border-color:#167ac4; box-shadow:inset 0 0 28px #159fff20,0 8px 24px #0003; }
.razer-feature-card.feature-game-mode::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,transparent 45%,rgba(2,9,20,.84)); }
.razer-feature-card.feature-game-mode .razer-feature-flag,
.razer-feature-card.feature-game-mode .razer-big-coin,
.razer-feature-card.feature-game-mode .razer-brand-text,
.razer-feature-card.feature-game-mode .razer-gold-word,
.razer-feature-card.feature-game-mode #previewSmall { position:relative; z-index:1; }
.razer-feature-card.feature-game-mode .razer-brand-text { color:#d9edff; letter-spacing:1px; font-weight:900; text-shadow:0 2px 8px #000; }
@keyframes featureImageIn { from { opacity:0; transform:scale(.92) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@media(prefers-reduced-motion:reduce) { .bundle-feature-game-image { animation:none; } }


/* FINAL HERO IMAGE FIT: keep the campaign artwork exactly fitted to its frame */
.hero-art-banner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1280 / 547 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  background: #06172c !important;
}
.hero-art-banner img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}
@media (max-width: 850px) {
  .store-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .hero-art-banner {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1280 / 547 !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .hero-art-banner img { object-fit: cover !important; }
  .hero-copy {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .store-main { padding-inline: 10px !important; }
  .store-hero { padding: 10px !important; border-radius: 15px !important; }
  .hero-art-banner { border-radius: 10px !important; }
}


/* Maroo banner: fill its entire hero card without internal gaps */
.store-hero > .hero-art-banner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  aspect-ratio: 1280 / 547 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: clamp(10px, 1.6vw, 22px) !important;
}
.store-hero > .hero-art-banner > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  transform: translateZ(0);
}
@media (min-width: 769px) {
  .store-hero > .hero-art-banner { grid-column: auto; }
}
@media (max-width: 768px) {
  .store-hero > .hero-art-banner {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1280 / 547 !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 380px) {
  .store-hero > .hero-art-banner { border-radius: 9px !important; }
}


/* Game accounts selling service */
.accounts-mode .bundle-content { min-width: 0; }
.accounts-mode .bundle-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.account-game-card, .account-listing-card { min-width: 0; }
.account-listing-card { display:flex; flex-direction:column; gap:8px; }
.account-listing-title { white-space:normal; line-height:1.45; }
.account-contact-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.account-back-button { grid-column:1/-1; justify-self:start; }
.accounts-mode .razer-feature-card.feature-game-mode .bundle-feature-game-image,
.razer-feature-card.accounts-feature-mode .bundle-feature-game-image { object-fit:cover; }
@media(max-width:640px) {
 .accounts-mode .bundle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .accounts-mode .bundle-card { min-width:0; padding:8px; }
 .account-listing-title { font-size:14px; }
 .account-contact-link { font-size:12px; padding-inline:6px; }
}