/* ========================================================================== */
/* Base */
/* ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--bg: #0b0b18;
	--bg2: #12121f;
	--bg3: #1a1a2e;
	--border: #2a2a45;
	--border2: #3a3a60;
	--text: #e0e0f0;
	--muted: #9a9ac8;
	--accent: #aa9dff;
	--accent2: #5a4af7;
	--gold: #ffd700;
	--good: #80d080;
	--bad: #f07070;
	--warn: #f0a030;
	--sw: 210px
}

html, body { min-height: 100% }

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: radial-gradient(circle at top left, rgba(90, 74, 247, .16), transparent 32%), var(--bg);
	color: var(--text);
	min-height: 100vh;
	display: flex;
	flex-direction: column
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px
}

::-webkit-scrollbar-track { background: var(--bg2) }

::-webkit-scrollbar-thumb {
	background: var(--border2);
	border-radius: 3px
}

.hidden { display: none !important }

/* ========================================================================== */
/* Layout */
/* ========================================================================== */

#login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px
}

.login-box {
	background: linear-gradient(180deg, rgba(18, 18, 31, .98), rgba(13, 13, 26, .98));
	border: 1px solid var(--border2);
	border-radius: 16px;
	padding: 36px 32px;
	max-width: 360px;
	width: 100%;
	text-align: center;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .35)
}

.login-logo {
	font-size: 36px;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: 3px;
	margin-bottom: 6px
}

.login-sub {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 24px
}

#app {
	display: flex;
	min-height: 100vh
}

#sidebar {
	width: var(--sw);
	background: linear-gradient(180deg, var(--bg2), #0f0f1f);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	z-index: 50;
	overflow-y: auto
}

.sidebar-logo {
	font-size: 20px;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: 2px;
	padding: 18px 16px 14px;
	border-bottom: 1px solid var(--border)
}

.sidebar-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	overflow: hidden
}

.sidebar-player,
.sidebar-balance {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0
}

.sidebar-player {
	color: var(--text);
	font-weight: 900;
	overflow: hidden
}

.sidebar-balance {
	color: var(--gold);
	font-weight: 900;
	flex: 0 1 auto
}

.sidebar-player span:last-child,
.sidebar-balance span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.sidebar-nav {
	flex: 1;
	padding: 8px 0
}

.sidebar-bottom {
	padding: 8px 0 12px;
	border-top: 1px solid var(--border)
}

#main {
	margin-left: var(--sw);
	flex: 1;
	min-width: 0;
	padding: 20px;
	max-width: 980px
}

#topbar {
	width: 100%;
	min-height: 60px;
	margin-bottom: 20px;
	padding: 8px 12px;
	background: linear-gradient(180deg, rgba(18, 18, 31, .98), rgba(13, 13, 26, .98));
	border: 1px solid var(--border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	overflow: visible
}

.topbar-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 0 0 auto;
	flex-wrap: nowrap
}

.topbar-item {
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border-left: 0;
	border-radius: 6px;
	flex: 0 0 auto;
	justify-content: center;
	white-space: nowrap
}

.topbar-item .ni-label { display: none }

.topbar-item.active {
	background: #1e1e38;
	color: var(--accent);
	border-left-color: transparent
}

.page { display: none }

.page.active { display: block }

.page-title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 18px;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 10px
}

/* ========================================================================== */
/* Navigation */
/* ========================================================================== */

.nav-group { margin: 2px 0 7px }

.nav-group-toggle {
	width: 100%;
	border: none;
	background: none;
	color: #8585b8;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 5px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em
}

.nav-group-toggle:hover {
	background: var(--bg3);
	color: var(--text)
}

.nav-group-caret {
	font-size: 15px;
	line-height: 1;
	transition: transform .15s;
	width: 12px;
	text-align: center
}

.nav-group.expanded>.nav-group-toggle .nav-group-caret { transform: rotate(90deg) }

.nav-group-items { display: none }

.nav-group.expanded>.nav-group-items { display: block }

.nav-group-items .nav-item { padding-left: 31px }

.nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	border-left: 3px solid transparent;
	transition: background .12s, color .12s, border-color .12s
}

.nav-item:hover {
	background: var(--bg3);
	color: var(--text)
}

.nav-item.active {
	background: #1e1e38;
	color: var(--accent);
	border-left-color: var(--accent);
	font-weight: 700
}

.ni-icon {
	font-size: 16px;
	width: 20px;
	min-width: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

.ni-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: currentColor
}

.ni-icon svg[stroke],
.btn svg[stroke] {
	fill: none;
	stroke: currentColor
}

.ni-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
	image-rendering: pixelated
}

.ni-icon svg[fill] { fill: currentColor }

/* ========================================================================== */
/* Shared Components */
/* ========================================================================== */

.card {
	background: linear-gradient(180deg, rgba(18, 18, 31, .98), rgba(16, 16, 30, .98));
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025)
}

.card-title {
	font-size: 14px;
	font-weight: 800;
	color: #cfcaff;
	margin-bottom: 12px
}

.grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 12px
}

.grid3 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
	gap: 10px
}

.grid4 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px
}

.btn {
	background: #2a2a50;
	border: 1px solid #4a4a80;
	border-radius: 8px;
	color: #c0c0e0;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	transition: background .12s, border-color .12s, transform .12s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px
}

.btn:hover {
	background: #3a3a60;
	border-color: #6f6fa0;
	transform: translateY(-1px)
}

.btn-primary {
	background: var(--accent2);
	border-color: var(--accent);
	color: #fff
}

.btn-primary:hover { background: #6a5af7 }

.btn-danger {
	background: #3a1a1a;
	border-color: #6a2a2a;
	color: #f07070
}

.btn-danger:hover { background: #4a2a2a }

.btn-warn {
	background: #3a2a00;
	border-color: #7a5a00;
	color: #f0a030
}

.btn-warn:hover { background: #4a3a00 }

.btn-sm {
	padding: 5px 11px;
	font-size: 12px
}

.btn:disabled {
	opacity: .4;
	cursor: not-allowed;
	transform: none
}

.btn-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.tab-row {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap
}

.tab {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 13px;
	color: var(--muted);
	font-weight: 700
}

.tab:hover {
	background: var(--border);
	color: var(--text)
}

.tab.active {
	background: #2a2a50;
	color: var(--accent);
	border-color: #6f6fa0;
	font-weight: 800
}

.stat-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #2a2a40;
	font-size: 13px
}

.stat-row:last-child { border-bottom: none }

.stat-label { color: var(--muted) }

.stat-val {
	color: #c0c0e0;
	font-weight: 700
}

.empty {
	text-align: center;
	padding: 36px 20px;
	color: var(--muted);
	font-size: 14px
}

.empty-icon {
	font-size: 38px;
	display: block;
	margin-bottom: 10px;
	opacity: .4
}

.empty-full { grid-column: 1/-1 }

.state-loading { color: var(--accent) }

.state-error { color: var(--bad) }

.tip-box {
	background: #0f0f20;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.7
}

.tip-box b { color: #d6d2ff }

.inline-flex { display: flex !important }

.feature-card { overflow: hidden }

.feature-card .message-body { margin-top: 8px }

.btn:focus-visible,
.tab:focus-visible,
.nav-item:focus-visible,
.inp:focus-visible,
.field-inp:focus-visible,
.chat-bar input:focus-visible,
.mk-select-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px
}

.page-title svg,
.ni-icon svg,
.btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: currentColor
}

.btn svg[stroke],
.ni-icon svg[stroke] {
	fill: none;
	stroke: currentColor
}

.feature-card,
#powerup-grid .card,
#portfolio-list .listing,
#giveaway-list .card,
#clan-list .card,
#event-list .card {
	border-color: var(--border);
	background: linear-gradient(180deg, rgba(18, 18, 31, .98), rgba(16, 16, 30, .98))
}

.feature-title { color: #d6d2ff }

.feature-card .btn:disabled,
.plus-wall-card .btn:disabled {
	opacity: .45;
	cursor: not-allowed
}

.roadmap-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 10px;
	margin-bottom: 14px
}

.roadmap-toolbar .inp { margin-bottom: 0 }

.roadmap-summary { margin-bottom: 14px }

.roadmap-stat {
	margin-bottom: 0;
	min-height: 82px
}

.roadmap-stat-value {
	font-size: 24px;
	font-weight: 900;
	color: var(--accent);
	line-height: 1.1
}

.roadmap-stat-label {
	font-size: 12px;
	color: var(--muted);
	font-weight: 800;
	margin-top: 6px
}

.roadmap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	align-items: start
}

.roadmap-card { margin-bottom: 0 }

.roadmap-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}

.roadmap-list {
	display: grid;
	gap: 7px
}

.badge-summary {
	margin-bottom: 14px
}

.badge-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px;
	gap: 10px;
	margin-bottom: 14px
}

.badge-toolbar .inp { margin-bottom: 0 }

.badge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
	gap: 12px
}

.badge-stat-card {
	margin-bottom: 0;
	min-height: 82px
}

.badge-stat-value {
	color: var(--gold);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.15;
	overflow-wrap: anywhere
}

.badge-stat-label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	margin-top: 6px
}

.badge-card {
	position: relative;
	min-height: 210px;
	border: 1px solid #5b4420;
	border-radius: 8px;
	padding: 14px 11px 12px;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(33, 28, 22, .98), rgba(12, 12, 20, .98));
	box-shadow: inset 0 1px 0 rgba(255, 230, 130, .18), 0 12px 24px rgba(0, 0, 0, .22);
	overflow: hidden
}

.badge-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	border: 1px solid rgba(255, 215, 0, .3);
	pointer-events: none
}

.badge-card.locked {
	border-color: var(--border);
	background: linear-gradient(180deg, rgba(23, 23, 36, .98), rgba(13, 13, 24, .98));
	opacity: .78
}

.achievement-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 10px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #211400;
	font-size: 30px;
	font-weight: 900;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
	background: radial-gradient(circle at 35% 25%, #fff7a8, #ffd54a 38%, #b66a00 72%);
	border: 3px solid #ffe36a;
	box-shadow: 0 0 0 3px #5b3b00, 0 0 18px rgba(255, 200, 40, .28)
}

.achievement-icon-green {
	background: radial-gradient(circle at 35% 25%, #d8ff8f, #62d943 42%, #22711c 78%);
	border-color: #dfff6b
}

.achievement-icon-blue {
	background: radial-gradient(circle at 35% 25%, #d7fcff, #3db8ff 42%, #1b4da3 78%);
	border-color: #8ce9ff
}

.achievement-icon-purple {
	background: radial-gradient(circle at 35% 25%, #f6d7ff, #b54aff 42%, #5821a3 78%);
	border-color: #e4a3ff
}

.achievement-icon-silver {
	background: radial-gradient(circle at 35% 25%, #fff, #bec4cf 42%, #5d6575 78%);
	border-color: #eef2f8
}

.achievement-icon.locked {
	color: #9fa3b8;
	text-shadow: none;
	background: radial-gradient(circle at 35% 25%, #5b6074, #2d3040 48%, #171923 82%);
	border-color: #7a8094;
	box-shadow: 0 0 0 3px #222535
}

.badge-name {
	color: var(--text);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.2;
	min-height: 32px
}

.badge-desc {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
	margin: 7px 0 10px;
	min-height: 45px
}

.badge-meter {
	height: 7px;
	border-radius: 999px;
	background: #11111f;
	border: 1px solid var(--border);
	overflow: hidden
}

.badge-meter-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #75d85d, #ffd24a)
}

.badge-progress {
	color: #cfcaff;
	font-size: 11px;
	font-weight: 800;
	margin-top: 8px
}

.roadmap-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 8px 9px;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 8px;
	background: rgba(26, 26, 46, .58);
	min-height: 38px
}

.roadmap-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	overflow-wrap: anywhere
}

.roadmap-status {
	font-size: 11px;
	font-weight: 900;
	border-radius: 999px;
	padding: 4px 8px;
	white-space: nowrap;
	border: 1px solid transparent
}

.roadmap-status-button {
	cursor: pointer;
	font-family: inherit
}

.roadmap-status-button:hover,
.roadmap-status-button:focus-visible {
	box-shadow: 0 0 0 2px rgba(170, 157, 255, .18);
	outline: none
}

.roadmap-live .roadmap-status {
	color: #bdf0bd;
	background: rgba(128, 208, 128, .13);
	border-color: rgba(128, 208, 128, .35)
}

.roadmap-partial .roadmap-status {
	color: #ffe08c;
	background: rgba(255, 215, 0, .12);
	border-color: rgba(255, 215, 0, .32)
}

.roadmap-planned .roadmap-status {
	color: #c7c7e8;
	background: rgba(154, 154, 200, .12);
	border-color: rgba(154, 154, 200, .25)
}

/* ========================================================================== */
/* Forms And Controls */
/* ========================================================================== */

.inp,
.chat-bar input,
.auction-bid-input {
	background: linear-gradient(180deg, rgba(26, 26, 46, .98), rgba(18, 18, 31, .98));
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 9px 12px;
	font-size: 14px;
	width: 100%;
	margin-bottom: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035)
}

.inp:focus,
.chat-bar input:focus,
.auction-bid-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(170, 157, 255, .18)
}

select.inp { cursor: pointer }

.field-inp {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	flex: 1;
	min-width: 80px;
	padding: 7px 10px;
	font-size: 13px;
	width: 100%;
	margin-bottom: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035)
}

.field-inp:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(170, 157, 255, .16)
}

.currency-icon {
	width: 20px !important;
	height: 20px !important;
	vertical-align: middle;
	image-rendering: pixelated;
	display: inline-block
}

.pk-price .currency-icon, .listing-price .currency-icon, .lb-tokens .currency-icon, .stat-val .currency-icon { margin-right: 2px }

.mk-select-native {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none !important;
	margin: 0 !important
}

.mk-select {
	position: relative;
	width: 100%;
	margin-bottom: 10px
}

.mk-select.compact, .setting-row .mk-select, .csp-u-28 .mk-select { margin-bottom: 0 }

.mk-select-btn {
	width: 100%;
	min-height: 40px;
	background: linear-gradient(180deg, rgba(26, 26, 46, .98), rgba(18, 18, 31, .98));
	border: 1px solid var(--border2);
	border-radius: 8px;
	color: var(--text);
	padding: 9px 40px 9px 12px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035)
}

.mk-select-btn:hover {
	border-color: var(--accent);
	box-shadow: 0 0 15px rgba(170, 157, 255, .11)
}

.mk-select.open .mk-select-btn {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(170, 157, 255, .18), 0 0 18px rgba(90, 74, 247, .14)
}

.mk-select-btn::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: translateY(-65%) rotate(45deg);
	transition: transform .15s
}

.mk-select.open .mk-select-btn::after { transform: translateY(-35%) rotate(225deg) }

.mk-select-menu {
	position: absolute;
	z-index: 500;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 230px;
	overflow-y: auto;
	background: var(--bg2);
	border: 1px solid var(--border2);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 1px rgba(170, 157, 255, .08);
	padding: 6px
}

.mk-select-item {
	width: 100%;
	border: none;
	background: transparent;
	color: var(--muted);
	padding: 9px 10px;
	border-radius: 7px;
	text-align: left;
	cursor: pointer;
	font-size: 13px;
	font-weight: 800
}

.mk-select-item:hover {
	background: var(--bg3);
	color: var(--text)
}

.mk-select-item.active {
	background: #2a2a50;
	color: var(--accent)
}

.mk-select-item:disabled {
	opacity: .45;
	cursor: not-allowed
}

.mk-select.disabled {
	opacity: .5;
	pointer-events: none
}

.setting-row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 10px 0;
	background: rgba(26, 26, 46, .55);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px
}

.setting-row span {
	color: #c0c0e0;
	font-size: 13px;
	font-weight: 900
}

.setting-row .inp { margin-bottom: 0 }

.settings-subtitle {
	color: #cfcaff;
	font-size: 13px;
	font-weight: 900;
	margin: 14px 0 8px
}

.nav-settings {
	margin-top: 6px
}

.nav-setting-head,
.nav-setting-row {
	display: grid;
	grid-template-columns: minmax(115px, 1fr) minmax(86px, 110px) minmax(86px, 110px);
	gap: 10px;
	align-items: center
}

.nav-setting-head {
	color: #8f8fb5;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0;
	padding: 0 10px 4px
}

.nav-setting-row {
	background: rgba(26, 26, 46, .55);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin: 8px 0;
	padding: 10px
}

.nav-setting-row span {
	color: #c0c0e0;
	font-size: 13px;
	font-weight: 900
}

.nav-setting-row .inp { margin-bottom: 0 }

/* ========================================================================== */
/* Blooks And Packs */
/* ========================================================================== */

.rb {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 4px;
	font-weight: 800
}

.rb-common {
	background: #222;
	color: #d0d0d8
}

.rb-uncommon {
	background: #1a3a1a;
	color: #76dc76
}

.rb-rare {
	background: #1a2a4a;
	color: #80aef8
}

.rb-epic {
	background: #2a1a4a;
	color: #b889ff
}

.rb-legendary {
	background: #3a2a0a;
	color: #ffbd5c
}

.rb-chroma {
	background: #2a1a3a;
	color: #ff8cda
}

.rb-mythical {
	background: #1a2a3a;
	color: #00d4ff
}

.rb-supreme {
	background: #3a1010;
	color: #ff7373
}

.rb-iridescent {
	background: #1a3a30;
	color: #00ffcc
}

.rb-transcendent {
	background: #2a2a10;
	color: #fff;
	text-shadow: 0 0 6px #fff
}

.pack-card,
.blook-card {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	text-align: center
}

.pack-card {
	border-width: 2px;
	padding: 16px;
	cursor: pointer;
	transition: border-color .15s, transform .12s
}

.pack-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px)
}

.pk-name {
	font-size: 14px;
	font-weight: 800;
	color: #c0c0e0;
	margin-bottom: 6px
}

.pk-price {
	font-size: 13px;
	color: var(--gold);
	background: #1a1800;
	border-radius: 6px;
	padding: 3px 10px;
	display: inline-flex;
	align-items: center;
	gap: 2px
}

.pk-count {
	font-size: 11px;
	color: var(--muted);
	margin-top: 5px
}

.blook-card.sellable { cursor: pointer }

.blook-card.sellable:hover {
	border-color: #6a2a2a;
	background: #1e0e0e
}

.blook-card.selected {
	border-color: var(--gold);
	box-shadow: 0 0 0 2px rgba(255, 215, 0, .12)
}

.smart-sell-panel {
	margin: 10px 0 14px;
	padding: 12px;
	background: rgba(20, 20, 36, .82);
	border: 1px solid var(--border);
	border-radius: 8px
}

.smart-sell-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px
}

.smart-sell-title {
	color: var(--text);
	font-size: 14px;
	font-weight: 900
}

.smart-sell-sub {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	margin-top: 2px
}

.smart-sell-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center
}

.smart-sell-select {
	width: auto;
	min-width: 150px;
	margin-bottom: 0
}

.smart-sell-protect {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 800
}

.bk-name {
	font-size: 12px;
	font-weight: 700;
	color: #c0c0e0;
	margin-bottom: 3px
}

.bk-count {
	font-size: 11px;
	color: var(--muted)
}

.bk-sellval {
	font-size: 11px;
	color: var(--gold);
	margin-top: 2px
}

.blook-vis {
	object-fit: contain;
	display: block;
	margin-left: auto;
	margin-right: auto;
	image-rendering: pixelated
}

.blook-vis-sm {
	width: 36px;
	height: 36px;
	margin-bottom: 5px
}

.blook-vis-md {
	width: 52px;
	height: 52px;
	margin-bottom: 5px
}

.blook-vis-lg {
	width: 80px;
	height: 80px;
	margin-bottom: 10px
}

.blook-emoji {
	display: block;
	text-align: center;
	line-height: 1;
	margin-bottom: 5px
}

.blook-emoji-sm { font-size: 26px }

.blook-emoji-md { font-size: 37px }

.blook-emoji-lg { font-size: 58px }

.mass-result-item {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px;
	text-align: center
}

.mass-result-name {
	font-size: 11px;
	font-weight: 700;
	color: #c0c0e0
}

.mass-result-count {
	font-size: 12px;
	color: var(--gold);
	font-weight: 800
}

/* ========================================================================== */
/* Listings And Trading */
/* ========================================================================== */

.listing {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}

.listing:hover { border-color: var(--border2) }

.listing-left {
	display: flex;
	align-items: center;
	gap: 10px
}

.listing-info .lname {
	font-size: 14px;
	font-weight: 800;
	color: #c0c0e0
}

.listing-info .lseller {
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px
}

.listing-right {
	text-align: right;
	flex-shrink: 0
}

.listing-price {
	font-size: 14px;
	font-weight: 800;
	color: var(--gold);
	margin-bottom: 6px
}

.listing-thumb {
	width: 38px !important;
	height: 38px !important;
	flex-shrink: 0
}

.listing-wrap { flex-wrap: wrap }

.auction-bid-input {
	font-size: 12px;
	width: 90px;
	margin-bottom: 6px
}

.auction-timer {
	font-size: 11px;
	color: #f07070;
	font-weight: 800;
	margin-top: 3px
}

.auction-bids {
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px
}

.top-bid {
	font-size: 13px;
	color: #80d080;
	font-weight: 800
}

/* ========================================================================== */
/* Chat And Messages */
/* ========================================================================== */

.chat-wrap {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden
}

.chat-msgs {
	height: 300px;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.chat-msg {
	font-size: 13px;
	line-height: 1.5
}

.chat-author {
	font-weight: 900;
	margin-right: 4px
}

.chat-bar {
	display: flex;
	gap: 8px;
	padding: 8px;
	border-top: 1px solid var(--border)
}

.chat-bar input {
	flex: 1;
	margin-bottom: 0;
	background: var(--bg2)
}

.chat-text { color: #c0c0d0 }

.message-card { margin-bottom: 8px }

.message-unread { border-color: var(--accent) }

.message-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px
}

.message-subject {
	font-weight: 900;
	color: #c0c0e0
}

.message-meta {
	font-size: 12px;
	color: var(--muted);
	margin-top: 3px
}

.message-actions { justify-content: flex-end }

.message-body {
	white-space: pre-wrap;
	font-size: 13px;
	color: #c0c0d0;
	line-height: 1.45
}

#hdr-name.chat-color-dev-rainbow, .lb-name.chat-color-dev-rainbow { display: inline-block }

.chat-author, .lb-name, #hdr-name, #prof-name { transition: color .12s ease, filter .12s ease }

.chat-color-common { color: #c0c0d0 !important }

body.theme-light .chat-color-common { color: #303030 !important }

.chat-color-dev-rainbow,
.chat-color-rainbow {
	background: linear-gradient(90deg, #ff4d6d, #ffb703, #80ed99, #4cc9f0, #b388ff, #ff4dcb, #ff4d6d);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	animation: melonkit-rainbow-text 3s linear infinite;
	font-weight: 900
}

.chat-color-red { color: #ff4d6d !important }

.chat-color-orange { color: #ff9f1c !important }

.chat-color-gold { color: #ffd700 !important }

.chat-color-green { color: #80ed99 !important }

.chat-color-blue { color: #4cc9f0 !important }

.chat-color-purple { color: #b388ff !important }

.chat-color-pink { color: #ff4dcb !important }

.chat-color-cyan { color: #70f0d0 !important }
.chat-color-white { color: #ffffff !important }


/* ========================================================================== */
/* Rewards And Results */
/* ========================================================================== */

.spin-center {
	text-align: center;
	padding: 24px 0
}

.spin-emoji {
	font-size: 64px;
	display: inline-block;
	cursor: pointer;
	transition: transform .1s
}

.spin-emoji:hover { transform: scale(1.08) }

.spin-emoji.spinning { animation: spinIt .65s ease }

@keyframes spinIt {
	0% { transform: rotate(0) }

	100% { transform: rotate(720deg) }
}

.reward-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #2a2a40;
	font-size: 13px
}

.reward-row:last-child { border-bottom: none }

.reward-bar-bg {
	flex: 1;
	background: var(--bg3);
	border-radius: 4px;
	height: 7px
}

.reward-bar-fill {
	background: var(--accent2);
	height: 7px;
	border-radius: 4px
}

.reward-amount {
	color: var(--gold);
	min-width: 55px
}

.reward-pct {
	color: var(--muted);
	min-width: 32px;
	text-align: right;
	font-size: 12px
}

.reward-fill-35 { width: 35% }

.reward-fill-25 { width: 25% }

.reward-fill-20 { width: 20% }

.reward-fill-10 { width: 10% }

.reward-fill-6 { width: 6% }

.reward-fill-3 { width: 3% }

.reward-fill-1 { width: 1% }

.result-wrap {
	padding: 16px 0;
	text-align: center
}

.result-name {
	font-size: 22px;
	font-weight: 900;
	margin-bottom: 4px
}

.result-pack-name {
	font-size: 13px;
	color: var(--muted)
}

.pop-in { animation: pop .4s cubic-bezier(.36, .07, .19, .97) }

@keyframes pop {
	0% {
		transform: scale(.2);
		opacity: 0
	}

	60% { transform: scale(1.15) }

	100% {
		transform: scale(1);
		opacity: 1
	}
}

/* ========================================================================== */
/* Modals And Notifications */
/* ========================================================================== */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: 16px
}

.modal-box {
	background: var(--bg2);
	border: 1px solid var(--border2);
	border-radius: 16px;
	padding: 28px;
	max-width: 440px;
	width: 100%;
	text-align: center;
	max-height: 90vh;
	overflow-y: auto
}

.modal-box h2 {
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 8px;
	color: var(--text)
}

.modal-box p {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 16px
}

#notif {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #1a3a1a;
	border: 1px solid #2a5a2a;
	border-radius: 10px;
	padding: 12px 20px;
	font-size: 13px;
	color: #80d080;
	z-index: 300;
	max-width: 300px
}

#notif.err {
	background: #3a1a1a;
	border-color: #5a2a2a;
	color: #f07070
}

.av-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 14px
}

.av-opt {
	background: var(--bg3);
	border: 2px solid var(--border);
	border-radius: 8px;
	padding: 8px;
	cursor: pointer;
	text-align: center;
	font-size: 26px
}

.av-opt:hover, .av-opt.sel { border-color: var(--accent) }

.avatar-placeholder-sm { font-size: 22px }

.avatar-placeholder-lg {
	font-size: 52px;
	display: block;
	text-align: center
}

/* ========================================================================== */
/* Dashboard And Social */
/* ========================================================================== */

.dash-stat-card {
	text-align: center;
	padding: 14px 10px
}

.dash-stat-icon {
	font-size: 26px;
	margin-bottom: 4px;
	min-height: 26px
}

.dash-stat-value {
	font-size: 20px;
	font-weight: 900;
	color: #c0c0e0
}

.dash-stat-label {
	font-size: 12px;
	color: var(--muted)
}

.friend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: linear-gradient(180deg, rgba(26, 26, 46, .95), rgba(18, 18, 31, .95));
	border-color: var(--border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025)
}

.friend-row:hover {
	border-color: var(--border2);
	background: linear-gradient(180deg, rgba(30, 30, 56, .98), rgba(18, 18, 31, .98))
}

.friend-left { min-width: 0 }

.friend-name {
	color: #d6d2ff;
	font-size: 14px;
	font-weight: 900;
	overflow-wrap: anywhere
}

.friend-meta {
	color: var(--muted);
	font-size: 12px;
	margin-top: 3px
}

/* ========================================================================== */
/* Leaderboard */
/* ========================================================================== */

.lb-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 6px;
	background: var(--bg3)
}

.lb-row.me {
	background: #1a1a3a;
	border-left: 3px solid var(--accent)
}

.lb-rank {
	font-size: 16px;
	font-weight: 900;
	min-width: 34px;
	text-align: center
}

.lb-avatar {
	width: 34px;
	min-width: 34px;
	display: inline-flex;
	justify-content: center
}

.lb-name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 13px;
	font-weight: 800
}

.lb-tokens {
	font-size: 13px;
	color: var(--gold);
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	gap: 3px
}

/* ========================================================================== */
/* Powerups And Paint */
/* ========================================================================== */

.plus-wall-card {
	border-color: rgba(255, 215, 0, .45);
	background:
		radial-gradient(circle at top left, rgba(255, 215, 0, .10), transparent 35%),
		var(--bg2);
}

.plus-wall-card .card-title { color: var(--gold) }

.plus-lock-note {
	border-color: rgba(255, 215, 0, .25);
	color: #d8c98e
}

#clan-mine .plus-wall-card { margin-bottom: 14px }

@keyframes melonkit-rainbow-text {
	0% { background-position: 0% 50% }

	100% { background-position: 300% 50% }
}

.paint-swatch-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 12px;
	margin-bottom: 10px;
	font-weight: 800
}

.paint-swatch {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-block;
	border: 1px solid rgba(255,255,255,.25);
	box-shadow: 0 0 12px rgba(170,157,255,.15);
	flex: 0 0 18px
}

.active-paint-card {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 1px rgba(170,157,255,.25), 0 0 22px rgba(170,157,255,.12)
}

/* ========================================================================== */
/* Utilities */
/* ========================================================================== */

.mt-10 { margin-top: 10px }
.mt-6 { margin-top: 6px }

.mb-12 { margin-bottom: 12px }

.no-margin { margin: 0 !important }

.flex-fill { flex: 1 }

.csp-u-1 {
	justify-content: center;
	margin-bottom: 18px
}

.csp-u-2 {
	color: #f07070;
	font-size: 13px;
	margin-bottom: 10px
}

.csp-u-3 {
	width: 100%;
	margin-bottom: 10px
}

.csp-u-4 {
	font-size: 12px;
	color: var(--muted)
}

.csp-u-5 { margin-bottom: 14px }

.csp-u-6 { margin-bottom: 16px }

.csp-u-7 {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 12px
}

.csp-u-8 {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

.csp-u-9 {
	width: 75px;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 7px 10px;
	font-size: 15px;
	font-weight: 800;
	text-align: center
}

.csp-u-10 {
	font-size: 12px;
	color: var(--muted);
	margin-top: 8px
}

.csp-u-11 { max-width: 600px }

.csp-u-12 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
	margin: 14px 0
}

.csp-u-13 {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 14px
}

.csp-u-14 { width: 100% }

.csp-u-15 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px
}

.csp-u-16 { margin: 0 }

.csp-u-17 {
	font-size: 12px;
	color: #f0b070;
	margin-bottom: 10px
}

.csp-u-18 {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #1a0e0e;
	border: 1px solid #6a2a2a;
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 12px
}

.csp-u-19 {
	font-size: 13px;
	color: #f07070;
	font-weight: 800
}

.csp-u-20 {
	font-size: 12px;
	color: #d0a0a0
}

.csp-u-21 {
	font-size: 13px;
	color: var(--gold);
	font-weight: 800
}

.csp-u-22 { flex: 1 }

.csp-u-23 {
	font-size: 15px;
	font-weight: 800;
	color: #c0c0e0;
	margin: 14px 0 6px
}

.csp-u-24 {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 16px
}

.csp-u-25 {
	background: #1a3a1a;
	border: 1px solid #2a5a2a;
	border-radius: 10px;
	padding: 12px 22px;
	display: inline-block;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 800;
	color: #80d080
}

.csp-u-26 {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 10px
}

.csp-u-27 { margin-bottom: 12px }

.csp-u-28 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
	align-items: start
}

.csp-u-29 {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	padding: 9px 0
}

.csp-u-30 {
	margin: 8px 0;
	min-height: 92px;
	resize: vertical
}

.csp-u-31 {
	text-align: center;
	margin-bottom: 14px
}

.csp-u-32 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--bg3);
	border: 2px solid var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	cursor: pointer;
	overflow: hidden
}

.csp-u-33 {
	font-size: 16px;
	font-weight: 800;
	color: #c0c0e0;
	margin-bottom: 2px
}

.csp-u-34 {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 14px
}

.csp-u-35 { margin-top: 12px }

.csp-u-36 {
	width: 100%;
	margin-top: 10px
}

.csp-u-37 { justify-content: center }

/* ========================================================================== */
/* Theme */
/* ========================================================================== */

body.theme-light {
	--bg: #f4f5ff;
	--bg2: #fff;
	--bg3: #ebeefe;
	--border: #cfd4ee;
	--border2: #b9c0e4;
	--text: #16172a;
	--muted: #5d6385;
	--accent: #5a4af7;
	--accent2: #6a5af7;
	--gold: #b37b00;
	background: #f4f5ff
}

body.theme-light .card, body.theme-light .login-box, body.theme-light #sidebar, body.theme-light #topbar, body.theme-light .modal-box, body.theme-light .listing, body.theme-light .chat-wrap { box-shadow: 0 10px 26px rgba(28, 35, 90, .08) }

body.theme-light #topbar { background: linear-gradient(180deg, #fff, #f7f8ff) }

body.theme-light .nav-item.active {
	background: #e9e8ff;
	color: var(--accent)
}

body.theme-light .btn {
	color: #23243a;
	background: #e8ebff;
	border-color: #c3c9ef
}

body.theme-light .btn-primary {
	background: var(--accent2);
	color: #fff;
	border-color: var(--accent)
}

body.theme-light .btn-danger {
	background: #ffe6e6;
	color: #a72a2a;
	border-color: #e8b2b2
}

body.theme-light .inp,
body.theme-light .field-inp,
body.theme-light .chat-bar input,
body.theme-light .auction-bid-input,
body.theme-light select.inp {
	background: #fff;
	color: var(--text);
	border-color: var(--border2)
}

body.theme-light .mk-select-btn,
body.theme-light .mk-select-menu {
	background: #fff;
	color: var(--text);
	border-color: var(--border2)
}

body.theme-light .mk-select-item { color: var(--muted) }

body.theme-light .mk-select-item:hover {
	background: #eef0ff;
	color: var(--text)
}

body.theme-light .mk-select-item.active {
	background: #e9e8ff;
	color: var(--accent)
}

body.theme-light .tip-box, body.theme-light .blook-card, body.theme-light .pack-card, body.theme-light .reward-bar-bg, body.theme-light .setting-row { background: #f7f8ff }

/* ========================================================================== */
/* Responsive */
/* ========================================================================== */

@media(max-width:720px) {
	#topbar {
		align-items: stretch;
		flex-direction: column;
		gap: 8px
	}

	.topbar-nav {
		width: 100%;
		justify-content: flex-start
	}

	.setting-row {
		grid-template-columns: 1fr;
		gap: 7px
	}

	.roadmap-toolbar,
	.badge-toolbar,
	.roadmap-grid {
		grid-template-columns: 1fr
	}

	.friend-row {
		align-items: stretch;
		flex-direction: column
	}

	.friend-row .btn-row { justify-content: flex-start }

	#page-friends .btn-row .btn { width: 100% }
}

@media(max-width:600px) {
	:root { --sw: 54px }

	.nav-item .ni-label { display: none }

	.sidebar-logo {
		font-size: 13px;
		padding: 14px 8px
	}

	.sidebar-account {
		justify-content: center;
		padding: 8px 6px
	}

	.sidebar-player,
	.sidebar-balance {
		justify-content: center;
		flex: 0 0 auto
	}

	.sidebar-player span:last-child,
	.sidebar-balance span { display: none }

	#main { padding: 12px }

	#topbar {
		gap: 8px;
		margin-bottom: 14px
	}

	.topbar-nav {
		flex-wrap: nowrap;
		gap: 5px
	}

	.topbar-item {
		flex: 0 0 auto;
		justify-content: center
	}

	.nav-group-toggle {
		padding-left: 8px;
		padding-right: 8px;
		justify-content: center
	}

	.nav-group-label { display: none }

	.nav-group-items .nav-item { padding-left: 16px }
}


/* Optional Google Material Symbols support */
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	display: inline-block;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}