* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}

.scene-background {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #f6f7fb;
	background-image: url('Images/morning-image.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

body {
	font-family: Segoe UI, Roboto, sans-serif;
	background: #f6f7fb;
	color: #222;
	position: relative;
	overflow: hidden;
	display: block;
	padding: 0;
	margin: 0;
}

main {
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
	max-width: 700px;
	width: 100%;
}

h1 {
	font-size: 1.5rem;
	margin-bottom: 8px;
}

#btn {
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #2b6cb0;
	background: #3182ce;
	color: white;
	cursor: pointer;
}

#btn:hover {
	filter: brightness(0.95);
}

/* Extracted styles from index.html */

/* Minimal inline styles to keep intro focused */
html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	position: relative;
	overflow: hidden;
	display: block;
	align-items: unset;
	justify-content: unset;
	padding: 0;
}

body:before {
	content: "";
	position: fixed;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: -1;
}

.screen {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 40px auto;
	background: white;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.opening-screen {
	background: transparent !important;
	border: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: fixed;
	inset: 0;
}

.opening-screen.conversation-active {
	z-index: 200;
	pointer-events: none;
}

.opening-screen.conversation-active .opening-text {
	pointer-events: auto;
}

.opening-text {
	position: fixed;
	top: 56px;
	right: 28px;
	left: auto;
	width: min(460px, calc(100vw - 56px));
	max-width: 460px;
	text-align: left;
	padding: 0;
	z-index: 100;
}

.opening-text h1 {
	color: #0f172a;
}

.intro-bubble {
	position: relative;
	background: linear-gradient(
		155deg,
		rgba(255, 255, 255, 0.52) 0%,
		rgba(255, 255, 255, 0.32) 45%,
		rgba(210, 225, 245, 0.38) 100%
	);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: 22px 26px;
	border: 1px solid rgba(255, 255, 255, 0.62);
	border-bottom: 2px solid rgba(160, 180, 210, 0.45);
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.75),
		inset 0 -3px 8px rgba(15, 23, 42, 0.06),
		0 2px 0 rgba(255, 255, 255, 0.35),
		0 8px 16px rgba(15, 23, 42, 0.1),
		0 20px 44px rgba(15, 23, 42, 0.16),
		0 32px 64px rgba(15, 23, 42, 0.08);
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	transform: translateZ(0);
}

.intro-bubble::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.35) 0%,
		rgba(255, 255, 255, 0.08) 28%,
		transparent 55%
	);
	pointer-events: none;
}

.intro-bubble::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -6px;
	height: 10px;
	border-radius: 0 0 18px 18px;
	background: rgba(15, 23, 42, 0.12);
	filter: blur(6px);
	z-index: -1;
}

#intro-typing {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
	width: 100%;
}

#intro-typing .script-line {
	margin: 0;
	color: #1e293b;
	font-size: 1.02rem;
	line-height: 1.65;
	align-self: flex-start;
	max-width: 92%;
}

#intro-typing .script-line.typing-active {
	min-height: 1.65em;
}

.intro-msg {
	max-width: 88%;
	padding: 14px 18px;
	border-radius: 18px;
	font-size: 1.02rem;
	line-height: 1.65;
	animation: bubbleEnter 0.28s ease both;
}

.intro-msg.patient {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.65);
	color: #1e293b;
	border-bottom-left-radius: 6px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 4px 14px rgba(15, 23, 42, 0.08);
}

.intro-msg.angel {
	align-self: flex-end;
	background: linear-gradient(145deg, rgba(59, 130, 246, 0.82) 0%, rgba(37, 99, 235, 0.9) 100%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #f8fafc;
	border-bottom-right-radius: 6px;
	text-align: left;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 6px 18px rgba(37, 99, 235, 0.28);
}

.intro-msg.lullaby-lyrics p {
	margin: 0 0 6px;
}

.intro-msg.lullaby-lyrics em {
	font-style: italic;
}

.lullaby-verse-label {
	font-style: normal;
	margin-top: 10px;
	margin-bottom: 6px;
	opacity: 0.92;
}

.choice-prompt-group {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	max-width: 88%;
	width: 100%;
}

.choice-prompt-group .choice-prompt {
	align-self: flex-end;
	max-width: 100%;
	width: 100%;
}

.choice-hint {
	margin: 0;
	font-size: 0.9rem;
	color: #0f172a;
	font-weight: 600;
	font-style: italic;
	text-align: right;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65);
	animation: hintPulse 2.2s ease-in-out infinite;
}

@keyframes hintPulse {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

.choice-prompt {
	align-self: flex-end;
	max-width: 88%;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 18px;
	border-bottom-right-radius: 6px;
	background: rgba(255, 255, 255, 0.72);
	color: #1e40af;
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 6px 18px rgba(37, 99, 235, 0.14);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	animation: bubbleEnter 0.28s ease both;
}

.choice-prompt:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.88);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 10px 24px rgba(37, 99, 235, 0.22);
}

.choice-prompt:focus {
	outline: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 0 0 3px rgba(59, 130, 246, 0.25);
}

.action-choice-group {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	max-width: 88%;
	width: 100%;
}

.action-choice {
	width: 100%;
	text-align: left;
	padding: 14px 18px;
	border: 2px dashed rgba(79, 70, 229, 0.5);
	border-radius: 12px;
	background: rgba(238, 242, 255, 0.92);
	color: #4338ca;
	font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
	font-style: italic;
	font-size: 0.98rem;
	line-height: 1.55;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	animation: bubbleEnter 0.28s ease both;
}

.action-choice:hover {
	transform: translateY(-2px);
	background: rgba(224, 231, 255, 0.98);
	border-color: rgba(79, 70, 229, 0.7);
}

.action-choice:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.action-outcome {
	align-self: flex-end;
	max-width: 88%;
	padding: 16px 20px;
	border-radius: 16px;
	background: rgba(254, 243, 199, 0.88);
	border: 1px solid rgba(251, 191, 36, 0.45);
	color: #78350f;
	font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
	font-size: 1rem;
	line-height: 1.7;
	font-style: italic;
	animation: bubbleEnter 0.28s ease both;
}

body.scene-desk .scene-background {
	background-image: url('Images/desk.png');
}

body.scene-hospital .scene-background {
	background-image: url('Images/hospital.png');
}

body.scene-afternoon .scene-background {
	background-image: url('Images/afternoon-image.png');
}

body.scene-evening .scene-background {
	background-image: url('Images/evening.png');
}

body.scene-bed .scene-background {
	background-image: url('Images/bed.png');
}

body.scene-journey-intro .scene-background {
	background-color: #f3d5b5;
	background-image:
		radial-gradient(ellipse 85% 70% at 14% 18%, rgba(255, 210, 160, 0.75) 0%, transparent 58%),
		radial-gradient(ellipse 75% 60% at 88% 14%, rgba(255, 228, 185, 0.7) 0%, transparent 54%),
		radial-gradient(ellipse 80% 65% at 72% 88%, rgba(240, 170, 140, 0.55) 0%, transparent 56%),
		radial-gradient(ellipse 65% 50% at 18% 82%, rgba(255, 198, 150, 0.5) 0%, transparent 52%),
		linear-gradient(155deg, #fff0dc 0%, #f6d5b0 38%, #e8b98e 72%, #d9a67d 100%);
	background-position: center;
	background-size: cover;
}


.journey-intro {
	position: fixed;
	inset: 0;
	z-index: 2000;
	overflow-y: auto;
	padding: 28px 20px 40px;
}

body.scene-journey-intro #happiness-scale,
body.scene-message #happiness-scale,
body.scene-bubbles #happiness-scale {
	display: none;
}

#happiness-scale.hidden {
	display: none;
}

body.scene-journey-intro #opening-screen {
	display: none;
}

.journey-intro.hidden {
	display: none;
}

.journey-intro-panel {
	width: min(720px, 94vw);
	margin: 0 auto;
	padding: 34px 36px 30px;
	border-radius: 28px;
	background: rgba(255, 250, 242, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow:
		0 24px 60px rgba(120, 72, 40, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	animation: bubbleEnter 0.45s ease both;
}

.journey-title {
	margin: 0 0 16px;
	font-size: clamp(1.7rem, 4vw, 2.35rem);
	line-height: 1.2;
	color: #5c371f;
}

.journey-purpose {
	margin: 0 0 20px;
	padding: 18px 20px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(180, 120, 70, 0.14);
}

.journey-purpose-title {
	margin: 0 0 10px;
	font-size: clamp(1.05rem, 2.4vw, 1.25rem);
	line-height: 1.35;
	font-weight: 700;
	color: #5c371f;
}

.journey-purpose-text {
	margin: 0;
	font-size: clamp(0.95rem, 1.9vw, 1.06rem);
	line-height: 1.72;
	color: #4a3428;
}

.journey-lead {
	margin: 0 0 24px;
	font-size: clamp(1rem, 2vw, 1.12rem);
	line-height: 1.75;
	color: #4a3428;
}

.journey-lead-list {
	margin: 0 0 24px;
	padding-left: 1.25rem;
	list-style: disc;
	font-size: clamp(1rem, 2vw, 1.12rem);
	line-height: 1.75;
	color: #4a3428;
}

.journey-lead-list li {
	margin-bottom: 10px;
}

.journey-lead-list li:last-child {
	margin-bottom: 0;
}

.journey-preview-gallery-wrap {
	margin-bottom: 20px;
}

.journey-preview-label {
	margin: 0 0 12px;
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	font-weight: 700;
	color: #5c371f;
	text-align: left;
}

.journey-preview-gallery {
	margin-top: 0;
}

.journey-preview-card-wrap {
	gap: 10px;
	align-items: flex-start;
}

.journey-preview-image {
	display: block;
	width: auto;
	max-width: min(100%, 360px);
	height: auto;
	max-height: 315px;
	object-fit: contain;
	object-position: left center;
	border-radius: 14px;
	border: 1px solid rgba(120, 88, 62, 0.14);
	background: rgba(255, 255, 255, 0.88);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 8px 22px rgba(92, 58, 36, 0.1);
}

.journey-preview-image.journey-preview-image-animate {
	animation: factsCardEnter 0.28s ease both;
}

.journey-section {
	margin-bottom: 22px;
}

.journey-section h2 {
	margin: 0 0 10px;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	color: #6b3f24;
}

.journey-section p {
	margin: 0 0 10px;
	font-size: 0.98rem;
	line-height: 1.65;
	color: #4a3428;
}

.journey-stats,
.journey-credits {
	margin: 0 0 10px;
	padding-left: 1.2rem;
	color: #4a3428;
	line-height: 1.7;
}

.journey-about a {
	color: #9a3412;
}

.begin-journey-btn {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(180, 83, 9, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.begin-journey-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(180, 83, 9, 0.34);
}

body.scene-message .scene-background {
	background-color: #e8c9a0;
	background-image:
		radial-gradient(ellipse 90% 70% at 18% 28%, rgba(255, 196, 140, 0.82) 0%, transparent 58%),
		radial-gradient(ellipse 80% 60% at 82% 18%, rgba(255, 228, 170, 0.75) 0%, transparent 52%),
		radial-gradient(ellipse 85% 75% at 72% 82%, rgba(235, 165, 145, 0.7) 0%, transparent 55%),
		radial-gradient(ellipse 70% 55% at 12% 78%, rgba(195, 210, 165, 0.55) 0%, transparent 50%),
		radial-gradient(ellipse 60% 45% at 48% 52%, rgba(255, 210, 180, 0.45) 0%, transparent 60%),
		linear-gradient(155deg, #f7e8c8 0%, #ebc9a4 38%, #d9a88a 72%, #c8b48e 100%);
	background-position: center;
	background-size: cover;
}

body.scene-message #opening-screen {
	display: none !important;
}

body.scene-message {
	overflow: hidden;
	overscroll-behavior: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.message-section {
	position: fixed;
	inset: 0;
	z-index: 1600;
	display: block;
	height: 100%;
	max-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
	touch-action: pan-y;
	padding: max(20px, env(safe-area-inset-top)) 20px max(110px, calc(env(safe-area-inset-bottom) + 96px));
	pointer-events: auto;
}

.message-section.hidden {
	display: none;
}

.message-panel {
	width: min(640px, 94vw);
	margin: 0 auto;
	padding: 34px 36px 32px;
	border-radius: 28px;
	background: rgba(255, 252, 245, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.72);
	box-shadow:
		0 24px 60px rgba(92, 58, 36, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	animation: bubbleEnter 0.45s ease both;
}

.message-thanks {
	margin: 0 0 20px;
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	line-height: 1.7;
	color: #3f2d20;
	font-weight: 500;
	min-height: 3.2em;
	transition: opacity 0.55s ease, margin 0.55s ease;
}

.message-thanks.hidden {
	display: none;
}

.message-thanks.message-thanks-fade-out {
	opacity: 0;
	margin-bottom: 0;
	min-height: 0;
}

.message-end-info {
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.message-end-info.hidden {
	display: none;
}

.message-end-card {
	padding: 20px 20px 18px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.52);
	border: 1px solid rgba(180, 120, 70, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.message-end-card-about .message-end-section:last-of-type {
	margin-bottom: 14px;
}

.message-end-card-outreach {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.message-end-card-outreach .share-section {
	margin-bottom: 0;
}

.message-end-section {
	margin-bottom: 18px;
}

.message-end-section h2 {
	margin: 0 0 10px;
	font-size: clamp(1.02rem, 2.1vw, 1.15rem);
	color: #6b3f24;
}

.message-end-section p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #4a3428;
}

.about-creator-open-btn {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 12px 18px;
	border: 1px solid rgba(120, 88, 62, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #5c371f;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.about-creator-open-btn:hover {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 20px rgba(92, 58, 36, 0.12);
}

.author-work-dropdown {
	position: relative;
	margin-top: 10px;
}

.author-work-dropdown-toggle {
	display: block;
	position: relative;
	width: 100%;
	padding: 12px 18px;
	padding-right: 40px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 700;
	text-align: center;
	list-style: none;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(180, 83, 9, 0.24);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.author-work-dropdown-toggle::-webkit-details-marker {
	display: none;
}

.author-work-dropdown-toggle::after {
	content: '▾';
	position: absolute;
	right: 18px;
	font-size: 0.95rem;
	transition: transform 0.18s ease;
}

.author-work-dropdown[open] .author-work-dropdown-toggle::after {
	transform: rotate(180deg);
}

.author-work-dropdown-toggle:hover,
.author-work-dropdown-toggle:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(180, 83, 9, 0.3);
	outline: none;
}

.author-work-dropdown-menu {
	margin: 8px 0 0;
	padding: 8px;
	list-style: none;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(120, 88, 62, 0.16);
	box-shadow: 0 12px 28px rgba(92, 58, 36, 0.12);
}

.author-work-dropdown-menu a {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	color: #5c371f;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	transition: background 0.18s ease;
}

.author-work-dropdown-menu a:hover,
.author-work-dropdown-menu a:focus-visible {
	background: rgba(217, 119, 6, 0.1);
	outline: none;
}

.share-section {
	margin-top: 0;
}

.share-hint {
	margin: 0 0 12px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #4a3428;
}

.share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.share-copy-btn,
.share-native-btn {
	flex: 1 1 160px;
	padding: 12px 18px;
	border: none;
	border-radius: 999px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.share-copy-btn {
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	box-shadow: 0 8px 20px rgba(180, 83, 9, 0.24);
}

.share-native-btn {
	background: rgba(255, 255, 255, 0.72);
	color: #5c371f;
	border: 1px solid rgba(120, 88, 62, 0.28);
}

.share-copy-btn:hover,
.share-copy-btn:focus-visible,
.share-native-btn:hover,
.share-native-btn:focus-visible {
	transform: translateY(-1px);
	outline: none;
}

.share-copy-btn:hover,
.share-copy-btn:focus-visible {
	box-shadow: 0 12px 24px rgba(180, 83, 9, 0.3);
}

.share-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.share-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(120, 88, 62, 0.22);
	color: #5c371f;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}

.share-social-btn:hover,
.share-social-btn:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
	outline: none;
}

.share-copy-feedback {
	margin: 8px 0 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: #9a3412;
}

.share-copy-feedback.hidden,
.share-native-btn.hidden {
	display: none;
}

.support-cause-dropdown {
	margin-top: 0;
}

.support-cause-toggle {
	display: block;
	position: relative;
	width: 100%;
	padding: 12px 18px;
	padding-right: 40px;
	border: 1px solid rgba(120, 88, 62, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #5c371f;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	text-align: center;
	list-style: none;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.support-cause-toggle::-webkit-details-marker {
	display: none;
}

.support-cause-toggle::after {
	content: '▾';
	position: absolute;
	right: 18px;
	font-size: 0.95rem;
	transition: transform 0.18s ease;
}

.support-cause-dropdown[open] .support-cause-toggle::after {
	transform: rotate(180deg);
}

.support-cause-toggle:hover,
.support-cause-toggle:focus-visible {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 20px rgba(92, 58, 36, 0.12);
	outline: none;
}

.support-cause-panel {
	margin-top: 10px;
	padding: 14px 16px 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(120, 88, 62, 0.14);
}

.support-hint {
	margin: 0 0 12px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #4a3428;
}

.support-org-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.support-org-link {
	display: block;
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(120, 88, 62, 0.2);
	color: #9a3412;
	font-size: 0.94rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.support-org-link:hover,
.support-org-link:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(92, 58, 36, 0.1);
	outline: none;
}

.about-creator-overlay {
	position: fixed;
	inset: 0;
	z-index: 1750;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(15, 23, 42, 0.52);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.about-creator-overlay.hidden {
	display: none;
}

.about-creator-panel {
	position: relative;
	width: min(640px, 94vw);
	max-height: min(86dvh, 760px);
	overflow-y: auto;
	padding: 30px 30px 26px;
	border-radius: 24px;
	background: rgba(255, 250, 242, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
	animation: bubbleEnter 0.35s ease both;
}

.about-creator-panel h2 {
	margin: 0 0 14px;
	font-size: clamp(1.2rem, 2.4vw, 1.45rem);
	color: #5c371f;
}

.about-creator-panel p {
	margin: 0 0 12px;
	font-size: 0.96rem;
	line-height: 1.68;
	color: #4a3428;
}

.about-creator-panel p:last-child {
	margin-bottom: 0;
}

.about-creator-panel a {
	color: #9a3412;
}

.about-creator-return-btn {
	position: sticky;
	top: 0;
	float: right;
	margin: 0 0 8px 12px;
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(180, 83, 9, 0.28);
	z-index: 2;
}

.about-creator-return-btn:hover {
	transform: translateY(-1px);
}

.section-skip-btn {
	position: fixed;
	top: max(10px, env(safe-area-inset-top));
	right: max(10px, env(safe-area-inset-right));
	z-index: 1550;
	padding: 3px 9px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(8, 10, 18, 0.28);
	color: rgba(255, 255, 255, 0.5);
	font: inherit;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.62;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.section-skip-btn:hover,
.section-skip-btn:focus-visible {
	opacity: 0.92;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(8, 10, 18, 0.42);
	outline: none;
}

.section-skip-btn.hidden {
	display: none;
}

.message-end-next-btn {
	position: fixed;
	right: max(24px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 1610;
	padding: 12px 26px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(180, 83, 9, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease;
	animation: bubbleEnter 0.35s ease both;
}

.message-end-next-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(180, 83, 9, 0.34);
}

.message-end-next-btn.hidden {
	display: none;
}

.message-thanks.typing-active::after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 3px;
	background: #3f2d20;
	vertical-align: -0.12em;
	animation: messageThanksCaret 0.85s step-end infinite;
}

@keyframes messageThanksCaret {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

.message-form-wrap.hidden {
	display: none;
}

.message-instructions {
	margin: 0 0 16px;
	font-size: 0.98rem;
	line-height: 1.65;
	color: #5c4638;
}

.visitor-message {
	width: 100%;
	min-height: 148px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid rgba(120, 88, 62, 0.28);
	background: rgba(255, 255, 255, 0.88);
	font: inherit;
	font-size: 1rem;
	line-height: 1.6;
	color: #2f241c;
	resize: vertical;
}

.visitor-message:focus {
	outline: none;
	border-color: rgba(180, 120, 80, 0.55);
	box-shadow: 0 0 0 3px rgba(235, 180, 130, 0.35);
}

.autoimmune-facts {
	margin: 16px 0 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(120, 88, 62, 0.16);
}

.autoimmune-facts-title {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 700;
	color: #5c371f;
	text-align: center;
}

.facts-gallery {
	display: flex;
	align-items: center;
	gap: 10px;
}

.facts-gallery-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(120, 88, 62, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #5c371f;
	font-size: 1.65rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(92, 58, 36, 0.1);
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.facts-gallery-arrow:hover {
	transform: translateY(-1px);
	background: #fff;
	box-shadow: 0 6px 18px rgba(92, 58, 36, 0.16);
}

.facts-gallery-arrow:active {
	transform: translateY(0);
}

.facts-gallery-card-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.facts-gallery-card {
	margin: 0;
	min-height: 4.8em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(120, 88, 62, 0.14);
	color: #4a3428;
	font-size: 0.94rem;
	line-height: 1.6;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.facts-gallery-card.facts-gallery-card-animate {
	animation: factsCardEnter 0.28s ease both;
}

.facts-gallery-indicator {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: #8b6f5c;
	letter-spacing: 0.04em;
}

@keyframes factsCardEnter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.word-count {
	margin: 8px 0 18px;
	font-size: 0.88rem;
	color: #6b5342;
	text-align: right;
}

.word-count.word-count-limit {
	color: #b45309;
	font-weight: 600;
}

.message-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.message-btn {
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.message-btn:hover:not(:disabled) {
	transform: translateY(-2px);
}

.message-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.message-btn-share {
	background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
	color: #fffaf3;
	box-shadow: 0 8px 20px rgba(180, 83, 9, 0.28);
}

.message-btn-private {
	background: rgba(255, 255, 255, 0.9);
	color: #5c4638;
	border-color: rgba(120, 88, 62, 0.28);
}

.message-btn-skip {
	background: transparent;
	color: #6b5342;
	border-color: rgba(120, 88, 62, 0.22);
}

.message-feedback {
	margin: 18px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #3f2d20;
	text-align: center;
	animation: bubbleEnter 0.3s ease both;
}

.message-feedback.hidden {
	display: none;
}

body.scene-bubbles .scene-background {
	background-color: #8faee8;
	background-image:
		radial-gradient(ellipse 75% 55% at 18% 22%, rgba(255, 210, 225, 0.55) 0%, transparent 58%),
		radial-gradient(ellipse 70% 50% at 82% 18%, rgba(255, 236, 190, 0.5) 0%, transparent 55%),
		radial-gradient(ellipse 72% 58% at 74% 80%, rgba(190, 225, 255, 0.48) 0%, transparent 56%),
		radial-gradient(ellipse 60% 48% at 22% 76%, rgba(200, 240, 215, 0.42) 0%, transparent 52%),
		linear-gradient(160deg, #f6d4e8 0%, #f9e8c8 42%, #d9e9ff 100%);
	background-position: center;
	background-size: cover;
}

body.scene-bubbles {
	background: transparent;
}

.bubbles-section {
	position: fixed;
	inset: 0;
	z-index: 1650;
	overflow: hidden;
	pointer-events: none;
}

.bubbles-section.hidden {
	display: none;
}

.bubbles-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	padding-left: max(0px, env(safe-area-inset-left));
	padding-right: max(0px, env(safe-area-inset-right));
}

.bubbles-container::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
	pointer-events: none;
}

.encouragement-bubble {
	position: absolute;
	bottom: -24%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bubble-size, 220px);
	height: var(--bubble-size, 220px);
	padding: 18px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.72);
	color: var(--bubble-text, #2f3b4f);
	font-size: clamp(0.95rem, calc(var(--bubble-size, 220px) * 0.095), 1.28rem);
	line-height: 1.36;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	background:
		radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.82) 0%, transparent 48%),
		var(--bubble-tint, rgba(255, 255, 255, 0.3));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 10px 30px var(--bubble-glow, rgba(148, 163, 184, 0.16));
	transform: translateX(-50%) translateY(0) scale(var(--bubble-scale, 1));
	opacity: 0;
	visibility: hidden;
	animation-name: encouragementBubbleFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-sizing: border-box;
	overflow: hidden;
}

.encouragement-bubble.visitor-bubble {
	border-color: rgba(255, 255, 255, 0.92);
	background:
		radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0%, transparent 45%),
		var(--bubble-tint, rgba(255, 255, 255, 0.42));
	color: var(--bubble-text, #2f3b4f);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 0 1px rgba(255, 255, 255, 0.45),
		0 14px 36px rgba(148, 163, 184, 0.2);
}

@keyframes encouragementBubbleFloat {
	0%,
	2% {
		transform: translateX(-50%) translateY(0) scale(var(--bubble-scale, 1));
		opacity: 0;
		visibility: hidden;
	}
	4% {
		visibility: visible;
		opacity: 0;
	}
	7% {
		opacity: 0.78;
	}
	50% {
		transform: translateX(calc(-50% + var(--bubble-drift, 0px) * 0.5)) translateY(-58vh)
			scale(var(--bubble-scale, 1));
	}
	92% {
		opacity: 0.72;
	}
	100% {
		transform: translateX(calc(-50% + var(--bubble-drift, 0px))) translateY(-118vh)
			scale(calc(var(--bubble-scale, 1) * 0.96));
		opacity: 0;
		visibility: hidden;
	}
}

.bg-evening-layer {
	position: fixed;
	inset: 0;
	background-image: url('Images/evening.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
	opacity: 0;
	transition: opacity 4.5s ease-in-out;
	pointer-events: none;
}

.bg-evening-layer.visible {
	opacity: 1;
}

.evening-clock {
	position: fixed;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	z-index: 65;
	pointer-events: none;
	animation: bubbleEnter 0.4s ease both;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.evening-clock.hidden {
	display: none;
}

.clock-face {
	position: relative;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 55%, #dbe4ef 100%);
	border: 4px solid #334155;
	box-shadow:
		0 10px 28px rgba(15, 23, 42, 0.28),
		inset 0 2px 8px rgba(255, 255, 255, 0.9);
}

.clock-face::before {
	content: '';
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	border: 1px solid rgba(148, 163, 184, 0.45);
}

.clock-hand {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform-origin: 50% 100%;
	border-radius: 999px;
}

.hour-hand {
	width: 5px;
	height: 34px;
	margin-left: -2.5px;
	background: #1e293b;
}

.minute-hand {
	width: 3px;
	height: 44px;
	margin-left: -1.5px;
	background: #334155;
}

.second-hand {
	width: 2px;
	height: 50px;
	margin-left: -1px;
	background: #dc2626;
}

.clock-cap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #dc2626;
	border: 2px solid #fff;
	z-index: 2;
}

.evening-clock.spinning .hour-hand {
	animation: clockHandSpin 2.8s linear infinite;
}

.evening-clock.spinning .minute-hand {
	animation: clockHandSpin 1.1s linear infinite;
}

.evening-clock.spinning .second-hand {
	animation: clockHandSpin 0.42s linear infinite;
}

.evening-clock.stopped .hour-hand {
	animation: none;
	transform: rotate(320deg);
}

.evening-clock.stopped .minute-hand {
	animation: none;
	transform: rotate(240deg);
}

.evening-clock.stopped .second-hand {
	animation: none;
	transform: rotate(0deg);
}

.clock-digital {
	margin-top: 14px;
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #f8fafc;
	text-align: center;
	text-shadow: 0 2px 12px rgba(15, 23, 42, 0.55);
	animation: bubbleEnter 0.35s ease both;
}

.clock-digital.hidden {
	display: none;
}

.evening-clock.fading {
	opacity: 0;
	transition: opacity 0.65s ease;
}

.sleep-effects {
	position: fixed;
	inset: 0;
	z-index: 55;
	pointer-events: none;
	overflow: hidden;
}

.sleep-effects.hidden {
	display: none;
}

.sleep-effect {
	position: absolute;
	inset: 0;
}

.sleep-effect.hidden {
	display: none;
}

.book-effect {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 40px 24px;
}

.book-icon {
	width: 72px;
	height: 72px;
	color: rgba(248, 250, 252, 0.92);
	filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.35));
	animation: bookIconPulse 2.4s ease-in-out infinite;
}

.book-icon svg {
	width: 100%;
	height: 100%;
}

.book-text-flow {
	width: min(520px, 72vw);
	height: 120px;
	overflow: hidden;
	mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.book-flow-track {
	animation: bookTextFlow 18s linear infinite;
}

.book-flow-line {
	margin: 0 0 18px;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.7;
	color: rgba(248, 250, 252, 0.88);
	text-align: center;
	text-shadow: 0 2px 10px rgba(15, 23, 42, 0.45);
}

.rain-effect {
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 58, 95, 0.18) 100%);
}

.rain-drop {
	position: absolute;
	top: -80px;
	width: 1px;
	height: 70px;
	background: linear-gradient(180deg, transparent, rgba(191, 219, 254, 0.15), rgba(148, 163, 184, 0.55));
	animation-name: rainFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.lullaby-effect {
	overflow: hidden;
}

.lullaby-note {
	position: absolute;
	bottom: -10%;
	color: rgba(250, 204, 21, 0.82);
	text-shadow: 0 0 16px rgba(250, 204, 21, 0.55);
	animation: lullabyFloat 5.5s ease-in-out infinite;
}

@keyframes bookIconPulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.88;
	}
	50% {
		transform: scale(1.05);
		opacity: 1;
	}
}

@keyframes bookTextFlow {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-50%);
	}
}

@keyframes rainFall {
	from {
		transform: translateY(-20px);
	}
	to {
		transform: translateY(110vh);
	}
}

@keyframes lullabyFloat {
	0% {
		transform: translateY(0) scale(0.85);
		opacity: 0;
	}
	15% {
		opacity: 0.9;
	}
	50% {
		transform: translateY(-42vh) scale(1.08);
		opacity: 1;
	}
	100% {
		transform: translateY(-88vh) scale(0.95);
		opacity: 0;
	}
}

@keyframes clockHandSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.opening-screen.scene-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.scene-fade {
	position: fixed;
	inset: 0;
	background: #0f172a;
	opacity: 0;
	pointer-events: none;
	z-index: 1500;
	transition: opacity 0.45s ease;
}

.scene-fade.active {
	opacity: 1;
	pointer-events: auto;
}

.scene-fade.ending {
	background: #000;
	transition: opacity 2.8s ease-in-out;
}

.desk-scene {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s ease 0.15s;
}

.desk-scene.visible {
	display: block;
	opacity: 1;
	pointer-events: none;
}

.desk-scene.visible .medicine-on-desk,
.desk-scene.visible .bottle-hint,
.desk-scene.visible .bottle-progress {
	pointer-events: auto;
}

.bottle-hint {
	position: fixed;
	bottom: 68px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	color: #0f172a;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
	z-index: 60;
	animation: hintPulse 2.2s ease-in-out infinite;
}

.bottle-progress {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: min(440px, 72vw);
	height: 14px;
	background: rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.16);
	z-index: 60;
}

.bottle-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #34d399 0%, #60a5fa 100%);
	border-radius: 999px;
	transition: width 0.28s ease;
}

.bottle-ui-vanish {
	opacity: 0 !important;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.medicine-on-desk {
	position: absolute;
	left: 50%;
	top: 61%;
	transform: translate(-50%, -50%);
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	z-index: 55;
}

.medicine-on-desk::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 2%;
	transform: translateX(-50%);
	width: 58%;
	height: 14px;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42) 0%, transparent 72%);
	filter: blur(1px);
	pointer-events: none;
}

.medicine-on-desk.bottle-shake .medicine-bottle.settled {
	animation: bottleShake 0.38s ease;
}

.medicine-on-desk.bottle-opened {
	cursor: default;
	pointer-events: none;
}

.medicine-bottle {
	display: block;
	height: min(39vh, 330px);
	width: auto;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
	mix-blend-mode: lighten;
	animation: bottleSettle 0.8s ease 0.35s forwards;
}

.medicine-bottle.settled,
.medicine-bottle.is-open {
	animation: none;
	opacity: 1;
	transform: none;
}

@keyframes bottleShake {
	0%,
	100% {
		transform: translateX(0) rotate(0);
	}
	15% {
		transform: translateX(-5px) rotate(-4deg);
	}
	30% {
		transform: translateX(5px) rotate(4deg);
	}
	45% {
		transform: translateX(-4px) rotate(-3deg);
	}
	60% {
		transform: translateX(4px) rotate(3deg);
	}
	75% {
		transform: translateX(-2px) rotate(-1.5deg);
	}
}

@keyframes bottleSettle {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hospital-departments {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	z-index: 280;
	pointer-events: auto;
	max-width: min(900px, 96vw);
}

.hospital-departments.hidden {
	display: none;
}

.department-option-card {
	border: none;
	padding: 36px 44px;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.94);
	cursor: pointer;
	min-width: 300px;
	min-height: 140px;
	text-align: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 18px 50px rgba(15, 23, 42, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: bubbleEnter 0.28s ease both;
}

.department-option-card:hover:not(:disabled) {
	transform: translateY(-4px) scale(1.02);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 24px 60px rgba(15, 23, 42, 0.26);
}

.department-option-card:disabled {
	opacity: 0.55;
	cursor: wait;
}

.department-option-card .dept-card-title {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 10px;
}

.department-option-card .dept-card-subtitle {
	display: block;
	font-size: 1.08rem;
	color: #475569;
}

.department-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.58);
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.department-overlay.hidden {
	display: none;
}

.department-card {
	position: relative;
	width: min(760px, 94vw);
	max-height: 86vh;
	overflow: hidden;
	padding: 0;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.98);
	cursor: default;
	pointer-events: auto;
	box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
	animation: bubbleEnter 0.32s ease both;
	display: flex;
	flex-direction: column;
}

.department-return-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 12;
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: #1e40af;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.department-return-btn:hover {
	transform: translateY(-1px);
	background: #ffffff;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
}

.department-return-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.department-return-btn.hidden {
	display: none;
}

.department-card.has-visit-bg {
	background: #f8fafc;
}

.department-card-photo {
	width: 100%;
	height: min(300px, 40vh);
	object-fit: cover;
	object-position: center;
	display: block;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	filter: contrast(1.2) saturate(1.15);
}

.department-card-photo.hidden {
	display: none;
}

.department-card-inner {
	max-height: 86vh;
	overflow-y: auto;
	padding: 40px 44px;
	border-radius: 0 0 24px 24px;
	flex: 1;
}

.department-card.has-visit-bg .department-card-inner {
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	min-height: 0;
}

.dept-line {
	margin: 0 0 20px;
	font-size: 1.08rem;
	line-height: 1.75;
	color: #1e293b;
}

.dept-line:last-of-type {
	margin-bottom: 0;
}

.dept-line.dept-doctor {
	color: #1e40af;
	font-weight: 600;
}

.dept-line.dept-doctor .dept-speaker {
	font-weight: 700;
	color: #1d4ed8;
}

.rheumatology-overlay {
	position: fixed;
	inset: 0;
	z-index: 320;
	background-image: url('Images/rheumotology.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 36px 24px 48px;
}

.rheumatology-overlay.hidden {
	display: none;
}

.rheumatology-overlay .department-return-btn {
	top: 18px;
	right: 18px;
	position: fixed;
	display: block;
}

.rheumatology-content {
	width: min(780px, 96vw);
	max-height: 58vh;
	overflow-y: auto;
	padding: 34px 38px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
	animation: bubbleEnter 0.32s ease both;
}

.rheum-line {
	margin: 0 0 22px;
	font-size: 1.06rem;
	line-height: 1.75;
	color: #1e293b;
}

.rheum-line:last-child {
	margin-bottom: 0;
}

.rheum-marker {
	color: #64748b;
	font-weight: 700;
}

.rheum-speaker {
	font-weight: 700;
	color: #1e40af;
}

.rheumatology-card {
	min-width: 320px;
	min-height: 160px;
}

.afternoon-scene {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
}

.afternoon-scene.hidden {
	display: none;
}

.phone-container {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	width: min(28vw, 240px);
}

.phone-screen {
	position: absolute;
	top: 18%;
	left: 9%;
	right: 9%;
	bottom: 20%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.phone-screen.hidden {
	display: none;
}

.phone-thread {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px;
	scrollbar-width: none;
}

.phone-thread::-webkit-scrollbar {
	display: none;
}

.phone-thread-msg {
	max-width: 92%;
	padding: 6px 8px;
	border-radius: 12px;
	animation: bubbleEnter 0.25s ease both;
}

.phone-thread-msg.hollis {
	align-self: flex-start;
	background: #e9e9eb;
	color: #111827;
}

.phone-thread-msg.sent {
	align-self: flex-end;
	background: #007aff;
	color: #fff;
}

.phone-thread-label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	color: #6b7280;
	margin-bottom: 2px;
}

.phone-thread-text {
	margin: 0;
	font-size: clamp(0.55rem, 1vw, 0.72rem);
	line-height: 1.35;
}

.phone-container.phone-shake {
	animation: phoneShake 0.5s ease both;
}

.phone-image {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.28));
}

@keyframes phoneShake {
	0%,
	100% {
		transform: translate(-50%, -50%) rotate(0);
	}
	20% {
		transform: translate(calc(-50% - 4px), -50%) rotate(-2deg);
	}
	40% {
		transform: translate(calc(-50% + 4px), -50%) rotate(2deg);
	}
	60% {
		transform: translate(calc(-50% - 3px), -50%) rotate(-1.5deg);
	}
	80% {
		transform: translate(calc(-50% + 3px), -50%) rotate(1.5deg);
	}
}

.dinner-scene {
	position: fixed;
	inset: 0;
	z-index: 290;
	pointer-events: none;
}

.dinner-scene.hidden {
	display: none;
}

.dinner-options {
	position: absolute;
	left: 30%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 28px;
	align-items: stretch;
	justify-content: center;
	max-width: min(980px, 58vw);
	pointer-events: auto;
}

.dinner-options.hidden {
	display: none;
}

.dinner-option-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	border: none;
	padding: 18px 16px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.94);
	cursor: pointer;
	flex: 1;
	min-width: 210px;
	max-width: 320px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 18px 50px rgba(15, 23, 42, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: bubbleEnter 0.28s ease both;
}

.dinner-option-card:hover:not(:disabled) {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 24px 60px rgba(15, 23, 42, 0.26);
}

.dinner-option-card:disabled {
	opacity: 0.55;
	cursor: wait;
}

.dinner-option-image {
	width: 100%;
	height: 210px;
	object-fit: contain;
	border-radius: 14px;
	background: #f8fafc;
}

.dinner-option-label {
	font-size: clamp(0.82rem, 1.4vw, 0.98rem);
	font-weight: 600;
	line-height: 1.35;
	color: #0f172a;
	text-align: center;
}

.delivery-message {
	position: absolute;
	left: 30%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 22px 36px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.96);
	color: #0f172a;
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	font-weight: 700;
	text-align: center;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
	animation: bubbleEnter 0.3s ease both;
	pointer-events: none;
	max-width: min(480px, 52vw);
}

.delivery-message.hidden {
	display: none;
}

.dinner-reveal {
	position: absolute;
	left: 30%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
}

.dinner-reveal.hidden {
	display: none;
}

.dinner-reveal-img {
	width: min(42vw, 380px);
	height: auto;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.dinner-reveal-img.dinner-reveal-spin {
	animation: dinnerRevealSpin 2.1s ease-in-out both;
}

.dinner-reveal-img.dinner-reveal-settled {
	transform: scale(1.35);
}

.dinner-reveal-label {
	margin: 0;
	max-width: min(42vw, 380px);
	font-size: clamp(0.95rem, 1.8vw, 1.15rem);
	font-weight: 600;
	color: #0f172a;
	text-align: center;
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85);
}

@keyframes dinnerRevealSpin {
	0% {
		transform: scale(0.55) rotate(0deg);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	100% {
		transform: scale(1.35) rotate(1080deg);
		opacity: 1;
	}
}

.name-prompt {
	margin-top: 6px;
	width: 100%;
}

.name-prompt label {
	display: block;
	font-size: 0.92rem;
	color: #334155;
	margin-bottom: 8px;
}

.name-prompt-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.name-prompt input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.85);
	color: #111827;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow:
		inset 0 1px 2px rgba(15, 23, 42, 0.06),
		0 2px 4px rgba(15, 23, 42, 0.04);
}

.name-prompt input:focus {
	border-color: rgba(59, 130, 246, 0.5);
	box-shadow:
		inset 0 1px 2px rgba(15, 23, 42, 0.06),
		0 0 0 3px rgba(59, 130, 246, 0.15);
}

.name-prompt input::placeholder {
	color: #94a3b8;
}

.name-send-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	background: linear-gradient(145deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
	color: white;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 4px rgba(15, 23, 42, 0.15),
		0 4px 10px rgba(37, 99, 235, 0.35),
		0 8px 20px rgba(37, 99, 235, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.name-send-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 4px rgba(15, 23, 42, 0.15),
		0 6px 14px rgba(37, 99, 235, 0.4),
		0 12px 28px rgba(37, 99, 235, 0.25);
}

.name-send-btn:active:not(:disabled) {
	transform: translateY(0);
}

.name-send-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.name-send-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

#happiness-scale.scale-pulse {
	animation: scalePulseGain 1.1s ease;
}

#happiness-scale.scale-pulse-drop {
	animation: scalePulseDrop 1.1s ease;
}

@keyframes scalePulseGain {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
	}
	25% {
		transform: scale(1.06);
		box-shadow:
			0 0 0 10px rgba(96, 165, 250, 0.45),
			0 0 36px rgba(52, 211, 153, 0.55);
	}
	55% {
		transform: scale(1.03);
		box-shadow:
			0 0 0 6px rgba(96, 165, 250, 0.25),
			0 0 28px rgba(52, 211, 153, 0.35);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
	}
}

@keyframes scalePulseDrop {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
	}
	20% {
		transform: scale(0.96) translateX(-2px);
		box-shadow:
			0 0 0 10px rgba(248, 113, 113, 0.4),
			0 0 32px rgba(239, 68, 68, 0.45);
	}
	40% {
		transform: scale(1.02) translateX(3px);
	}
	60% {
		transform: scale(0.98) translateX(-2px);
		box-shadow:
			0 0 0 6px rgba(248, 113, 113, 0.25),
			0 0 24px rgba(239, 68, 68, 0.3);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
	}
}

.input-group {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.input-group input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
}

.input-group button {
	padding: 12px 18px;
	background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
	color: white;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 16px 40px rgba(14, 165, 233, 0.2);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.meet-kid-btn {
	padding: 12px 18px;
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	color: white;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 16px 40px rgba(59, 130, 246, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#meet-kid-btn {
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
	color: white !important;
	filter: none !important;
}

#meet-kid-btn:hover,
.meet-kid-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 48px rgba(59, 130, 246, 0.28);
}

/* Happiness scale (top-left) */
#happiness-scale {
	position: fixed;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 11px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.18);
	z-index: 1100;
	backdrop-filter: blur(6px);
}

#happiness-scale .label {
	font-size: 0.93rem;
	color: #ffffff;
	margin-right: 8px;
	opacity: 0.98;
	font-weight: 600;
}

.h-shape {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition: background 0.35s ease, transform 0.18s ease, box-shadow 0.25s ease;
}

.h-shape.filled {
	background: linear-gradient(135deg, #34d399 0%, #60a5fa 100%);
	transform: scale(1.08);
	box-shadow: 0 12px 30px rgba(96, 165, 250, 0.18);
}

@keyframes h-pop {
	0% {
		transform: scale(0.6);
		filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
		opacity: 0.5;
	}
	35% {
		transform: scale(1.45);
		filter: drop-shadow(0 0 18px rgba(52, 211, 153, 0.9));
		opacity: 1;
	}
	65% {
		transform: scale(1.12);
		filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.7));
	}
	100% {
		transform: scale(1.08);
		filter: drop-shadow(0 10px 28px rgba(96, 165, 250, 0.16));
	}
}

.h-shape.pop {
	animation: h-pop 720ms cubic-bezier(.2, .9, .3, 1);
}

.h-shape.gain {
	animation: h-gain-flash 720ms ease;
}

@keyframes h-gain-flash {
	0%,
	100% {
		outline: 0 solid transparent;
	}
	40% {
		outline: 3px solid rgba(255, 255, 255, 0.95);
		outline-offset: 2px;
	}
}

.h-shape.drop {
	animation: h-drop 820ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes h-drop {
	0% {
		transform: scale(1.08);
		opacity: 1;
	}
	25% {
		transform: scale(1.25) rotate(-8deg);
		filter: brightness(1.3);
	}
	50% {
		transform: scale(0.55) rotate(6deg);
		opacity: 0.35;
		filter: brightness(0.7);
	}
	75% {
		transform: scale(0.85) rotate(-3deg);
		opacity: 0.7;
	}
	100% {
		transform: scale(1);
		opacity: 1;
		filter: none;
	}
}

.h-shape.emptying {
	background: linear-gradient(135deg, rgba(248, 113, 113, 0.55) 0%, rgba(239, 68, 68, 0.35) 100%) !important;
	box-shadow: 0 0 16px rgba(239, 68, 68, 0.35) !important;
}

.author-info-btn {
	position: fixed;
	top: 16px;
	right: 16px;
	padding: 8px 12px;
	border-radius: 20px;
	background: #374151;
	color: white;
	border: none;
}

.visitor-stats-panel {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(6px);
}

.visitor-stats-panel.hidden {
	display: none;
}

.visitor-stats-card {
	position: relative;
	width: min(520px, 94vw);
	max-height: min(80vh, 720px);
	overflow-y: auto;
	padding: 28px 28px 24px;
	border-radius: 20px;
	background: rgba(255, 250, 242, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.visitor-stats-card h2 {
	margin: 0 0 8px;
	color: #1e293b;
}

.visitor-stats-note,
.visitor-stats-status {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #64748b;
}

.visitor-stats-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(96, 165, 250, 0.12);
	border: 1px solid rgba(96, 165, 250, 0.2);
}

.visitor-stats-label {
	font-size: 0.95rem;
	color: #475569;
}

.visitor-stats-value {
	font-size: 2rem;
	color: #1d4ed8;
}

.visitor-stats-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(148, 163, 184, 0.18);
	color: #475569;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

/* apply grayscale to the hospital screen only, leaving the intro button in blue */
#hospital-screen {
	filter: grayscale(1);
	transition: filter 0.75s ease;
}

#hospital-screen.color-level-1 {
	filter: grayscale(0.72);
}

#hospital-screen.color-level-2 {
	filter: grayscale(0.4);
}

#hospital-screen.color-level-3 {
	filter: grayscale(0.08);
}

.hospital-room {
	padding: 20px;
	text-align: center;
}

.task1-card {
	margin-top: 24px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	backdrop-filter: none;
	box-shadow: none;
	min-height: auto;
}

#hospital-screen.screen {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 auto !important;
}

#hospital-screen {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hospital-room {
	padding: 0;
	text-align: left;
	background: transparent;
	box-shadow: none;
}

.chat-panel {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.nova-avatar {
	display: none;
}

.chat-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: 520px;
	overflow-y: auto;
	padding: 14px 18px 8px 64px;
	width: min(720px, 100%);
	margin: -50px auto 0;
}

.chat-bubble {
	max-width: 85%;
	padding: 28px 34px;
	border-radius: 32px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
	font-size: 1.18rem;
	line-height: 1.8;
	border: 1px solid rgba(255, 255, 255, 0.4);
	animation: bubbleEnter 0.28s ease both;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(18px);
	color: #111827;
}

.chat-bubble.nova {
	align-self: flex-start;
	background: rgba(100, 150, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #f8fafc;
	border-bottom-left-radius: 18px;
}

.chat-bubble.user {
	align-self: flex-end;
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #111827;
	border-bottom-right-radius: 18px;
}

@keyframes bubbleEnter {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.chat-input {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.chat-input input {
	flex: 1;
	padding: 18px 22px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.98);
	color: #111827;
	font-size: 1em;
	outline: none;
}

.chat-input input:focus {
	border-color: rgba(59, 130, 246, 0.35);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.chat-input button {
	padding: 16px 26px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #2563eb, #3b82f6);
	color: white;
	cursor: pointer;
	font-weight: 700;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chat-input button:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28);
}

.chat-input button:focus {
	outline: none;
}

.chat-choice-button {
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.95);
	color: #111827;
	cursor: pointer;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chat-choice-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
}

.chat-choice-button:focus {
	outline: none;
}

/* Modal and utility classes extracted from inline styles */
.modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal.hidden {
	display: none;
}

.author-modal-content {
	background: white;
	padding: 24px 26px;
	border-radius: 12px;
	max-width: min(520px, 92vw);
	max-height: min(82vh, 720px);
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.author-modal-content h2 {
	margin-bottom: 14px;
}

.author-modal-content p {
	margin: 0 0 14px;
	line-height: 1.65;
	color: #334155;
}

.author-modal-content p:last-child {
	margin-bottom: 0;
}

.close-btn {
	float: right;
	background: none;
	border: none;
	font-size: 18px;
}

/* Extracted styles from index.html */
/* Minimal inline styles to keep intro focused */
html, body { min-height:100%; margin:0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position:relative; overflow:hidden; }
body:before { content: ""; position:fixed; inset:0; background: transparent; pointer-events:none; z-index:-1; }
.screen { position:relative; z-index:1; max-width:700px; margin:40px auto; background:white; border-radius:12px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,0.08);} 
.opening-screen {
	background: transparent !important;
	border: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: fixed;
	inset: 0;
}
.opening-text { position: fixed; top: 56px; right: 28px; left: auto; width: min(460px, calc(100vw - 56px)); max-width: 460px; text-align: left; padding: 0; z-index: 100; }
.opening-text h1 { color:#0f172a; }
.intro-bubble { position:relative; background:linear-gradient(155deg,rgba(255,255,255,0.52) 0%,rgba(255,255,255,0.32) 45%,rgba(210,225,245,0.38) 100%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:20px; padding:22px 26px; border:1px solid rgba(255,255,255,0.62); border-bottom:2px solid rgba(160,180,210,0.45); box-shadow:inset 0 2px 4px rgba(255,255,255,0.75),inset 0 -3px 8px rgba(15,23,42,0.06),0 2px 0 rgba(255,255,255,0.35),0 8px 16px rgba(15,23,42,0.1),0 20px 44px rgba(15,23,42,0.16),0 32px 64px rgba(15,23,42,0.08); max-height:calc(100vh - 90px); overflow-y:auto; transform:translateZ(0); }
.intro-bubble::before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.08) 28%,transparent 55%); pointer-events:none; }
.intro-bubble::after { content:''; position:absolute; left:10px; right:10px; bottom:-6px; height:10px; border-radius:0 0 18px 18px; background:rgba(15,23,42,0.12); filter:blur(6px); z-index:-1; }
#intro-typing { display:flex; flex-direction:column; gap:14px; align-items:stretch; width:100%; }
#intro-typing .script-line { margin:0; color:#1e293b; font-size:1.02rem; line-height:1.65; align-self:flex-start; max-width:92%; }
#intro-typing .script-line.typing-active { min-height:1.65em; }
.intro-msg { max-width:88%; padding:14px 18px; border-radius:18px; font-size:1.02rem; line-height:1.65; animation:bubbleEnter 0.28s ease both; }
.intro-msg.patient { align-self:flex-start; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.65); color:#1e293b; border-bottom-left-radius:6px; }
.intro-msg.angel { align-self:flex-end; background:linear-gradient(145deg,rgba(59,130,246,0.82) 0%,rgba(37,99,235,0.9) 100%); border:1px solid rgba(255,255,255,0.35); color:#f8fafc; border-bottom-right-radius:6px; }
.choice-prompt-group { align-self:flex-end; display:flex; flex-direction:column; align-items:flex-end; gap:10px; max-width:88%; width:100%; }
.choice-prompt-group .choice-prompt { align-self:flex-end; max-width:100%; width:100%; }
.choice-hint { margin:0; font-size:0.9rem; color:#0f172a; font-weight:600; font-style:italic; text-align:right; text-shadow:0 1px 3px rgba(255,255,255,0.65); animation:hintPulse 2.2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
.choice-prompt { align-self:flex-end; max-width:88%; padding:14px 20px; border:1px solid rgba(255,255,255,0.55); border-radius:18px; border-bottom-right-radius:6px; background:rgba(255,255,255,0.72); color:#1e40af; font-size:1rem; line-height:1.55; cursor:pointer; animation:bubbleEnter 0.28s ease both; }
.choice-prompt:hover { transform:translateY(-2px); background:rgba(255,255,255,0.88); }
.name-prompt { margin-top:6px; width:100%; }
.name-prompt label { display:block; font-size:0.92rem; color:#334155; margin-bottom:8px; }
.name-prompt-row { display:flex; gap:10px; align-items:stretch; }
.name-prompt input { flex:1; min-width:0; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.7); background:rgba(255,255,255,0.85); color:#111827; font-size:1rem; outline:none; box-shadow:inset 0 1px 2px rgba(15,23,42,0.06),0 2px 4px rgba(15,23,42,0.04); }
.name-prompt input:focus { border-color:rgba(59,130,246,0.5); box-shadow:inset 0 1px 2px rgba(15,23,42,0.06),0 0 0 3px rgba(59,130,246,0.15); }
.name-send-btn { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border:none; border-radius:12px; cursor:pointer; background:linear-gradient(145deg,#3b82f6 0%,#2563eb 55%,#1d4ed8 100%); color:white; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -2px 4px rgba(15,23,42,0.15),0 4px 10px rgba(37,99,235,0.35),0 8px 20px rgba(37,99,235,0.2); transition:transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease; }
.name-send-btn:hover:not(:disabled) { transform:translateY(-2px); }
.name-send-btn:disabled { opacity:0.55; cursor:not-allowed; }
.name-send-btn svg { width:20px; height:20px; display:block; }


.input-group { display:flex; gap:10px; margin-top:20px }
.input-group input { flex:1; padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px }
.input-group button { padding:12px 18px; background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%); color:white; border:none; border-radius:12px; cursor:pointer; box-shadow: 0 16px 40px rgba(14,165,233,0.2); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.meet-kid-btn { padding:12px 18px; background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); color:white; border:none; border-radius:12px; cursor:pointer; box-shadow: 0 16px 40px rgba(59,130,246,0.18); transition: transform 0.25s ease, box-shadow 0.25s ease; }
#meet-kid-btn { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important; color: white !important; filter: none !important; }
#meet-kid-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(59,130,246,0.28) !important; }
.meet-kid-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(59,130,246,0.28); }

.h-shape { width:24px; height:24px; border-radius:6px; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); transition: background 0.35s ease, transform 0.18s ease, box-shadow 0.25s ease; }
.h-shape.filled { background: linear-gradient(135deg,#34d399 0%, #60a5fa 100%); transform: scale(1.08); box-shadow: 0 12px 30px rgba(96,165,250,0.18); }
@keyframes h-pop { 0% { transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); opacity: 0.5; } 35% { transform: scale(1.45); filter: drop-shadow(0 0 18px rgba(52,211,153,0.9)); opacity: 1; } 65% { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(96,165,250,0.7)); } 100% { transform: scale(1.08); filter: drop-shadow(0 10px 28px rgba(96,165,250,0.16)); } }
.h-shape.pop { animation: h-pop 720ms cubic-bezier(.2,.9,.3,1); }
.h-shape.gain { animation: h-gain-flash 720ms ease; }
@keyframes h-gain-flash { 0%,100% { outline: 0 solid transparent; } 40% { outline: 3px solid rgba(255,255,255,0.95); outline-offset: 2px; } }
.h-shape.drop { animation: h-drop 820ms cubic-bezier(.4,0,.2,1); }
@keyframes h-drop { 0% { transform: scale(1.08); opacity: 1; } 25% { transform: scale(1.25) rotate(-8deg); filter: brightness(1.3); } 50% { transform: scale(0.55) rotate(6deg); opacity: 0.35; filter: brightness(0.7); } 75% { transform: scale(0.85) rotate(-3deg); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; filter: none; } }
.h-shape.emptying { background: linear-gradient(135deg, rgba(248,113,113,0.55) 0%, rgba(239,68,68,0.35) 100%) !important; box-shadow: 0 0 16px rgba(239,68,68,0.35) !important; }
#happiness-scale.scale-pulse { animation: scalePulseGain 1.1s ease; }
#happiness-scale.scale-pulse-drop { animation: scalePulseDrop 1.1s ease; }
@keyframes scalePulseGain { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(96,165,250,0); } 25% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(96,165,250,0.45), 0 0 36px rgba(52,211,153,0.55); } 55% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(96,165,250,0.25), 0 0 28px rgba(52,211,153,0.35); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
@keyframes scalePulseDrop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,113,113,0); } 20% { transform: scale(0.96) translateX(-2px); box-shadow: 0 0 0 10px rgba(248,113,113,0.4), 0 0 32px rgba(239,68,68,0.45); } 40% { transform: scale(1.02) translateX(3px); } 60% { transform: scale(0.98) translateX(-2px); box-shadow: 0 0 0 6px rgba(248,113,113,0.25), 0 0 24px rgba(239,68,68,0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,113,113,0); } }
.input-group button:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(14,165,233,0.28); }
.author-info-btn{ position:fixed; top:16px; right:16px; padding:8px 12px; border-radius:20px; background:#374151;color:white;border:none}
/* apply grayscale to the hospital screen only, leaving the intro button in blue */
#hospital-screen { filter: grayscale(1); transition: filter 0.75s ease; }
#hospital-screen.color-level-1 { filter: grayscale(0.72); }
#hospital-screen.color-level-2 { filter: grayscale(0.4); }
#hospital-screen.color-level-3 { filter: grayscale(0.08); }
.hospital-room { padding:20px; text-align:center }
.task1-card { margin-top:24px; background: transparent; border: none; border-radius:0; padding:0; backdrop-filter: none; box-shadow: none; min-height: auto; }
#hospital-screen.screen { background: transparent !important; box-shadow: none !important; border:none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; margin: 0 auto !important; }
#hospital-screen { background: transparent !important; box-shadow: none !important; border:none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
.hospital-room { padding: 0; text-align:left; background: transparent; box-shadow: none; }
.chat-panel { display:flex; gap:16px; align-items:flex-start; }
.nova-avatar { display:none; }
.chat-messages { flex:1; display:flex; flex-direction:column; gap:24px; max-height:520px; overflow-y:auto; padding:14px 18px 8px 64px; width: min(720px, 100%); margin: -50px auto 0; }
.chat-bubble { max-width: 85%; padding:28px 34px; border-radius:32px; box-shadow: 0 24px 80px rgba(0,0,0,0.18); font-size:1.18rem; line-height:1.8; border: 1px solid rgba(255,255,255,0.4); animation: bubbleEnter 0.28s ease both; background: rgba(255,255,255,0.3); backdrop-filter: blur(18px); color: #111827; }
.chat-bubble.nova { align-self:flex-start; background: rgba(100,150,255,0.25); border: 1px solid rgba(255,255,255,0.5); color:#f8fafc; border-bottom-left-radius: 18px; }
.chat-bubble.user { align-self:flex-end; background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.6); color:#111827; border-bottom-right-radius: 18px; }
@keyframes bubbleEnter { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-input { display:flex; gap:10px; margin-top:22px; }
.chat-input input { flex:1; padding:18px 22px; border-radius:999px; border:1px solid rgba(255,255,255,0.75); background: rgba(255,255,255,0.98); color:#111827; font-size:1em; outline: none; }
.chat-input input:focus { border-color: rgba(59,130,246,0.35); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.chat-input button { padding:16px 26px; border:none; border-radius:999px; background: linear-gradient(135deg, #2563eb, #3b82f6); color:white; cursor:pointer; font-weight:700; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.chat-input button:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(37,99,235,0.28); }
.chat-input button:focus { outline:none; }
.chat-choice-button { border:none; border-radius:999px; padding:12px 18px; background: rgba(255,255,255,0.95); color:#111827; cursor:pointer; box-shadow: 0 12px 24px rgba(15,23,42,0.12); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.chat-choice-button:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(15,23,42,0.18); }
.chat-choice-button:focus { outline:none; }

/* Modal and utility classes extracted from inline styles */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.author-modal-content { background:white; padding:20px; border-radius:8px; max-width:360px; box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.close-btn { float:right; background:none; border:none; font-size:18px; }

/* Responsive layout: laptop + tablet + mobile */
@media (max-width: 1024px) {
	.opening-text {
		width: min(420px, calc(100vw - 40px));
		right: 20px;
		top: 48px;
	}

	.journey-intro-panel {
		padding: 28px 28px 24px;
	}

	.dinner-options {
		left: 50%;
		max-width: min(920px, 88vw);
	}

	.delivery-message,
	.dinner-reveal {
		left: 50%;
	}
}

@media (max-width: 768px) {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	.journey-intro {
		padding: 20px 14px 32px;
		padding-bottom: max(32px, env(safe-area-inset-bottom));
	}

	.journey-intro-panel {
		padding: 24px 20px 22px;
		border-radius: 22px;
	}

	.journey-lead,
	.journey-lead-list {
		margin-bottom: 16px;
	}

	.journey-purpose {
		padding: 14px 16px;
		margin-bottom: 18px;
	}

	.opening-text {
		top: max(52px, calc(env(safe-area-inset-top) + 46px));
		bottom: auto;
		right: 10px;
		left: 10px;
		width: auto;
		max-width: none;
	}

	.intro-bubble {
		padding: 12px 14px;
		border-radius: 16px;
		max-height: min(24dvh, 168px);
	}

	#intro-typing {
		gap: 10px;
	}

	#intro-typing .script-line,
	.intro-msg,
	.choice-prompt,
	.action-choice {
		font-size: 0.88rem;
		line-height: 1.5;
	}

	.intro-msg,
	.choice-prompt {
		padding: 10px 12px;
	}

	body.hospital-choices-active .intro-bubble {
		max-height: min(22dvh, 150px);
	}

	#happiness-scale {
		top: max(8px, env(safe-area-inset-top));
		left: max(8px, env(safe-area-inset-left));
		gap: 7px;
		padding: 8px 9px;
	}

	#happiness-scale .label {
		font-size: 0.78rem;
		margin-right: 4px;
	}

	.h-shape {
		width: 18px;
		height: 18px;
		border-radius: 5px;
	}

	.medicine-bottle {
		height: min(34vh, 240px);
	}

	.medicine-on-desk {
		top: 58%;
	}

	.bottle-hint {
		bottom: max(62px, calc(52px + env(safe-area-inset-bottom)));
		font-size: 0.88rem;
		padding: 10px 14px;
		max-width: calc(100vw - 32px);
	}

	.bottle-progress {
		bottom: max(18px, env(safe-area-inset-bottom));
		width: min(440px, calc(100vw - 32px));
	}

	.hospital-departments {
		top: 52%;
		gap: 14px;
		padding: 0 12px;
		z-index: 280;
	}

	body.hospital-choices-active .opening-text {
		top: max(54px, calc(env(safe-area-inset-top) + 48px));
		bottom: auto;
		left: 12px;
		right: 12px;
	}

	body.hospital-choices-active .hospital-departments {
		top: auto;
		bottom: max(16px, env(safe-area-inset-bottom));
		left: 50%;
		transform: translateX(-50%);
		max-height: min(46dvh, 420px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.department-option-card,
	.rheumatology-card {
		min-width: 0;
		width: min(100%, 280px);
		padding: 18px 16px;
		min-height: 0;
	}

	.department-option-card .dept-card-title {
		font-size: 1.15rem;
	}

	.department-overlay {
		padding: 16px;
		align-items: flex-end;
	}

	.department-card {
		width: 100%;
		max-height: 88dvh;
		border-radius: 20px 20px 0 0;
	}

	.department-return-btn,
	.rheumatology-return-btn {
		min-height: 44px;
	}

	.rheumatology-overlay {
		padding: 20px 14px max(28px, env(safe-area-inset-bottom));
		align-items: flex-end;
	}

	.rheumatology-content {
		width: 100%;
		max-height: 62dvh;
		padding: 22px 18px;
		border-radius: 18px 18px 0 0;
	}

	.rheum-line {
		font-size: 0.98rem;
		margin-bottom: 16px;
	}

	.phone-container {
		width: min(38vw, 156px);
		top: 56%;
	}

	body.phone-active .phone-container {
		top: 54%;
		width: min(36vw, 148px);
	}

	.phone-thread-text {
		font-size: 0.54rem;
	}

	.phone-thread-msg {
		padding: 4px 6px;
	}

	.dinner-scene {
		z-index: 290;
	}

	.dinner-options {
		left: 50%;
		top: 56%;
		flex-direction: column;
		gap: 8px;
		max-width: min(240px, 72vw);
		max-height: 52dvh;
		overflow-y: auto;
		padding: 2px 0;
		-webkit-overflow-scrolling: touch;
	}

	.dinner-option-card {
		min-width: 0;
		max-width: none;
		width: 100%;
		padding: 10px 10px 12px;
		gap: 8px;
		border-radius: 14px;
	}

	.dinner-option-image {
		height: 72px;
		border-radius: 10px;
	}

	.dinner-option-label {
		font-size: 0.78rem;
	}

	.delivery-message {
		padding: 14px 18px;
		font-size: 0.95rem;
		top: 54%;
	}

	.dinner-reveal {
		top: 54%;
		gap: 8px;
	}

	.dinner-reveal-img {
		width: min(52vw, 200px);
	}

	.dinner-reveal-img.dinner-reveal-settled {
		transform: scale(1.05);
	}

	.dinner-reveal-label {
		font-size: 0.82rem;
		max-width: calc(100vw - 48px);
	}

	.message-section {
		padding: max(16px, env(safe-area-inset-top)) 14px max(100px, calc(env(safe-area-inset-bottom) + 88px));
	}

	.message-panel {
		padding: 24px 20px 22px;
		border-radius: 22px;
	}

	.message-end-card {
		padding: 16px 16px 14px;
		border-radius: 18px;
	}

	.support-cause-toggle {
		min-height: 44px;
	}

	.about-creator-panel {
		padding: 24px 20px 22px;
		border-radius: 20px;
	}

	.about-creator-return-btn {
		min-height: 44px;
	}

	.about-creator-open-btn {
		min-height: 44px;
	}

	.author-work-dropdown-toggle {
		min-height: 44px;
	}

	.message-end-next-btn {
		min-height: 44px;
		padding: 12px 22px;
	}

	.facts-gallery {
		gap: 8px;
	}

	.facts-gallery-arrow {
		width: 36px;
		height: 36px;
		font-size: 1.45rem;
	}

	.facts-gallery-card {
		padding: 14px 12px;
		font-size: 0.9rem;
		min-height: 4.4em;
	}

	.journey-preview-image {
		max-width: min(100%, 300px);
		max-height: 255px;
	}

	.message-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.message-btn,
	.choice-prompt,
	.action-choice,
	.begin-journey-btn,
	.name-send-btn {
		min-height: 44px;
	}

	.visitor-message {
		font-size: 16px;
	}

	.encouragement-bubble {
		bottom: -28%;
		padding: 14px;
		width: min(var(--bubble-size, 220px), 46vw) !important;
		height: min(var(--bubble-size, 220px), 46vw) !important;
		max-width: calc(100vw - 24px);
		max-height: calc(100vw - 24px);
		font-size: clamp(0.82rem, 3.4vw, 1rem);
	}

	.evening-clock {
		top: 44%;
	}

	.clock-face {
		width: 112px;
		height: 112px;
	}

	.sleep-effects {
		padding: 0 12px;
	}
}

@media (max-width: 480px) {
	#happiness-scale .label {
		display: none;
	}

	.encouragement-bubble {
		width: min(var(--bubble-size, 220px), 42vw) !important;
		height: min(var(--bubble-size, 220px), 42vw) !important;
		padding: 12px;
		font-size: clamp(0.78rem, 3.1vw, 0.95rem);
	}

	.intro-bubble {
		max-height: min(22dvh, 155px);
	}

	.journey-title {
		font-size: 1.55rem;
	}

	.department-option-card {
		width: 100%;
	}

	.phone-container {
		width: min(74vw, 200px);
	}

	.message-thanks {
		font-size: 1.08rem;
	}
}

@media (hover: none) and (pointer: coarse) {
	.choice-prompt:hover,
	.action-choice:hover,
	.message-btn:hover:not(:disabled),
	.dinner-option-card:hover:not(:disabled),
	.department-option-card:hover:not(:disabled),
	.begin-journey-btn:hover {
		transform: none;
	}
}