/* Gifts slice — the gift shop (buy + send), the friend send-sheet (shared by shop
 * and stash), and the stash grid shown on the You tab. Coins are earned here
 * (claim daily / watch ad) and spent on gifts. Visual-first: art + price, no
 * labels. Loaded after styles.css; reuses the .shop-overlay shell. */

.shop-overlay {
	position: absolute;
	inset: 0;
	z-index: 35;
	overflow-y: auto;
	padding: 22px 16px calc(28px + var(--safe-b));
	background: var(--bg) var(--screen-bg-art) center / cover;
	-webkit-overflow-scrolling: touch;
}
.shop-overlay::-webkit-scrollbar {
	display: none;
}

/* Header: the count-up balance and the two coin grants. */
.shop-head {
	text-align: center;
	margin: 34px 2px 14px;
}
.shop-balance {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 22px;
	border-radius: 999px;
	background: rgba(255, 206, 74, 0.14);
	border: 1px solid rgba(255, 206, 74, 0.5);
	box-shadow: 0 14px 30px -20px rgba(255, 206, 74, 0.95);
}
.shop-balance img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}
.shop-balance-n {
	font-family: var(--display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	min-width: 1.4ch;
	text-align: left;
}
.shop-grants {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.shop-grants .btn {
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.grant-ico {
	height: 20px;
	width: auto;
	vertical-align: middle;
}
.shop-loading {
	display: flex;
	justify-content: center;
	padding: 48px 20px;
}

/* Buy-coins packs: one-off Stripe purchases, shown as compact tiles. */
.coin-packs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.coin-pack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 12px 6px 10px;
	border-radius: 16px;
	background: rgba(255, 206, 74, 0.12);
	border: 1px solid rgba(255, 206, 74, 0.45);
}
.coin-pack:active {
	background: rgba(255, 206, 74, 0.22);
}
.coin-pack img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}
.coin-pack-n {
	font-family: var(--display);
	font-weight: 700;
	font-size: 15px;
	color: var(--gold);
}
.coin-pack-price {
	font-size: 12px;
	color: var(--muted);
}

/* Shop catalogue grid: each gift is art + coin price, nothing else. */
.gift-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.gift-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px 10px;
	border-radius: 18px;
	background: var(--card);
	border: 1px solid var(--line);
}
.gift-card:disabled {
	opacity: 0.4;
}
.gift-card:active {
	background: var(--card2);
}
.gift-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
}
.gift-icon img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.gift-price {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--gold);
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
}
.gift-price img {
	width: 17px;
	height: 17px;
	object-fit: contain;
}

/* Friend send-sheet: pick who to send a gift to. Shared by shop + stash. */
.send-backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(10, 6, 24, 0.66);
	padding: 0 12px calc(20px + var(--safe-b));
}
.send-sheet {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 76vh;
	overflow-y: auto;
	padding: 26px 18px 18px;
	border-radius: 24px 24px 0 0;
	background: var(--bg2, #1d1442);
	border: 1px solid var(--line);
	text-align: center;
}
.send-gift {
	width: 86px;
	height: 86px;
	object-fit: contain;
	margin-bottom: 16px;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
.send-friends {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 8px;
}
.send-friend {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	min-width: 0;
}
.send-friend-nm {
	font-size: 12.5px;
	color: var(--fg);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Stash grid (You tab): every received gift; tap one to send it on. */
.stash-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.stash-item {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 16px;
	background: var(--card);
	border: 1px solid var(--line);
}
.stash-item:active {
	background: var(--card2);
}
.stash-item img {
	width: 76%;
	height: 76%;
	object-fit: contain;
	filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.4));
}