/* ================================================
   RESPONSIVE & MEDIA QUERIES
   ================================================ */

/* Features Section */
.features {
	display: grid;
	gap: 0.85rem;
	text-align: left;
	font-size: 0.95rem;
	color: rgba(217, 229, 255, 0.75);
	line-height: 1.6;
}

.feature {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.feature span {
	display: inline-flex;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(250, 34, 84, 0.9), rgba(118, 184, 255, 0.6));
	box-shadow: 0 0 18px rgba(250, 34, 84, 0.28);
	margin-top: 0.2rem;
	flex-shrink: 0;
}

/* Hover States (Desktop) */
@media (hover: hover) {
	.title-screen:hover {
		transform: translateY(-6px);
		box-shadow: 0 32px 90px rgba(0, 0, 0, 0.68), inset 0 0 32px rgba(255, 82, 120, 0.22);
	}

	.title-screen:hover .cta {
		border-color: rgba(243, 246, 255, 0.7);
	}
}

/* Mobile Styles */
@media (max-width: 480px) {
	body {
		--shell-frame-padding: 0;
		padding: calc(env(safe-area-inset-top)) 0 calc(env(safe-area-inset-bottom)) 0;
	}

	.title-screen {
		border-radius: 0;
		padding: clamp(2.4rem, 10vw, 3.5rem) clamp(1.75rem, 8vw, 2.5rem);
		gap: 1.2rem;
	}

	.cta {
		letter-spacing: 0.22rem;
		padding: 0.75rem 1rem;
	}

	.cta-indicator {
		letter-spacing: 0.12rem;
	}

	/* Larger, more tappable buttons on mobile */
	.actions .btn {
		font-size: 1.05rem;
		padding: 1rem 1.25rem;
		min-width: 14ch;
	}

	/* Keep accept/decline slightly smaller on mobile */
	.actions .btn-accept,
	.actions .btn-decline {
		font-size: 0.95rem;
	}
}

/* Button Variants (Mobile) */
@media (max-width: 480px) {
	.btn-accept {
		border-color: rgba(118, 184, 255, 0.45);
		font-size: 0.95rem;
	}

	.btn-accept:hover,
	.btn-accept:focus {
		background: rgba(118, 184, 255, 0.18);
		border-color: rgba(158, 204, 255, 0.55);
		box-shadow: 0 0 18px rgba(118, 184, 255, 0.28);
	}

	.btn-decline {
		border-color: rgba(250, 34, 84, 0.45);
		font-size: 0.95rem;
	}

	.btn-decline:hover,
	.btn-decline:focus {
		background: rgba(250, 34, 84, 0.18);
		border-color: rgba(255, 82, 120, 0.55);
		box-shadow: 0 0 18px rgba(250, 34, 84, 0.28);
	}

	.btn-secondary {
		border-color: rgba(255, 82, 104, 0.35);
		background: rgba(12, 4, 8, 0.85);
	}

	/* Disabled button styling */
	.btn:disabled,
	.btn.button--used {
		opacity: 0.4;
		cursor: not-allowed;
		filter: grayscale(0.6);
	}

	.btn.button--used {
		border-color: rgba(150, 150, 150, 0.3);
		background: rgba(50, 50, 50, 0.3);
	}
}