/* HubiMatch deck — Noor palette (emerald + gold) */

.hubi-app {
	--hubi-deep: #062b23;
	--hubi-deep-2: #0a3a2f;
	--hubi-gold: #d8b06a;
	--hubi-cream: #f7f2e7;
	--hubi-ink: #10201c;
	--hubi-pass: #b4553f;
	--hubi-like: #1f7a5c;
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	padding: 26px 22px 30px;
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(216, 176, 106, .16), transparent 60%),
		linear-gradient(170deg, #07332a 0%, #041d18 100%);
	color: var(--hubi-cream);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
	font-family: inherit;
	overflow: hidden;
}

.hubi-app::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d8b06a' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M30 2 58 30 30 58 2 30z'/%3E%3Cpath d='M30 12 48 30 30 48 12 30z'/%3E%3C/g%3E%3C/svg%3E");
	opacity: .5;
	pointer-events: none;
}

.hubi-toolbar,
.hubi-stage,
.hubi-actions,
.hubi-status,
.hubi-meta {
	position: relative;
	z-index: 2;
}

.hubi-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.hubi-deck-title { margin: 0; font-size: 19px; letter-spacing: .01em; color: var(--hubi-cream); }
.hubi-filters { display: flex; gap: 8px; }
.hubi-filters label { display: flex; flex-direction: column; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 242, 231, .65); gap: 4px; }
.hubi-filters select {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(216, 176, 106, .35);
	color: var(--hubi-cream);
	border-radius: 10px;
	padding: 6px 8px;
	font-size: 12px;
	max-width: 170px;
}

.hubi-stage { margin: 18px auto 6px; min-height: 430px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.hubi-stack { position: relative; width: 100%; max-width: 330px; height: 410px; }

.hubi-card {
	position: absolute;
	inset: 0;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(160deg, #0d4436 0%, #071f1a 100%);
	border: 1px solid rgba(216, 176, 106, .28);
	cursor: grab;
	touch-action: none;
	user-select: none;
	transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
	will-change: transform;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.hubi-card.is-dragging { transition: none; }
.hubi-card[data-top="0"] { pointer-events: none; }

.hubi-avatar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 74px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(247, 242, 231, .92);
	background: linear-gradient(150deg, #115243 0%, #08251e 70%);
}
.hubi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hubi-avatar::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23d8b06a' stroke-opacity='.22'%3E%3Cpath d='M42 4 80 42 42 80 4 42z'/%3E%3Cpath d='M42 20 64 42 42 64 20 42z'/%3E%3Ccircle cx='42' cy='42' r='6'/%3E%3C/g%3E%3C/svg%3E");
	opacity: .6;
}

.hubi-info {
	position: relative;
	padding: 46px 18px 16px;
	background: linear-gradient(to top, rgba(3, 18, 15, .96) 42%, rgba(3, 18, 15, .55) 78%, transparent);
}
.hubi-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 21px; }
.hubi-badge {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: rgba(216, 176, 106, .18);
	border: 1px solid rgba(216, 176, 106, .5);
	color: var(--hubi-gold);
	padding: 3px 7px;
	border-radius: 999px;
}
.hubi-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.hubi-tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.hubi-tag-gold { background: rgba(216, 176, 106, .16); border-color: rgba(216, 176, 106, .45); color: #f0dcae; }
.hubi-bio { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(247, 242, 231, .8); }

.hubi-card.hubi-like { box-shadow: inset 0 0 0 3px var(--hubi-like); }
.hubi-card.hubi-pass { box-shadow: inset 0 0 0 3px var(--hubi-pass); }
.hubi-card.hubi-like::before,
.hubi-card.hubi-pass::before {
	content: "LIKE";
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	font-size: 13px;
	letter-spacing: .18em;
	padding: 6px 12px;
	border-radius: 8px;
	border: 2px solid currentColor;
	color: #6fe0b4;
}
.hubi-card.hubi-pass::before { content: "PASS"; color: #ff9c85; left: auto; right: 18px; }

.hubi-hint { display: flex; justify-content: space-between; width: 100%; max-width: 330px; margin: 10px auto 0; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 242, 231, .5); }

.hubi-actions { display: flex; gap: 18px; justify-content: center; margin-top: 16px; }
.hubi-btn {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: var(--hubi-cream);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease;
}
.hubi-btn:hover { transform: translateY(-2px); }
.hubi-btn-pass:hover { background: rgba(180, 85, 63, .35); }
.hubi-btn-like:hover { background: rgba(31, 122, 92, .4); }

.hubi-status { text-align: center; font-size: 13px; color: rgba(247, 242, 231, .75); margin: 14px 0 4px; }
.hubi-meta { text-align: center; font-size: 11.5px; color: rgba(247, 242, 231, .5); margin: 0; }

.hubi-matchmodal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 15, 12, .82);
	backdrop-filter: blur(3px);
	padding: 20px;
}
.hubi-matchmodal[hidden] { display: none; }
.hubi-matchcard {
	max-width: 400px;
	background: linear-gradient(170deg, #0a3a2f, #05201a);
	border: 1px solid rgba(216, 176, 106, .4);
	border-radius: 22px;
	padding: 26px 24px;
	color: var(--hubi-cream);
	text-align: center;
}
.hubi-matchcard h3 { margin: 8px 0 10px; font-size: 26px; }
.hubi-matchcard p { font-size: 14px; line-height: 1.6; color: rgba(247, 242, 231, .82); }
.hubi-kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--hubi-gold); }
.hubi-matchactions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.hubi-btn-solid, .hubi-btn-ghost { border-radius: 999px; padding: 10px 18px; font-size: 13px; cursor: pointer; text-decoration: none; }
.hubi-btn-solid { background: var(--hubi-gold); color: #10201c; border: 0; font-weight: 600; }
.hubi-btn-ghost { background: transparent; border: 1px solid rgba(247, 242, 231, .3); color: var(--hubi-cream); }
.hubi-fineprint { font-size: 11px; color: rgba(247, 242, 231, .55); margin-top: 14px; }

.hubi-matches { max-width: 900px; margin: 40px auto 0; }
.hubi-matchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.hubi-matchgrid article {
	background: #fff;
	border: 1px solid rgba(16, 32, 28, .12);
	border-radius: 16px;
	padding: 16px;
	color: #10201c;
}
.hubi-matchgrid h4 { margin: 0 0 6px; font-size: 16px; }
.hubi-matchgrid p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #3c4b46; }
.hubi-matchgrid .hubi-opener { font-style: italic; color: #1f7a5c; }