/* ==========================================================================
   PBGame Market & Inventory — dark/green card system
   ========================================================================== */

:root{
	--pb-accent:#4ace8e;
	--pb-accent-soft:rgba(74,206,142,.14);
	--pb-card-bg:#15151b;
	--pb-card-bg-2:#1b1b22;
	--pb-text:#fff;
	--pb-text-muted:#9ca0b8;
}

/* ---------- hero ---------- */
.pb-market-hero{
	position:relative;
	overflow:hidden;
	isolation:isolate;
	display:flex;
	flex-direction:column;
	gap:18px;
	margin-bottom:18px;
	padding:32px 32px 28px;
	border:1px solid rgba(255,255,255,.07);
	border-radius:18px;
	background:linear-gradient(1deg,#25252e 30%,#292932 100%);
	box-shadow:0 12px 32px -16px rgba(0,0,0,.55);
}

.pb-market-hero__watermark{
	position:absolute;
	z-index:0;
	bottom:-22px;
	right:-8px;
	font-size:150px;
	font-weight:800;
	line-height:1;
	color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.045);
	letter-spacing:-.04em;
	text-transform:uppercase;
	pointer-events:none;
	user-select:none;
}

.pb-market-hero__top{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:14px;
}

.pb-market-hero__eyebrow{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--pb-text-muted);
}

.pb-market-hero__eyebrow-rule{
	width:22px;
	height:1px;
	flex-shrink:0;
	background:rgba(255,255,255,.14);
}

.pb-market-hero__inventory{
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 18px;
	border:1px solid rgba(74,206,142,.35);
	border-radius:12px;
	background:rgba(74,206,142,.10);
	color:var(--pb-accent);
	font-size:13px;
	font-weight:700;
	text-decoration:none;
	transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.pb-market-hero__inventory:hover{
	color:#fff;
	background:linear-gradient(135deg,#4ace8e,#2faf73);
	border-color:transparent;
	text-decoration:none;
	transform:translateY(-1px);
}
.pb-market-hero__inventory i{font-size:16px}

.pb-market-hero__title{
	position:relative;
	z-index:1;
	margin:0;
	font-size:28px;
	font-weight:700;
	line-height:1.15;
	letter-spacing:-.5px;
	color:var(--pb-text);
}
.pb-market-hero__title em{font-style:normal;color:var(--pb-accent)}

.pb-market-hero__desc{
	position:relative;
	z-index:1;
	margin:0;
	max-width:560px;
	font-size:14px;
	line-height:1.6;
	color:var(--pb-text-muted);
}

.pb-market-hero__stats{
	position:relative;
	z-index:1;
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	padding-top:16px;
	border-top:1px solid rgba(255,255,255,.07);
}

.pb-market-hero__stat{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:10px 16px;
	border-radius:12px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.07);
}
.pb-market-hero__stat i{font-size:19px;color:var(--pb-accent)}
.pb-market-hero__stat div{display:flex;flex-direction:column;line-height:1.2}
.pb-market-hero__stat-value{font-size:15px;font-weight:800;color:var(--pb-text);font-variant-numeric:tabular-nums}
.pb-market-hero__stat-label{font-size:11px;font-weight:600;color:var(--pb-text-muted)}

@media(max-width:768px){
	.pb-market-hero{padding:22px 20px;gap:14px}
	.pb-market-hero__title{font-size:22px}
	.pb-market-hero__desc{font-size:13px}
	.pb-market-hero__watermark{font-size:96px;bottom:-14px;right:-6px}
}

/* ---------- layout ---------- */
.pb-market-layout{display:flex;margin-top:10px;flex-direction:column;gap:16px}
.pb-market-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;transition:opacity .15s ease}
.pb-market-list--loading{opacity:.45;pointer-events:none}

.pb-inventory-page{display:flex;flex-direction:column;gap:18px}
.pb-inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

@media(max-width:1400px){
	.pb-inventory-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
	.pb-market-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
	.pb-inventory-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
	.pb-market-list{grid-template-columns:repeat(2,1fr)}
	.pb-inventory-grid{grid-template-columns:1fr}
}

/* ---------- market card ----------
   Оптимизировано под слабые ПК: анимируются только transform/opacity
   (GPU-композитинг), никаких backdrop-filter/box-shadow-transition и
   постоянных фильтров на превью — это самое дорогое при сетке из
   десятков карточек. */
.pb-market-list,
.pb-inventory-grid{
	overflow:visible;
}

.pb-market-item{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	border-radius:16px;
	background:var(--pb-card-bg);
	border:1px solid rgba(255,255,255,.06);
	cursor:pointer;
	overflow:hidden;
	transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
	transform-origin:center;
	will-change:transform;
}

.pb-market-item--removing{
	opacity:0;
	transform:scale(.9);
	pointer-events:none;
}

@media (hover: hover) and (pointer: fine) {
	.pb-market-item:hover{
		z-index:3;
		border-color:rgba(74,206,142,.7);
		box-shadow:0 0 0 2px rgba(74,206,142,.5),0 18px 36px rgba(0,0,0,.4);
	}
}


.pb-market-preview{
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	background:#0f0f14;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
}

.pb-market-item[data-kind="background"] .pb-market-preview{
	aspect-ratio:16/9;
}

.pb-market-preview::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(15,15,20,.92) 100%);
}

.pb-market-preview img,
.pb-market-preview canvas,
.pb-market-preview-video{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .3s ease;
	opacity:0;
}

.pb-market-preview img.pb-lazy-loaded,
.pb-market-preview canvas.pb-lazy-loaded,
.pb-market-preview-video.pb-lazy-loaded{opacity:1}

@media (hover: hover) and (pointer: fine) {
	.pb-market-item:hover .pb-market-preview img,
	.pb-market-item:hover .pb-market-preview canvas,
	.pb-market-item:hover .pb-market-preview-video{
		transform:scale(1.04);
	}
}

/* GIF play-on-hover: canvas того же класса что и img показывает статичный
   первый кадр и занимает его место в потоке; живой <img> с GIF скрыт
   (display:none, не absolute — чтобы не привязываться к геометрии разных
   контейнеров) и включается только пока курсор над карточкой */
.pb-gif-poster{pointer-events:none}
img.pb-gif-source.pb-gif-hidden{display:none}
.pb-gif-poster.pb-gif-hidden{display:none}

.pb-market-item.dc-sold .pb-market-stock{
	color:#ff6b6b;
}

.pb-market-stock{
	position:absolute;
	z-index:2;
	top:10px;
	right:10px;
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:rgba(8,9,12,.82);
	color:var(--pb-accent);
	font-size:11px;
	font-weight:800;
	padding:4px 9px;
	border-radius:999px;
}

.pb-market-stock--premium{
	color:#f5c451;
	background:rgba(30,20,4,.88);
	border:1px solid rgba(245,196,81,.4);
}

.pb-market-stock--owned{
	color:var(--pb-accent);
}

.pb-sticker-item--owned{
	opacity:.72;
}

.pb-sticker-item--owned .pb-market-price{
	color:var(--pb-text-muted);
}

.pb-sticker-item--premium .pb-market-name{
	color:#f5c451;
}

.pb-sticker-item--premium .pb-market-price{
	color:#f5c451;
}

.pb-market-body{
	position:absolute;
	left:0;right:0;bottom:0;z-index:2;
	display:flex;
	flex-direction:column;
	gap:2px;
	padding:14px;
}

.pb-market-name{
	font-size:14.5px;
	font-weight:700;
	color:var(--pb-text);
	line-height:1.25;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.pb-market-name:empty{
	display:none;
}

.pb-market-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.pb-market-price{
	font-size:16px;
	font-weight:900;
	color:var(--pb-accent);
	line-height:1;
}
.pb-market-price span{color:var(--pb-accent)}

/* sold state */
.pb-market-item.dc-sold{
	cursor:not-allowed;
	pointer-events:none;
	opacity:.5;
	filter:grayscale(.4);
}

.pb-market-item.dc-sold:hover{
	transform:none;
	box-shadow:none;
	border-color:rgba(255,255,255,.06);
}

/* ---------- inventory card ---------- */
.pb-inventory-item{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:13px;
	border:1px solid rgba(255,255,255,.075);
	border-radius:18px;
	background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 34%),var(--pb-card-bg);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.20);
	cursor:pointer;
	overflow:hidden;
	min-width:0;
	transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.pb-inventory-item:hover{
	transform:translateY(-5px);
	border-color:rgba(74,206,142,.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 54px rgba(0,0,0,.34);
}

.pb-inventory-item.active{
	border-color:var(--pb-accent);
	background:radial-gradient(circle at 50% 0,rgba(74,206,142,.16),rgba(74,206,142,0) 42%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 34%),var(--pb-card-bg);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 44px rgba(0,0,0,.26),0 0 0 1px rgba(74,206,142,.24);
}

.pb-inventory-item-preview{
	position:relative;
	height:220px;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.06);
	background:radial-gradient(circle at 50% 30%,rgba(70,80,140,.25),transparent),#0f0f14;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
	padding:14px;
}

.pb-inventory-item[data-kind="background"] .pb-inventory-item-preview{
	height:auto;
	padding:0;
	aspect-ratio:16/9;
	box-sizing:border-box;
}

.pb-inventory-item-preview img,
.pb-inventory-item-preview canvas{
	max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
	opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.pb-inventory-item-preview img.pb-lazy-loaded,
.pb-inventory-item-preview canvas.pb-lazy-loaded{opacity:1}
.pb-inventory-preview-video{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;transition:transform .3s ease}

.pb-inventory-item[data-kind="background"] .pb-inventory-item-preview img,
.pb-inventory-item[data-kind="background"] .pb-inventory-item-preview canvas{
	width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;
}

@media (hover: hover) and (pointer: fine) {
	.pb-inventory-item:hover .pb-inventory-item-preview img,
	.pb-inventory-item:hover .pb-inventory-item-preview canvas,
	.pb-inventory-item:hover .pb-inventory-preview-video{
		transform:scale(1.12);
	}
}

.pb-inventory-item-status{
	position:absolute;
	z-index:2;
	top:10px;
	right:10px;
	padding:5px 10px;
	border-radius:999px;
	background:rgba(11,12,15,.76);
	border:1px solid rgba(255,255,255,.08);
	font-size:11px;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#c9cde2;
	font-weight:800;
	backdrop-filter:blur(8px);
}
.pb-inventory-item.active .pb-inventory-item-status{
	background:rgba(74,206,142,.16);
	border-color:rgba(74,206,142,.4);
	color:var(--pb-accent);
}

.pb-inventory-item-name{
	font-size:15px;
	line-height:1.25;
	color:var(--pb-text);
	font-weight:700;
	word-break:break-word;
	padding:0 2px;
}

.pb-inventory-item-name:empty{
	display:none;
}

@media(max-width:500px){
	.pb-inventory-item:not([data-kind="background"]) .pb-inventory-item-preview{height:200px}
}

/* ---------- category pills ---------- */
.pb-market-categories-wrap{
	margin-bottom:18px;
}

ul.pb-market-categories{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:8px;
	margin:0;
	padding:6px;
	list-style:none;
	overflow-x:auto;
	overflow-y:hidden;
	border-radius:16px;
	background:linear-gradient(1deg,#25252e 30%,#292932 100%);
	border:1px solid rgba(255,255,255,.06);
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
}

ul.pb-market-categories::-webkit-scrollbar{height:4px}
ul.pb-market-categories::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}

ul.pb-market-categories li{
	list-style:none;
	border:0;
	flex:0 0 auto;
}

ul.pb-market-categories li a{
	display:flex;
	align-items:center;
	gap:8px;
	padding:11px 20px;
	border-radius:12px;
	background:transparent;
	border:1px solid transparent;
	color:var(--pb-text-muted);
	font-size:13px;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:none;
	white-space:nowrap;
	transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

ul.pb-market-categories li a::before{
	content:none;
	display:none;
}

ul.pb-market-categories li a:hover{
	color:var(--pb-text);
	background:rgba(255,255,255,.05);
}

ul.pb-market-categories li a.active,
ul.pb-market-categories li.active a{
	color:#ffffff;
	background:linear-gradient(135deg,#4ace8e,#2faf73);
	border-color:transparent;
	box-shadow:0 10px 22px rgba(74,206,142,.28);
}

@media(max-width:640px){
	ul.pb-market-categories{
		gap:6px;
	}
	ul.pb-market-categories li a{
		padding:10px 16px;
		font-size:12.5px;
	}
}

/* ---------- preview modal ---------- */
.pb-preview-overlay{
	position:fixed;inset:0;background:rgba(6,7,10,.72);
	opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:2000;
	backdrop-filter:blur(3px);
}
.pb-preview-overlay.active{opacity:1;pointer-events:auto}

.pb-preview-modal{
	position:fixed;top:50%;left:50%;
	width:min(560px,calc(100% - 32px));
	max-height:min(720px,calc(100% - 48px));
	background:var(--pb-card-bg);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
	box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
	transform:translate(-50%,-48%) scale(.96);
	opacity:0;
	pointer-events:none;
	transition:transform .26s cubic-bezier(.22,.9,.32,1),opacity .22s ease;
	z-index:2001;
	display:flex;flex-direction:column;
	overflow:hidden;
}
.pb-preview-modal.active{
	transform:translate(-50%,-50%) scale(1);
	opacity:1;
	pointer-events:auto;
}

@media(max-width:640px){
	.pb-preview-modal{
		width:100%;
		max-height:100%;
		height:100%;
		top:0;left:0;
		border-radius:0;
		transform:translate(0,12px);
	}
	.pb-preview-modal.active{transform:translate(0,0)}
}

.pb-preview-close{
	position:absolute;top:16px;right:16px;z-index:2;
	width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:10px;
	background:rgba(11,12,15,.7);color:#c9cde2;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:all .15s ease;
}
.pb-preview-close svg{width:14px;height:14px}
.pb-preview-close:hover{background:rgba(255,255,255,.08);color:#fff}

.pb-preview-body{
	flex:1 1 auto;overflow-y:auto;
	display:flex;align-items:flex-start;justify-content:center;
	padding:32px 24px 24px;
}

.pb-preview-loader,.pb-preview-empty{
	color:var(--pb-text-muted);font-size:14px;text-align:center;padding:40px;
}

.pb-preview-footer{
	flex:0 0 auto;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:18px 22px;
	border-top:1px solid rgba(255,255,255,.08);
	background:var(--pb-card-bg-2);
}
.pb-preview-info{min-width:0}
.pb-preview-name{color:var(--pb-text);font-size:16px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.pb-preview-price{color:var(--pb-accent);font-size:19px;font-weight:900;margin-top:4px}
.pb-preview-buy-btn{flex:0 0 auto;border-radius:12px;font-weight:700;padding:12px 26px}
.pb-preview-buy-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.pb-preview-paywith{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:11px;background:rgba(255,255,255,.05);margin-top:8px}
.pb-preview-paywith-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--pb-text-dim,#8f91a8);font-size:12px;font-weight:800;cursor:pointer;transition:background .16s ease,color .16s ease}
.pb-preview-paywith-btn:hover{color:var(--pb-text)}
.pb-preview-paywith-btn.active{background:var(--pb-accent);color:#11151a}

/* generic frame — compact card, not the whole drawer */
.pb-preview-frame{width:100%;max-width:420px;height:260px;border-radius:18px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto}

/* background preview: full media + mini profile card overlay, mirrors the real profile header */
.pb-preview-frame--bg{background:#0f0f14}
.pb-preview-bg-img,.pb-preview-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pb-preview-bg-img{background-size:cover;background-position:center}
.pb-preview-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%)}
.pb-preview-card{
	position:absolute;left:24px;bottom:24px;right:24px;z-index:2;
	display:flex;align-items:center;gap:14px;
}
.pb-preview-card-avatar-wrap{position:relative;display:inline-flex;width:56px;height:56px;flex:0 0 auto}
.pb-preview-card-avatar{width:46px;height:46px;border-radius:12px;object-fit:cover;position:absolute;top:5px;left:5px}
.pb-preview-card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pb-preview-card-login{color:#fff;font-size:15px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* frame / avatar preview: big avatar centered */
.pb-preview-frame--avatar{background:radial-gradient(circle at 50% 30%,rgba(70,80,140,.25),transparent),#0f0f14;padding:20px}
.pb-preview-avatar-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.pb-preview-avatar-wrap--big{width:180px;height:180px}
.pb-preview-avatar{width:148px;height:148px;border-radius:22px;object-fit:cover;position:absolute;top:16px;left:16px}
.pb-preview-frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* plain item preview (icons, other cosmetics) */
.pb-preview-frame--plain{background:radial-gradient(circle at 50% 30%,rgba(70,80,140,.25),transparent),#0f0f14;padding:20px}
.pb-preview-plain-img,.pb-preview-plain-video{max-width:100%;max-height:220px;width:auto;height:auto;object-fit:contain}

@media(max-width:500px){
	.pb-preview-frame{height:220px}
	.pb-preview-avatar-wrap--big{width:150px;height:150px}
	.pb-preview-avatar{width:124px;height:124px;top:13px;left:13px}
}

/* sticker pack preview grid inside the modal */
.pb-sticker-preview-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
	gap:10px;
	width:100%;
}

.pb-sticker-preview-item{
	width:100%;
	aspect-ratio:1/1;
	object-fit:contain;
	border-radius:12px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.06);
	padding:8px;
}