/* Furry Oasis Resort & Spa (/levelup/daycare) */
.oasis {
	max-width: 760px;
	margin: 0 auto;
}

/* Today's apple basket */
.oasis-basket {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f7eed3;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 6px;
	color: #674636;
}
.oasis-basket-img {
	flex: none;
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.oasis-basket-count {
	flex: 1 1 auto;
	min-width: 0;
}
.oasis-basket-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-family: Georgia, serif;
}
.oasis-basket-row b {
	font-weight: 600;
}
.oasis-basket .progress-bar {
	height: 22px;
	margin: 8px 0 0;
}

/* Suites: up to 3 across, then 2, then 1 */
.oasis-grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 30px) / 3)), 1fr));
	margin-bottom: 20px;
}
.oasis-grid > * {
	min-width: 0;
}

/* One suite door: wood frame, brass room plaque, a window onto the guest */
.suite {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 12px 12px;
	background: #fff8e8;
	border: 3px solid #754e1a;
	border-radius: 6px;
	text-align: center;
	color: #674636;
}
.suite-number {
	padding: 1px 12px;
	margin-bottom: 8px;
	background: #d8b44a;
	color: #4a3500;
	border-radius: 3px;
	font-family: Georgia, serif;
	font-size: 0.85em;
}
.suite-window {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 170px;
	box-sizing: border-box;
	padding: 6px;
	background: #fefae0;
	border: 3px solid #c8a97a;
}
.suite-window img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.suite .nameplate {
	display: table;
	margin: 10px auto 0;
	padding: 2px 12px;
}
.suite-guest {
	margin: 6px 0 10px;
	font-size: 0.95em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* The straw tray at the bottom: food bowl plus the button or a tag */
.suite-tray {
	width: 100%;
	box-sizing: border-box;
	margin: auto 0 0;
	padding: 10px 8px 8px;
	background: #f7eed3;
	border-radius: 4px;
	min-height: 58px;
}
.suite-bowl {
	position: relative;
	flex: none;
	display: inline-block;
	width: 44px;
	height: 18px;
	margin-top: 12px;
	background: #8b5a2b;
	border-top: 3px solid #a87443;
	border-radius: 0 0 22px 22px;
}
.suite-apple {
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* Fed today: the window dims and the bowl is empty */
.suite.is-fed .suite-window img {
	opacity: 0.55;
}
.suite.is-fed {
	background: #f7eed3;
}
.suite.is-fed .suite-tray {
	background: #ece3bf;
}

@media (prefers-reduced-motion: no-preference) {
	.suite-apple {
		transition: top 0.15s ease;
	}
	.suite-tray:hover .suite-apple,
	.suite-tray:focus-within .suite-apple {
		top: -24px;
	}
}