.mu97d-bg-dw,
.mu97d-bg-dk,
.mu97d-bg-elf,
.mu97d-bg-mg,
.mu97d-bg-dl {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1920px;
	height: 1080px;
	max-width: 100vw;
	max-height: 100vh;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
	opacity: 0.4;
}

.mu97d-bg-dw {
	background-image: url('../img/backgrounds/dw.png');
}

.mu97d-bg-dk {
	background-image: url('../img/backgrounds/bk.png');
}

.mu97d-bg-elf {
	background-image: url('../img/backgrounds/elf.png');
}

.mu97d-bg-mg {
	background-image: url('../img/backgrounds/mg.png');
}

.mu97d-bg-dl {
	background-image: url('../img/backgrounds/dl.png');
}

.exchange-market {
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px;
	position: relative;
	z-index: 1;
}

.character-stats-panel {
	flex: 0 0 400px;
	width: 400px;
	min-width: 0;
}

.mu97d-equipment-section {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.equipment-panel {
	background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(25, 30, 45, 0.95) 100%);
	border: 2px solid rgba(150, 120, 80, 0.3);
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	overflow: visible;
}

.equipment-title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.equipment-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.equipment-slot {
	position: relative;
	aspect-ratio: 1;
	background: linear-gradient(135deg, rgba(20, 25, 40, 0.9) 0%, rgba(30, 35, 50, 0.9) 100%);
	border: 2px solid rgba(150, 120, 80, 0.4);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	transition: all 0.3s ease;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.equipment-slot:hover {
	border-color: rgba(200, 160, 100, 0.7);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(200, 160, 100, 0.3);
	transform: translateY(-2px);
}

.equipment-slot-empty {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		rgba(50, 50, 60, 0.3),
		rgba(50, 50, 60, 0.3) 10px,
		rgba(40, 40, 50, 0.3) 10px,
		rgba(40, 40, 50, 0.3) 20px
	);
}

.equipment-item {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.equipment-item-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	overflow: visible;
}

.equipment-item-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.equipment-enhance {
	position: absolute;
	bottom: 2px;
	right: 2px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
	color: #ffd700;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 3px;
	z-index: 1;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 215, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.equipment-slot[data-slot="8"] {
	grid-column: 1;
	grid-row: 1;
}

.equipment-slot[data-slot="2"] {
	grid-column: 3;
	grid-row: 1;
}

.equipment-slot[data-slot="7"] {
	grid-column: 5;
	grid-row: 1;
}

.equipment-slot[data-slot="0"] {
	grid-column: 1;
	grid-row: 3;
}

.equipment-slot[data-slot="9"] {
	grid-column: 2;
	grid-row: 3;
}

.equipment-slot[data-slot="3"] {
	grid-column: 3;
	grid-row: 3;
}

.equipment-slot[data-slot="1"] {
	grid-column: 5;
	grid-row: 3;
}

.equipment-slot[data-slot="5"] {
	grid-column: 1;
	grid-row: 4;
}

.equipment-slot[data-slot="10"] {
	grid-column: 2;
	grid-row: 4;
}

.equipment-slot[data-slot="4"] {
	grid-column: 3;
	grid-row: 4;
}

.equipment-slot[data-slot="11"] {
	grid-column: 4;
	grid-row: 4;
}

.equipment-slot[data-slot="6"] {
	grid-column: 5;
	grid-row: 4;
}

.character-stats-panel {
	background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(25, 30, 45, 0.95) 100%);
	border: 2px solid rgba(150, 120, 80, 0.3);
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.character-header {
	text-align: center;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(150, 120, 80, 0.2);
}

.character-name {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.character-subtitle {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.character-main-stats {
	margin-bottom: 24px;
}

.character-class {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 12px;
	margin-bottom: 16px;
	border: 1px solid rgba(150, 120, 80, 0.2);
}

.character-class-icon {
	flex-shrink: 0;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.character-class-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.character-class-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.character-class-name {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.character-level-reset {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.stat-item {
	text-align: center;
	padding: 12px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	border: 1px solid rgba(150, 120, 80, 0.2);
}

.stat-label {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.stat-value {
	display: block;
	font-size: 24px;
	font-weight: 700;
	color: #ffd700;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.character-attributes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.attribute-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	border-left: 3px solid rgba(150, 120, 80, 0.4);
	transition: all 0.2s ease;
}

.attribute-row:hover {
	background: rgba(0, 0, 0, 0.3);
	border-left-color: rgba(200, 160, 100, 0.6);
}

.attribute-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

.attribute-value {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.character-buy-button {
	margin-top: auto;
}

.btn-buy-character {
	display: block;
	width: 100%;
	padding: 16px;
	background: linear-gradient(135deg, rgba(200, 160, 100, 0.9) 0%, rgba(150, 120, 80, 0.9) 100%);
	border: 2px solid rgba(255, 215, 0, 0.4);
	border-radius: 12px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-buy-character:hover {
	background: linear-gradient(135deg, rgba(220, 180, 120, 0.95) 0%, rgba(170, 140, 100, 0.95) 100%);
	border-color: rgba(255, 215, 0, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.btn-buy-price {
	display: block;
}

.mu97d-inventory-section {
	width: 100%;
	position: relative;
	z-index: 1;
}

.inventory-panel {
	background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(25, 30, 45, 0.95) 100%);
	border: 2px solid rgba(150, 120, 80, 0.3);
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	overflow: visible;
}

.inventory-title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.mu97d-inventory-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.mu97d-inventory-item {
	position: relative;
	aspect-ratio: 1;
	background: linear-gradient(135deg, rgba(20, 25, 40, 0.9) 0%, rgba(30, 35, 50, 0.9) 100%);
	border: 2px solid rgba(150, 120, 80, 0.4);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	overflow: visible;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mu97d-inventory-item:hover {
	background: linear-gradient(135deg, rgba(40, 45, 60, 0.95) 0%, rgba(50, 55, 70, 0.95) 100%);
	border-color: rgba(200, 160, 100, 0.7);
	transform: translateY(-2px) scale(1.05);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(200, 160, 100, 0.3);
	z-index: 5;
}

.mu97d-item-image-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}

.mu97d-item-image-wrapper .item-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.mu97d-item-image-wrapper .item-enchance {
	position: absolute;
	bottom: 2px;
	right: 2px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
	color: #ffd700;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 3px;
	z-index: 1;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 215, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mu97d-item {
	position: relative;
}

.equipment-item,
.mu97d-inventory-item {
	position: relative;
}

.equipment-slot {
	overflow: visible;
}

.mu97d-item-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 12px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%);
	color: #fff;
	border: 1px solid rgba(150, 120, 80, 0.5);
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.mu97d-item-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.98);
}

.equipment-item:hover .mu97d-item-tooltip,
.mu97d-inventory-item:hover .mu97d-item-tooltip,
.mu97d-item:hover .mu97d-item-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(-2px);
}

.mu97d-item-tooltip-name {
	font-weight: 600;
	color: #fff;
	display: inline;
}

.mu97d-inventory-wrapper {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	justify-content: flex-start;
}

.mu97d-inv-column-main {
	flex: 0 0 auto;
}

.mu97d-inv-column-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mu97d-inv-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: #f0f0f0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mu97d-inventory-wrapper .mu97d-inventory-grid {
	display: grid !important;
	background: rgba(0, 0, 0, 0.35);
	padding: 6px;
	border-radius: 6px;
	border: 1px solid rgba(180, 180, 180, 0.25);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
	gap: 2px;
	list-style: none;
	margin: 0;
}

.mu97d-inventory-wrapper .mu97d-inventory-grid-main {
	grid-template-columns: repeat(8, 32px);
	grid-auto-rows: 32px;
	grid-auto-flow: dense;
}

.mu97d-inventory-wrapper .mu97d-inventory-grid-extend {
	grid-template-columns: repeat(8, 32px);
	grid-auto-rows: 32px;
	grid-auto-flow: dense;
}

.mu97d-inventory-wrapper .mu97d-inventory-grid .mu97d-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.85));
	border: 1px solid rgba(140, 140, 140, 0.6);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 0 1px rgba(0, 0, 0, 0.9);
}

.mu97d-inventory-wrapper .mu97d-inventory-grid .mu97d-slot-empty {
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.04), rgba(10, 10, 10, 0.9));
}

.mu97d-inventory-wrapper .mu97d-inventory-grid .mu97d-slot:hover {
	border-color: rgba(255, 215, 0, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 0 6px rgba(255, 215, 0, 0.5);
}

.mu97d-inventory-wrapper .mu97d-inventory-grid .inventory-slot {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
	padding: 2px;
}

.mu97d-inventory-wrapper .mu97d-inventory-grid .item-enchance {
	position: absolute;
	bottom: 1px;
	right: 2px;
	font-size: 10px;
	padding: 1px 3px;
	background: rgba(0, 0, 0, 0.9);
	color: #ffd700;
	border-radius: 3px;
	border: 1px solid rgba(255, 215, 0, 0.4);
}

.mu97d-item-tooltip-level {
	color: #ffd700;
	font-size: 11px;
	font-weight: 700;
	margin-left: 4px;
}

.no-scroll {
	overflow: hidden;
}

.purchase-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 7, 12, 0.85);
	backdrop-filter: blur(2px);
	z-index: 10000;
}

.purchase-modal[aria-hidden="false"] {
	display: flex;
}

.purchase-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #12131c;
	color: #fff;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.purchase-modal__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
}

.purchase-modal__chip {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(39, 234, 132, 0.15);
	color: #27ea84;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 16px;
}

.purchase-modal__dialog p {
	margin: 0 0 12px;
	line-height: 1.5;
}

.purchase-modal__lead {
	font-size: 14px;
	color: #b8c1d6;
	margin-bottom: 20px;
}

.purchase-modal__card {
	display: flex;
	gap: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 20px;
	align-items: center;
}

.purchase-modal__avatar {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: rgba(23, 29, 45, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.purchase-modal__avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.purchase-modal__info {
	flex: 1;
	min-width: 0;
}

.purchase-modal__name {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.purchase-modal__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	font-size: 13px;
}

.purchase-modal__stats li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.purchase-modal__stats span {
	color: #b8c1d6;
}

.purchase-modal__stats strong {
	color: #fff;
	font-weight: 600;
}

.purchase-modal__price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 20px;
}

.purchase-modal__price span {
	font-size: 14px;
	color: #b8c1d6;
}

.purchase-modal__hint {
	font-size: 13px;
	color: #b8c1d6;
}

.purchase-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.purchase-modal__cancel {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	padding: 10px 20px;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.purchase-modal__cancel:hover {
	background: rgba(255, 255, 255, 0.08);
}

.purchase-modal__confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
}

.purchase-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.purchase-modal__close:hover {
	color: #fff;
}

@media (max-width: 1920px) {
	.mu97d-bg-dw,
	.mu97d-bg-dk,
	.mu97d-bg-elf,
	.mu97d-bg-mg,
	.mu97d-bg-dl {
		width: 100vw;
		height: 56.25vw;
		max-height: 100vh;
	}
}

@media (max-width: 1400px) {
	.exchange-market {
		flex-direction: column;
		gap: 24px;
	}
	
	.character-stats-panel {
		width: 100%;
		flex: 0 0 100%;
	}
	
	.mu97d-equipment-section {
		width: 100%;
		flex: 0 0 100%;
	}
	
	.mu97d-inventory-section {
		width: 100%;
	}
	
	.mu97d-inventory-grid {
		grid-template-columns: repeat(8, 1fr);
	}
	
	.equipment-grid {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.exchange-market {
		padding: 16px;
	}
	
	.mu97d-inventory-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 6px;
	}
	
	.equipment-grid {
		gap: 8px;
	}
	
	.equipment-panel,
	.character-stats-panel,
	.inventory-panel {
		padding: 16px;
	}
	
	.character-name {
		font-size: 22px;
	}
	
	.equipment-title,
	.inventory-title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.mu97d-inventory-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.character-level-reset {
		grid-template-columns: 1fr;
	}
}