* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
		}

		body {
			background: #faf7f2;
			font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
			color: #2e241f;
			padding-bottom: 30px;
		}

		/* mobile container */
		.hotel-landing {
			max-width: 550px;
			margin: 0 auto;
			background: #ffffff;
			min-height: 100vh;
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.02);
		}

		/* hero with food focus */
		.food-hero {
			background: linear-gradient(135deg, #d6401f 0%, #b52b0c 100%);
			padding: 32px 20px 30px 20px;
			color: white;
			border-radius: 0 0 32px 32px;
			margin-bottom: 20px;
			text-align: center;
		}

		.food-hero h1 {
			font-size: 2rem;
			font-weight: 800;
			letter-spacing: -0.5px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}

		.food-hero p {
			font-size: 0.85rem;
			opacity: 0.9;
			margin-top: 8px;
		}

		.food-tag {
			background: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(4px);
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 16px;
			border-radius: 60px;
			font-size: 0.7rem;
			font-weight: 500;
			margin-top: 14px;
		}

		/* filter chips */
		.cuisine-filter {
			padding: 12px 20px 8px 20px;
			display: flex;
			gap: 12px;
			overflow-x: auto;
			scrollbar-width: thin;
			white-space: nowrap;
			border-bottom: 1px solid #f1ede8;
		}

		.filter-chip {
			background: #f3efe9;
			padding: 8px 20px;
			border-radius: 40px;
			font-size: 0.8rem;
			font-weight: 600;
			color: #5d4030;
			transition: all 0.2s;
			cursor: pointer;
			display: inline-block;
		}

		.filter-chip.active {
			background: #d6401f;
			color: white;
			box-shadow: 0 4px 10px rgba(214, 64, 31, 0.25);
		}

		.filter-chip:active {
			transform: scale(0.96);
		}

		/* hotel cards section */
		.hotels-section {
			padding: 20px 16px 40px 16px;
		}

		.section-head {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			margin-bottom: 18px;
			padding: 0 4px;
		}

		.section-head h2 {
			font-size: 1.3rem;
			font-weight: 700;
			color: #2c2b26;
		}

		.result-count {
			background: #efe6df;
			padding: 4px 12px;
			border-radius: 50px;
			font-size: 0.7rem;
			font-weight: 600;
		}

		.hotel-card-list {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		/* card design inspired by restaurant/hotel fusion */
		.hotel-resto-card {
			background: white;
			border-radius: 28px;
			overflow: hidden;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
			border: 1px solid #f0e7e0;
			transition: all 0.2s ease;
			cursor: pointer;
		}

		.hotel-resto-card:active {
			transform: scale(0.99);
			background: #fefaf7;
		}

		.card-media {
			height: 150px;
			background-size: cover;
			background-position: center;
			position: relative;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			padding: 12px;
		}

		.cuisine-badge {
			background: rgba(0, 0, 0, 0.7);
			backdrop-filter: blur(6px);
			padding: 5px 12px;
			border-radius: 30px;
			font-size: 0.7rem;
			font-weight: 600;
			color: #ffdcb5;
		}

		.hotel-details {
			padding: 16px;
		}

		.hotel-name-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 6px;
		}

		.hotel-name {
			font-weight: 800;
			font-size: 1.2rem;
			letter-spacing: -0.3px;
		}

		.stars {
			color: #f5b642;
			font-size: 0.7rem;
			letter-spacing: 1px;
		}

		.chef-special {
			font-size: 0.7rem;
			color: #b87a5a;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.featured-dish {
			background: #fcf4ed;
			padding: 8px 10px;
			border-radius: 18px;
			font-size: 0.7rem;
			font-weight: 500;
			margin: 8px 0;
			color: #b34a28;
			display: inline-block;
		}

		.menu-preview {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			border-top: 1px solid #f2e9e2;
			padding-top: 12px;
		}

		.price-indicator {
			font-weight: 800;
			font-size: 0.9rem;
			background: #fff0e8;
			padding: 5px 12px;
			border-radius: 40px;
		}

		.explore-btn {
			background: #2e241f;
			border: none;
			padding: 8px 18px;
			border-radius: 40px;
			color: white;
			font-weight: 600;
			font-size: 0.7rem;
			transition: 0.2s;
		}

		.explore-btn:active {
			background: #d6401f;
			transform: scale(0.96);
		}

		/* modal styling for confirmation before menu */
		.modal-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(6px);
			z-index: 2000;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		.modal-box {
			background: white;
			max-width: 380px;
			width: 100%;
			border-radius: 40px;
			padding: 28px 24px;
			text-align: center;
			animation: scaleIn 0.2s ease;
		}

		@keyframes scaleIn {
			from {
				opacity: 0;
				transform: scale(0.95);
			}

			to {
				opacity: 1;
				transform: scale(1);
			}
		}

		.modal-box h3 {
			font-size: 1.6rem;
			margin: 12px 0 8px;
		}

		.modal-box p {
			color: #6f5b4c;
			margin: 12px 0 20px;
		}

		.modal-actions {
			display: flex;
			gap: 12px;
			justify-content: center;
		}

		.modal-btn {
			border: none;
			padding: 10px 20px;
			border-radius: 50px;
			font-weight: 600;
			flex: 1;
			cursor: pointer;
		}

		.modal-confirm {
			background: #d6401f;
			color: white;
		}

		.modal-cancel {
			background: #efe6df;
			color: #4d3628;
		}

		.toast-feedback {
			position: fixed;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			background: #1e1b18;
			color: white;
			padding: 10px 22px;
			border-radius: 60px;
			font-size: 0.8rem;
			z-index: 2100;
			opacity: 0;
			transition: opacity 0.2s;
			pointer-events: none;
			white-space: nowrap;
			max-width: 85vw;
			text-align: center;
		}

		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #ac9b8c;
		}

		footer {
			text-align: center;
			font-size: 0.6rem;
			color: #ccbcae;
			padding: 20px;
			border-top: 1px solid #f2e8e2;
			margin-top: 8px;
		}


		#player_turn {
			font-size: 2rem;
			font-weight: bold;
			text-align: center;
		}

		.pop {
			animation: popName 0.4s ease;
		}

		@keyframes popName {
			0% {
				transform: scale(0.5);
				opacity: 0;
			}

			70% {
				transform: scale(1.2);
				opacity: 1;
			}

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