/* Minimal, designerly styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; width: 100%; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #111; background: #fff; }
.wrapper, #book-container { width: 100%; height: 100%; position: relative; }
#three-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#three-canvas:active { cursor: grabbing; }

/* Minimal buy button */
#buy-button { position: fixed; top: 18px; right: 18px; background:#111; color:#fff; border: none; padding:10px 14px; font-weight:600; cursor:pointer; z-index:1000; }
#buy-button:hover { opacity:0.95; transform: translateY(-1px); }

/* Modal baseline */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10000; }
.hidden { display:none; }
.modal-content { background:#fff; padding:18px; width:80vw; max-width:720px; box-shadow: 0 6px 30px rgba(16,24,40,0.12); color:#111; }
.modal-header h2 { font-size:1.125rem; margin-bottom:6px; }
.modal-subheader { font-size:0.9rem; color:#666; margin-bottom:8px; display:flex; gap:12px; }
.close { position:absolute; right:12px; top:10px; font-size:1.1rem; color:#666; cursor:pointer; }

/* Flip view */
.flipview { display:flex; gap:0; width:100%; height:60vh; margin-top:12px; }
.page-container { flex:1; position:relative; display:flex; align-items:center; justify-content:center; background:#f7f7f7; }
.page-container img { max-width:100%; max-height:100%; object-fit:contain; }

/* select modal */
.modal-content.select-mode { max-width:520px; }
#select-form { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
#select-form label { display:flex; align-items:center; gap:8px; }
.select-actions { text-align:right; margin-top:12px; }
#select-send { padding:8px 14px; background:#111; color:#fff; border:none; cursor:pointer; }

/* Ensure single-spaced items in the select modal */
#select-form label { line-height: 1.0; }

/* Desktop inline book info overlay (white text shown below the opened book) */
/* Sticky bottom inline book info */
#book-info-overlay { position: fixed; left: 0; right: 0; bottom: 18px; pointer-events: none; z-index: 9500; display:flex; align-items:flex-end; justify-content:center; }
#book-info-overlay.hidden { display: none; }
#book-info-content { pointer-events: auto; background: rgba(0,0,0,0.72); color: #fff; padding: 12px 14px; max-width: 880px; width: calc(100% - 48px); box-shadow: none; border-radius: 0; }

/* Overlay title (big & bold) and meta (light grey, light weight) */
.overlay-title { font-weight: 700; color: #fff; }
.overlay-meta { color: #bfc5cc; font-weight: 300; }

/* Ensure overlay DOM images are shown with normal orientation on desktop */
#mobile-overlay img, .two-up-wrap img { transform: scaleX(1) !important; image-orientation: from-image; }

/* Desktop: constrain overlay images so they never exceed viewport height and two-up fits */
@media (min-width: 769px) {
	/* Single image (mobile overlay used on desktop too) */
	/* Strong constraints to override inline JS sizing and avoid upscaling */
	#mobile-overlay img {
		/* never taller than viewport */
		max-height: 100vh !important;
		height: auto !important;
		/* don't force a larger width than the image's intrinsic size */
		width: auto !important;
		/* allow plenty of horizontal room but don't force upscaling */
		max-width: 90vw !important;
		object-fit: contain !important;
		display: block;
		margin: 0 auto;
	}

	/* Two-up wrapper: make images sit side-by-side and each take up to ~48% width, but never exceed viewport height */
	.two-up-wrap { display:flex; gap:12px; align-items:center; justify-content:center; }
		.two-up-wrap img {
			/* cap height to viewport (leave room for UI chrome) and prevent JS from forcing a bigger size */
			max-height: calc(100vh - 120px) !important; /* leave room for header/controls */
			height: auto !important;
			width: auto !important;
			max-width: 48vw !important;
			object-fit: contain !important;
			display: block;
			margin: 0 auto;
		}
}

@media (max-width:768px) { .flipview { height:48vh; } .modal-content { width:92vw; max-height:70vh; } .modal-content.select-mode { width:92vw; } }

/* Position buy button bottom-center on mobile for easier access */
@media (max-width: 640px) {
	#buy-button { top: auto; right: auto; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 12px 18px; }
}