* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	background: #17130f;
	color: #f4eadb;
	font-family: Georgia, 'Times New Roman', serif;
	overflow: hidden;
	overscroll-behavior: none;
}
.topbar {
	height: 64px;
	padding: 0 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #0e0b09;
	border-bottom: 1px solid #5b4329;
	position: relative;
	z-index: 30;
}
.topbar strong { letter-spacing: .12em; color: #d8b277; }
.topbar span { display: block; font: 12px Arial, sans-serif; color: #a99780; margin-top: 3px; }
.actions { display: flex; gap: 7px; }
button {
	color: #ead8bd;
	background: #231b14;
	border: 1px solid #6b5134;
	border-radius: 8px;
	cursor: pointer;
	touch-action: manipulation;
}
.actions button { width: 38px; height: 36px; font-size: 20px; }
.stage {
	height: calc(100dvh - 112px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 18px;
	background: radial-gradient(circle at 50% 45%, #3a2c1e 0, #1c1610 42%, #0d0b09 100%);
	position: relative;
	overflow: hidden;
}
.book {
	position: relative;
	width: min(calc(100vw - 150px), calc(min(78vh, 860px) * 2482 / 1754));
	aspect-ratio: 2482 / 1754;
	display: flex;
	transform: scale(var(--zoom, 1));
	transform-origin: center center;
	transition: transform .2s ease;
	touch-action: pan-y;
	box-shadow: 0 22px 36px rgba(0, 0, 0, .45);
	perspective: 2200px;
	perspective-origin: 50% 48%;
}
.page {
	height: 100%;
	width: 50%;
	position: relative;
	overflow: hidden;
	background: #100d0a center / cover no-repeat;
}
.page img, .face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}
.left { border-radius: 8px 0 0 8px; box-shadow: inset -18px 0 22px -16px #000; }
.right { border-radius: 0 8px 8px 0; box-shadow: inset 18px 0 22px -16px #000; }
.page.left:empty {
	background:
		linear-gradient(90deg, #1a140f, #2a2118 70%, #140f0c);
	box-shadow: inset -22px 0 28px -8px rgba(0, 0, 0, .55);
}
.book:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 14px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .28) 58%, transparent);
	pointer-events: none;
	z-index: 7;
}
.flip {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	pointer-events: none;
	z-index: 6;
	visibility: hidden;
}
.flip.show { visibility: visible; will-change: transform; }
.flip.next { left: 50%; transform-origin: left center; }
.flip.prev { left: 0; transform-origin: right center; }
.face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background: #f4efe6;
}
.face.back { transform: rotateY(180deg); }
.face.front::after, .face.back::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.flip.next .face.front::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 80%, rgba(255, 244, 220, .2));
}
.flip.prev .face.front::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 80%, rgba(255, 244, 220, .2));
}
.flip.next .face.back::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 22%);
}
.flip.prev .face.back::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 22%);
}
.nav { width: 48px; height: 64px; font-size: 42px; line-height: 1; background: #15100ccc; z-index: 15; }
.nav:disabled { opacity: .25; cursor: default; }
.tapzone { display: none; }
.swipeHint { display: none; }
footer {
	height: 48px;
	background: #0e0b09;
	border-top: 1px solid #5b4329;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0 16px;
	font: 13px Arial, sans-serif;
	color: #c9b89f;
	position: relative;
	z-index: 30;
}
footer input { width: min(420px, 55vw); accent-color: #b99058; }
footer button { width: 36px; height: 30px; }

@media (max-width: 760px) {
	html, body { background: #050403; }
	.topbar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40;
		background: linear-gradient(#0e0b09e8, #0e0b0999 70%, transparent);
		border: 0;
		height: 58px;
		min-height: 58px;
		padding: calc(env(safe-area-inset-top) + 6px) 10px 6px;
	}
	.brand span { display: none; }
	.topbar strong { font-size: 11px; letter-spacing: .08em; text-shadow: 0 1px 4px #000; }
	.actions { gap: 5px; }
	.actions button { width: 34px; height: 32px; font-size: 18px; background: #17110dcc; backdrop-filter: blur(6px); }
	.stage {
		position: absolute;
		inset: 0;
		height: 100dvh;
		padding: 0;
		gap: 0;
		background: #050403;
	}
	.book {
		width: 100vw;
		height: 100dvh;
		max-width: none;
		aspect-ratio: auto;
		box-shadow: none;
		display: block;
		perspective: 1800px;
	}
	.page {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background: #050403;
	}
	.page img, .face img { object-fit: contain; object-position: center; background: #050403; }
	.left { display: none; }
	.right { border: 0; border-radius: 0; box-shadow: none; }
	.book:after { display: none; }
	.flip, .flip.next, .flip.prev { left: 0; width: 100%; height: 100%; }
	.flip.next { transform-origin: left center; }
	.flip.prev { transform-origin: right center; }
	.nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 42px;
		height: 74px;
		border: 0;
		background: #09070555;
		font-size: 38px;
		z-index: 25;
	}
	.nav.prev { left: 0; border-radius: 0 14px 14px 0; }
	.nav.next { right: 0; border-radius: 14px 0 0 14px; }
	.nav:disabled { opacity: .08; }
	.tapzone { display: none; }
	.stage.zoomed { overflow: auto; }
	.stage.zoomed .nav { display: none; }
	footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 54px;
		min-height: 54px;
		padding: 5px max(10px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		background: linear-gradient(transparent, #0e0b09cc 30%, #0e0b09f2);
		border: 0;
		gap: 8px;
	}
	footer #counter { min-width: 68px; text-align: center; font-size: 11px; text-shadow: 0 1px 3px #000; }
	footer input { width: auto; flex: 1; min-width: 70px; opacity: .82; }
	footer button { width: 34px; flex: 0 0 34px; background: #17110dcc; }
	.swipeHint {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 62px;
		transform: translateX(-50%);
		padding: 6px 10px;
		border-radius: 20px;
		background: #0009;
		color: #e6d5bb;
		font: 11px Arial, sans-serif;
		pointer-events: none;
		z-index: 26;
		animation: hint 3.4s ease 1 both;
	}
}
@keyframes hint {
	0%, 10% { opacity: 0; transform: translate(-50%, 8px); }
	20%, 70% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; }
}
@media (max-width: 380px) {
	.topbar strong { font-size: 11px; }
	.actions button { width: 31px; }
	.nav { width: 34px; }
	footer #counter { min-width: 64px; font-size: 10px; }
}
@media (max-width: 760px) and (orientation: landscape) {
	.topbar { height: 48px; min-height: 48px; padding-top: calc(env(safe-area-inset-top) + 3px); }
	.swipeHint { display: none; }
	footer { height: 46px; min-height: 46px; }
}