/* xobile */



@font-face {
	font-family: 'xobile';
	src: url('./Abel.ttf') format('truetype');
}

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

body {
	background: linear-gradient(165deg, #f2f5fa 0%, #e6ecf3 100%);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	color: #17212b;
}

/* main card – marketplace panel */
.marketplace {

	width: 100%;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);




	overflow: hidden;

}




/* --- scrolling banner / marquee (ads) --- */
.top-banner {
	background: linear-gradient(90deg, #102b40, #1d3e5e, #102b40);
	color: white;
	padding: 10px 0;
	border-bottom: 2px solid rgba(255, 215, 0, 0.4);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}

.banner-track {
	display: inline-block;
	animation: scrollBanner 18s linear infinite;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding-left: 20px;
}

.banner-track span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 40px;
	color: #ffecbb;
}

.banner-track i {
	font-size: 1rem;
	color: #ffd966;
	filter: drop-shadow(0 2px 4px black);
}

@keyframes scrollBanner {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

#hub-logo {
	font-family: 'xobile', sans-serif;
	color: #ff5c00;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	/* background: #1e3d5b; */
}

/* --- hero section (mobile first, compact & bold) --- */
.hero {
	padding: 1rem 0rem 0rem 1rem;
	background: radial-gradient(circle at 0% 20%, rgba(255, 255, 245, 0.5), transparent 70%);
}



#hub-moto {
	font-size: 1rem;
	color: #1e3d5b;

	border-left: 3px solid #ff5c00;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 0 20px 20px 0;
}

.hero-stats {
	display: flex;
	gap: 20px;
	margin-top: 12px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(4px);
	padding: 6px 14px;
	border-radius: 60px;
	font-size: 0.85rem;
	font-weight: 550;
	color: #113753;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.stat-item i {
	color: #ff5c00;
}


#hunt-banner
{
	aspect-ratio: 226/71;
	background-image: url(./samplehuntXX.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

#hunt-planet
{
	padding: 1rem;
	display: none;


}


.show
{
	display: block !important;
}

/* app grid – 3 cols */
.app-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 14px;
	padding: 28px 18px 18px;
	border-top: 2px dashed rgba(90, 120, 170, 0.25);
	border-bottom: 2px dashed rgba(90, 120, 170, 0.25);
	background: rgba(255, 255, 255, 0.2);
}

.app-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #142b3c;
	transition: transform 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.app-card:active {
	transform: scale(0.95);
}

.icon-circle {
	width: 80px;
	height: 80px;
	background: white;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 15px 25px -10px rgba(10, 40, 70, 0.25), 0 4px 6px rgba(0, 0, 0, 0.02);
	margin-bottom: 12px;
	background: linear-gradient(135deg, #ffffff, #f2f8ff);
	border: 1px solid rgba(255, 255, 255, 0.9);
}

.icon-circle i {
	font-size: 38px;
	filter: drop-shadow(0 4px 4px rgba(0, 20, 40, 0.1));
}

/* distinct icon colors (playful) */
.app-card[data-app="shop"] i {
	color: #c44b4b;
}

.app-card[data-app="social"] i {
	color: #3b82f6;
}

.app-card[data-app="music"] i {
	color: #b624b6;
}

.app-card[data-app="video"] i {
	color: #dc6200;
}

.app-card[data-app="news"] i {
	color: #1f8a6b;
}

.app-card[data-app="cloud"] i {
	color: #7b5db0;
}

.app-card[data-app="game"] i {
	color: #d97706;
}

.app-card[data-app="photo"] i {
	color: #b23b8f;
}

.app-card[data-app="code"] i {
	color: #2a5f8a;
}

.app-name {
	font-weight: 550;
	font-size: 1rem;
	margin-bottom: 2px;
}

.app-domain {
	font-size: 0.68rem;
	background: rgba(50, 80, 120, 0.08);
	padding: 3px 8px;
	border-radius: 30px;
	font-family: 'SF Mono', monospace;
	color: #274e6d;
	backdrop-filter: blur(2px);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* extra mini apps (consolidated) */
.extra-tools {
	padding: 18px 18px 24px;
}

.section-tag {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1f4870;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.3px;
}

.mini-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.mini-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	border-radius: 28px;
	padding: 12px 4px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	transition: 0.1s;
}

.mini-card:active {
	background: rgba(255, 255, 255, 0.9);
	transform: scale(0.96);
}

.mini-icon {
	width: 46px;
	height: 46px;
	border-radius: 24px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	font-size: 22px;
	box-shadow: 0 6px 10px rgba(0, 20, 40, 0.1);
}

.mini-label {
	font-size: 0.7rem;
	font-weight: 530;
	color: #1d3b58;
}

.mini-domain {
	font-size: 0.55rem;
	opacity: 0.7;
	font-family: monospace;
}

/* footer */
.market-footer {
	padding: 16px 20px 22px;
	font-size: 0.7rem;
	color: #577394;
	display: flex;
	justify-content: center;
	gap: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.2);
}

/* small screens adjustments */
@media (max-width: 360px) {
	.icon-circle {
		width: 70px;
		height: 70px;
	}

	.icon-circle i {
		font-size: 32px;
	}

	.app-name {
		font-size: 0.85rem;
	}

	.hero h2 {
		font-size: 1.9rem;
	}
}