@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

:root {
	--bg-1: #fff8ff;
	--bg-2: #eef4ff;
	--bg-3: #f5fff4;
	--panel: #ffffff;
	--text-main: #1a2840;
	--text-soft: #5169a0;
	--accent: #2f7df4;
	--accent-soft: #d0e3ff;
	--accent-bright: #00b4f5;
	--accent-warm: #ff6b9d;
	--accent-sun: #ffb224;
	--accent-leaf: #42c883;
	--accent-violet: #9f63ff;
	--stroke: #cce0f0;
	--skin-color: #f3c9a2;
	--hair-color: #4a3626;
	--card-shadow: 0 16px 36px rgba(25, 62, 126, 0.12);
	--card-shadow-sm: 0 4px 12px rgba(25, 62, 126, 0.08);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Trebuchet MS", "Segoe UI", "Verdana", sans-serif;
	color: var(--text-main);
	background:
		radial-gradient(circle at 15% 10%, #ffffff 0%, transparent 30%),
		radial-gradient(circle at 92% 18%, rgba(159, 99, 255, 0.1) 0%, transparent 32%),
		radial-gradient(circle at 85% 90%, rgba(0, 180, 245, 0.09) 0%, transparent 36%),
		radial-gradient(circle at 10% 70%, rgba(255, 107, 157, 0.08) 0%, transparent 34%),
		radial-gradient(circle at 35% 95%, rgba(255, 178, 36, 0.08) 0%, transparent 30%),
		linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
}

.app-shell {
	max-width: 1560px;
	margin: 2.5rem auto;
	padding: 0 1rem 1.8rem;
	display: grid;
	grid-template-columns: 0.9fr 1.25fr 0.85fr;
	gap: 1.4rem;
	align-items: start;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--stroke);
	border-radius: 24px;
	box-shadow: var(--card-shadow);
	padding: 1.5rem;
}

.brand-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.brand-pill {
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: linear-gradient(100deg, #ff8a8a 0%, #ffb224 24%, #5cd77f 48%, #2fb5ff 72%, #9f63ff 100%);
	color: #10253d;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.rating {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 600;
	color: #6a829a;
}

.form-panel h1 {
	margin: 0.65rem 0 0;
	font-size: clamp(1.55rem, 2.3vw, 2.05rem);
	font-family: "Segoe Print", "Trebuchet MS", "Segoe UI", sans-serif;
	line-height: 1.08;
}

.subtitle {
	margin: 0.45rem 0 1.2rem;
	color: var(--text-soft);
	font-size: 0.96rem;
	line-height: 1.45;
}

.product-description {
	margin: 1.2rem 0;
	padding: 1.1rem 1.2rem;
	background: linear-gradient(125deg, rgba(255, 141, 141, 0.16) 0%, rgba(255, 193, 85, 0.16) 22%, rgba(77, 212, 132, 0.14) 44%, rgba(58, 172, 255, 0.15) 67%, rgba(163, 109, 255, 0.16) 100%);
	border: 1px solid #d9dfff;
	border-radius: 14px;
	box-shadow: 0 8px 18px rgba(79, 139, 255, 0.13);
}

.product-description h3 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 800;
	color: #1d2f45;
}

.features-list {
	margin: 0 0 0.8rem;
	padding-left: 1.2rem;
	list-style: none;
}

.features-list li {
	margin: 0.35rem 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #2d4563;
	position: relative;
	padding-left: 0.6rem;
}

.features-list li::before {
	content: "✓";
	position: absolute;
	left: -0.8rem;
	color: var(--accent-violet);
	font-weight: 900;
}

.product-note {
	margin: 0;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(79, 139, 255, 0.2);
	font-size: 0.82rem;
	font-style: italic;
	color: #4e6885;
	line-height: 1.4;
}

.step-indicator {
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.45rem;
}

.step-indicator li {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	padding: 0.55rem 0.35rem;
	border-radius: 999px;
	color: #7490aa;
	background: #f3f8ff;
	border: 1px solid #dfebf8;
}

.step-indicator li.active,
.step-indicator li.complete {
	color: #fff;
	background: linear-gradient(95deg, #ff7f91 0%, #ffb224 24%, #47d68f 48%, #2fb5ff 72%, #9f63ff 100%);
	border-color: transparent;
}

.customizer-form {
	display: grid;
	gap: 0.95rem;
}

.field-group {
	display: grid;
	gap: 0.45rem;
}

label {
	font-weight: 600;
	font-size: 0.9rem;
}

.field-hint {
	margin: 0;
	font-size: 0.76rem;
	color: #7890a8;
}

.form-message {
	margin: 0;
	padding: 0.7rem 0.8rem;
	border-radius: 10px;
	font-size: 0.83rem;
	font-weight: 700;
}

.form-message.is-error {
	background: #fff2f3;
	color: #ad2d3b;
	border: 1px solid #ffd0d7;
}

.form-message.is-success {
	background: #edfdf6;
	color: #1f7d58;
	border: 1px solid #c7f2de;
}

input,
select {
	width: 100%;
	border: 1px solid var(--stroke);
	border-radius: 13px;
	padding: 0.75rem 0.85rem;
	font-size: 0.94rem;
	color: var(--text-main);
	background: #fff;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.drop-zone {
	border: 1.5px dashed #b8d0ea;
	border-radius: 14px;
	background: linear-gradient(145deg, #fff9ff 0%, #f5fbff 40%, #f3fffa 100%);
	padding: 0.95rem;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.drop-zone:hover,
.drop-zone.is-dragover,
.drop-zone:focus {
	border-color: var(--accent-violet);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(159, 99, 255, 0.2), inset 0 0 0 1px rgba(159, 99, 255, 0.12);
}

.drop-zone p {
	margin: 0;
	font-size: 0.92rem;
}

.drop-zone .drop-meta {
	margin-top: 0.2rem;
	font-size: 0.76rem;
	color: #6f8ba8;
}

#childPhoto {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.photo-thumb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem;
	border-radius: 13px;
	border: 1px solid #d8e8f8;
	background: #f9fcff;
}

.photo-thumb img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid #d3e2f1;
}

.character-picker {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
}

.character-option {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.45rem;
	padding: 0.65rem;
	border: 1px solid #d6e3f2;
	border-radius: 16px;
	background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
	box-shadow: var(--card-shadow-sm);
	cursor: pointer;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.character-option:hover,
.character-option:focus-visible {
	transform: translateY(-1px);
	border-color: #8bbdff;
	box-shadow: 0 10px 22px rgba(47, 125, 244, 0.14);
	outline: none;
}

.character-option.is-selected {
	border-color: transparent;
	background: linear-gradient(135deg, rgba(255, 127, 145, 0.18) 0%, rgba(255, 178, 36, 0.16) 22%, rgba(71, 214, 143, 0.14) 48%, rgba(47, 181, 255, 0.16) 74%, rgba(159, 99, 255, 0.16) 100%);
	box-shadow: 0 0 0 2px rgba(47, 125, 244, 0.16), 0 14px 26px rgba(89, 110, 214, 0.16);
}

.character-option__thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 12px;
	background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.95), rgba(224, 239, 255, 0.92));
	border: 1px solid rgba(204, 224, 240, 0.9);
	padding: 0.35rem;
	pointer-events: none;
}

.character-option__label {
	font-size: 0.82rem;
	font-weight: 800;
	color: #27476f;
	pointer-events: none;
}

.product-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 0.15rem;
}

.gallery-card {
	position: relative;
	appearance: none;
	border: 1px solid #d6e3f2;
	border-radius: 12px;
	background: #f7fbff;
	overflow: hidden;
	box-shadow: var(--card-shadow-sm);
	padding: 0;
	cursor: zoom-in;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gallery-card:hover,
.gallery-card:focus-visible {
	transform: translateY(-1px);
	border-color: #8bbdff;
	box-shadow: 0 12px 24px rgba(47, 125, 244, 0.16);
	outline: none;
}

.gallery-card img {
	width: 100%;
	aspect-ratio: 1;
	display: block;
	object-fit: contain;
	padding: 0.4rem;
	background:
		linear-gradient(45deg, #e8eef8 25%, transparent 25%),
		linear-gradient(-45deg, #e8eef8 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e8eef8 75%),
		linear-gradient(-45deg, transparent 75%, #e8eef8 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.gallery-empty {
	grid-column: 1 / -1;
	border: 1px dashed #cadcef;
	border-radius: 12px;
	padding: 0.7rem;
	font-size: 0.78rem;
	color: #6f8ba8;
	text-align: center;
	background: #f8fbff;
}

.gallery-panel {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.gallery-header h2 {
	margin: 0.1rem 0 0;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.15;
	color: #20324c;
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(10, 16, 25, 0.82);
	backdrop-filter: blur(2px);
}

.gallery-lightbox[hidden] {
	display: none !important;
}

.gallery-lightbox img {
	max-width: min(92vw, 1100px);
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 24px 52px rgba(0, 0, 0, 0.45);
	background: #fff;
}

.lightbox-close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
}

.ghost-btn {
	border: 1px solid #cbddef;
	background: #fff;
	color: #4e6885;
	border-radius: 10px;
	padding: 0.5rem 0.72rem;
	font-weight: 700;
	cursor: pointer;
}

.action-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.62rem;
	margin-top: 0.35rem;
}

.primary-btn,
.secondary-btn {
	border: 0;
	border-radius: 13px;
	padding: 0.82rem 0.96rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.primary-btn {
	color: #fff;
	background: linear-gradient(95deg, #ff7f91 0%, #ffb224 22%, #47d68f 45%, #2fb5ff 70%, #9f63ff 100%);
	box-shadow: 0 12px 24px rgba(93, 96, 214, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.secondary-btn {
	background: linear-gradient(95deg, #fff5fb 0%, #f4f8ff 44%, #effff6 100%);
	color: #31557f;
	border: 1px solid #d8e2ff;
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover {
	filter: brightness(1.02);
	transform: translateY(-1px);
}

.primary-btn:disabled,
.secondary-btn:disabled {
	opacity: 0.65;
	cursor: wait;
	transform: none;
}

.secondary-btn.is-loading {
	background: linear-gradient(95deg, #e9f1ff 0%, #e8f2ff 100%);
}

.preview-panel {
	display: flex;
}

.book-page {
	width: 100%;
	border-radius: 20px;
	background: linear-gradient(165deg, #ffffff 0%, #f9fbff 45%, #f3f9ff 100%);
	border: 1px solid #e3eef6;
	padding: clamp(0.85rem, 2.4vw, 1.25rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.page-top {
	display: grid;
	gap: 0.35rem;
}

.page-tag {
	margin: 0;
	font-size: 0.76rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6f8aab;
}

.book-title,
#bookTitle {
	margin: 0;
	line-height: 1.3;
	font-size: clamp(1.25rem, 2.2vw, 2rem);
	font-family: "Trebuchet MS", "Segoe UI", "Verdana", sans-serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	color: var(--text-main);
	background: none;
	-webkit-text-fill-color: currentcolor;
	-webkit-text-stroke: 0;
	text-shadow: none;
	display: block;
	width: auto;
}

#coverContainer {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	background-image: url('images/cover-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #d6e3f2;
	box-shadow: 0 12px 28px rgba(50, 85, 127, 0.18);
	position: relative;
	padding: clamp(0.75rem, 4cqw, 1.5rem);
	/* Establishes a query container: children can size themselves off the
	   cover's own rendered width (cqw) instead of the viewport (vw). Since
	   the cover's width already changes with the grid layout at every
	   breakpoint, this keeps text/character scale locked to the cover. */
	container-type: inline-size;
	container-name: cover;
}

/* ===== CHILD NAME (TOP) ===== */
#coverName {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	text-align: center;
	font-family: 'Luckiest Guy', cursive;
	/* cqw = % of the cover container's own width, not the viewport, so the
	   name always resizes to the space actually available inside the cover. */
	font-size: clamp(1.3rem, 11cqw, 4rem);
	letter-spacing: 2px;
	text-transform: uppercase;
}

#coverName span {
	display: inline-block;
	padding: 0 2px;

	/* thinner white stroke */
	-webkit-text-stroke: 2px white;

	/* softer black outline */
	text-shadow:
		-2px -2px 0 #000,
		 2px -2px 0 #000,
		-2px  2px 0 #000,
		 2px  2px 0 #000;
}


/* ===== MAIN TITLE ===== */
#coverTitle {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	text-align: center;
	font-family: 'Luckiest Guy', cursive;
	text-transform: uppercase;
	line-height: 0.9;
}

/* BIG DENTAL */
#coverTitle .line1 span {
	display: inline-block;
	font-size: clamp(1.5rem, 13cqw, 5rem);
	-webkit-text-stroke: 3px white;

	text-shadow:
		-2px -2px 0 #000,
		 2px -2px 0 #000,
		-2px  2px 0 #000,
		 2px  2px 0 #000;
}

/* ADVENTURE */
#coverTitle .line2 span {
	display: inline-block;
	font-size: clamp(1.6rem, 14cqw, 5.5rem);
	-webkit-text-stroke: 3px white;

	text-shadow:
		-2px -2px 0 #000,
		 2px -2px 0 #000,
		-2px  2px 0 #000,
		 2px  2px 0 #000;
}
#coverTitle span {
	color: #000; /* fallback so text never disappears */
}
.character-stage {
	flex: 1;
	min-height: 420px;
	border-radius: 18px;
	background: linear-gradient(180deg, #f3f8ff 0%, #e2f3ff 100%);
	border: 1px solid #dce9f3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	position: relative;
	overflow: hidden;
}

.scene-layer {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 35%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(0deg, rgba(148, 204, 255, 0.45) 0%, rgba(158, 222, 255, 0.3) 100%);
}

.character-stage[data-theme="bedroom"] .scene-layer {
	background:
		linear-gradient(180deg, #e8f2ff 0%, #d2e7ff 60%, #f7dcb7 60%, #f3cea0 100%),
		radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.6), transparent 22%);
}

.character-stage[data-theme="dentist"] .scene-layer {
	background:
		linear-gradient(180deg, #f5f0ff 0%, #d8ebff 36%, #baf0dc 62%, #a7d8f6 62%, #95c1df 100%),
		radial-gradient(circle at 84% 16%, rgba(255, 178, 36, 0.35), rgba(255, 178, 36, 0) 24%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 30%);
}

.character-stage[data-theme="sunny"] .scene-layer {
	background:
		linear-gradient(180deg, #dff4ff 0%, #b9e8ff 64%, #c6efc4 64%, #9fd88a 100%),
		radial-gradient(circle at 84% 14%, rgba(255, 236, 148, 0.92), rgba(255, 236, 148, 0) 22%);
}

.scene-props {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.prop {
	position: absolute;
	display: block;
	border-radius: 999px;
	opacity: 0.75;
}

.prop.one {
	width: 94px;
	height: 94px;
	top: 11%;
	left: 8%;
	background: rgba(255, 126, 145, 0.28);
}

.prop.two {
	width: 120px;
	height: 16px;
	bottom: 26%;
	right: 9%;
	background: rgba(47, 181, 255, 0.28);
}

.prop.three {
	width: 52px;
	height: 52px;
	top: 20%;
	right: 16%;
	background: rgba(159, 99, 255, 0.28);
}

.scene-caption {
	position: absolute;
	left: 0.85rem;
	bottom: 0.75rem;
	font-size: 0.77rem;
	font-weight: 700;
	padding: 0.36rem 0.58rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.86);
	color: #38567f;
	border: 1px solid rgba(118, 132, 230, 0.36);
}

.character {
	width: min(100%, 290px);
	aspect-ratio: 3 / 4;
	position: relative;
	--skin-color: #f3c9a2;
	z-index: 2;
}

.character::after {
	content: "";
	position: absolute;
	width: 74%;
	height: 10%;
	left: 50%;
	bottom: -2%;
	transform: translateX(-50%);
	background: rgba(35, 76, 120, 0.18);
	border-radius: 50%;
	filter: blur(8px);
}

.body {
	position: absolute;
	width: 68%;
	height: 56%;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	border-radius: 45% 45% 16% 16%;
	background: linear-gradient(180deg, #66c8e0 0%, #3c93b3 100%);
}

.head {
	position: absolute;
	width: 52%;
	aspect-ratio: 1;
	left: 50%;
	top: 20%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: var(--skin-color);
	border: 2px solid rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.07);
	overflow: hidden;
}

.face-features {
	position: absolute;
	inset: 0;
}

.eye {
	position: absolute;
	top: 42%;
	width: 12px;
	height: 12px;
	background: #243649;
	border-radius: 50%;
}

.eye.left {
	left: 33%;
}

.eye.right {
	right: 33%;
}

.smile {
	position: absolute;
	left: 50%;
	bottom: 26%;
	width: 34px;
	height: 16px;
	transform: translateX(-50%);
	border: 3px solid transparent;
	border-bottom-color: #b15f4f;
	border-radius: 0 0 40px 40px;
}

.photo-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.photo-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hair {
	position: absolute;
	left: 50%;
	top: 12%;
	transform: translateX(-50%);
	z-index: 3;
	background: var(--hair-color);
}

.hair-short {
	width: 53%;
	height: 16%;
	border-radius: 45% 45% 35% 35%;
}

.hair-curly {
	width: 61%;
	height: 22%;
	border-radius: 50%;
	box-shadow:
		-45px 8px 0 -12px var(--hair-color),
		45px 8px 0 -12px var(--hair-color),
		0 18px 0 -14px var(--hair-color);
}

.hair-braids {
	width: 50%;
	height: 18%;
	border-radius: 45% 45% 30% 30%;
}

.hair-braids::before,
.hair-braids::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 95px;
	top: 48%;
	background: repeating-linear-gradient(
		to bottom,
		var(--hair-color),
		var(--hair-color) 7px,
		#2d1f13 7px,
		#2d1f13 11px
	);
	border-radius: 10px;
}

.hair-braids::before {
	left: -12px;
}

.hair-braids::after {
	right: -12px;
}

.summary-card {
	margin-top: 0.45rem;
	padding: 0.82rem 0.9rem;
	border: 1px solid #d7e3ff;
	border-radius: 14px;
	background: linear-gradient(130deg, rgba(255, 141, 141, 0.12) 0%, rgba(255, 193, 85, 0.11) 25%, rgba(71, 214, 143, 0.1) 50%, rgba(47, 181, 255, 0.11) 75%, rgba(159, 99, 255, 0.12) 100%);
}

.summary-card h3 {
	margin: 0 0 0.45rem;
	font-size: 0.98rem;
}

.summary-card p {
	margin: 0.2rem 0;
	font-size: 0.82rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.summary-card span {
	color: #667e98;
}

.summary-card strong {
	text-align: right;
}

.page-nav {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0 0.9rem;
}

.page-btn {
	flex: 1;
	padding: 0.6rem 0.9rem;
	border: 1px solid #d6e3f2;
	border-radius: 10px;
	background: #f4f8ff;
	color: #4e6885;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.8rem;
}

.page-btn.active {
	background: linear-gradient(95deg, #ff7f91 0%, #ffb224 24%, #47d68f 48%, #2fb5ff 72%, #9f63ff 100%);
	color: #fff;
	border-color: #4d63a8;
}

.page-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.page-2 {
	display: flex;
}

.book-page.hidden-page {
	display: none !important;
}

#page2Container {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	background-image: url('images/page2-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #d6e3f2;
	box-shadow: 0 12px 28px rgba(50, 85, 127, 0.18);
	container-type: inline-size;
	container-name: cover;
}

#page2Text {
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	width: 84%;
	margin: 0;
	padding: clamp(0.6rem, 4cqw, 1.25rem);
	border-radius: 16px;
	background: rgba(255, 248, 228, 0.9);
	color: #4b3a22;
	text-align: center;
	line-height: 1.5;
	font-size: clamp(0.8rem, 4.2cqw, 1.05rem);
	font-family: "Comic Sans MS", "Trebuchet MS", "Segoe UI", sans-serif;
	box-shadow: 0 10px 22px rgba(72, 46, 18, 0.2);
}

#page2Photo {
	position: absolute;
	top: 22%;
	left: 8%;
	width: clamp(28%, 22cqw, 34%);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #fff;
	padding: 0.35rem 0.35rem 1rem;
	border: 1px solid #f4f4f4;
	border-radius: 6px;
	transform: rotate(-8deg);
	box-shadow: 0 14px 24px rgba(24, 35, 56, 0.28);
}

#page2Photo[hidden] {
	display: none;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Desktop: 1400px+  (default styles above)
   Laptop:  1024px–1399px
   Tablet:  768px–1023px
   Mobile:  below 768px
   ============================================================ */

/* ----- Laptop (1024–1399px): drop to a 2-column grid, gallery
   moves to its own full-width row underneath. The cover itself
   doesn't need any special-casing here — its width simply follows
   its grid column, and its contents (via cqw) follow the cover. ----- */
@media (max-width: 1399px) {
	.app-shell {
		grid-template-columns: 1fr 1fr;
		max-width: 1100px;
	}

	.gallery-panel {
		grid-column: 1 / -1;
	}

	.product-gallery-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ----- Tablet (768–1023px): stack everything in a single column
   so the form, preview and gallery panels each get full width
   rather than being squeezed into narrow halves. ----- */
@media (max-width: 1023px) {
	.app-shell {
		grid-template-columns: 1fr;
		max-width: 720px;
		margin: 1.2rem auto 2rem;
	}

	.gallery-panel {
		grid-column: auto;
	}

	.product-gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.step-indicator {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ----- Mobile (below 768px): tighten outer spacing and drop the
   gallery/character grids to fit small screens. Cover/title/name/
   character sizing needs no overrides here — cqw already scaled
   them down along with the narrower cover width. ----- */
@media (max-width: 767px) {
	.app-shell {
		margin: 1rem auto 1.5rem;
		padding: 0 0.75rem 1.2rem;
	}

	.panel {
		padding: 1.1rem;
	}

	.product-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.character-picker {
		grid-template-columns: 1fr;
	}
}

#characterSlot {
	position: absolute;
	left: 8%;
	bottom: 11%;
	width: 54%;
	aspect-ratio: 3 / 4;
	z-index: 5;
	display: block;
}


.cover-character {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform-origin: center;
	display: block;
	pointer-events: none;
}