:root{
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
	--bg-main: rgb(240,240,240);
	--text-primary: #111;
	--text-secondary: #555;
	--text-tertiary: #666;
	--text-help: #333;
	--surface: #fff;
	--border: #ccc;
	--border-light: rgba(0,0,0,0.08);
	--shadow: rgba(0,0,0,0.1);
	--shadow-strong: rgba(0,0,0,0.35);
	--overlay: rgba(0,0,0,0.35);
	--magnifier-border: rgba(0,0,0,0.3);
	--zoom-label-bg: rgba(0,0,0,0.75);
	--zoom-label-text: white;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-main: rgb(23,23,23);
		--text-primary: #eee;
		--text-secondary: #aaa;
		--text-tertiary: #999;
		--text-help: #ccc;
		--surface: #2a2a2a;
		--border: #444;
		--border-light: rgba(255,255,255,0.1);
		--shadow: rgba(0,0,0,0.3);
		--shadow-strong: rgba(0,0,0,0.6);
		--overlay: rgba(0,0,0,0.6);
		--magnifier-border: rgba(255,255,255,0.4);
		--zoom-label-bg: rgba(255,255,255,0.85);
		--zoom-label-text: #111;
	}
}

body{margin:0;background:var(--bg-main);color:var(--text-primary)}

/* Fixed small header to save vertical space */
#siteHeader{position:fixed;top:6px;left:12px;z-index:20}

main {
	max-width: 1430px;
	margin: 8px auto;
	padding: 20px 16px 16px 16px;
}
#viewer{display:flex;align-items:center;gap:12px}
#viewer button{background:var(--surface);border:1px solid var(--border);padding:8px 12px;border-radius:6px;cursor:pointer;min-width:44px;text-align:center;color:var(--text-primary)}
#imageWrap{flex:1;display:flex;flex-direction:column;align-items:center}
#photo{max-width:100%;height:auto;border-radius:6px;box-shadow:0 4px 12px var(--shadow)}
#meta{margin-top:8px;color:var(--text-secondary)}
.controls{display:none}
.help{color:var(--text-tertiary);font-size:0.9rem}

/* Title styling */
h1{font-size:1.05rem;margin:0;padding:0}


#viewer button#next{margin-left:8px}

/* Shake animation for next arrow to gently indicate new images
   Frequency: 1.5Hz (1.5 cycles per second). Use ~667ms per cycle.
   Vertical displacement: 10% of the button's height. */
@keyframes arrowShake {
  0% { transform: translateY(0); }
  25% { transform: translateY(-10%); }
  50% { transform: translateY(0); }
  75% { transform: translateY(10%); }
  100% { transform: translateY(0); }
}

/* Applied to the next button when new images are available */
.next-animate {
  animation-name: arrowShake;
  animation-duration: 667ms; /* one cycle ≈0.667s -> 1.5 cycles/sec */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Magnifier (circular lens) */
#magnifier{
	position:absolute;
	width:160px;
	height:160px;
	border-radius:50%;
	box-shadow:0 4px 12px var(--shadow-strong);
	border:3px solid var(--magnifier-border);
	pointer-events:none;
	display:none;
	z-index:50;
	background-repeat:no-repeat;
	background-position:center center;
}

/* Canvas overlay for subtle graduation ticks around the magnifier */
#magnifierTicks{
  position:absolute;
  width:160px;
  height:160px;
  pointer-events:none;
  display:none;
  z-index:55; /* above magnifier border */
}

#imageWrap{position:relative}

/* Overlay used for double-buffered mega image swap. The mega source
	 can be much taller; display it at half height to match the main
	 `#photo` visual without changing its intrinsic src. Keep width at
	 100% and let the browser preserve aspect ratio via `height:auto`.
*/
#photoMega{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	transform-origin: top left;
	/* No transform here; JS will size the overlay to match the displayed `#photo`. */
	transform: none;
	pointer-events:none;
}

/* New images indicator removed: replaced with subtle animation on next button */

/* Zoom label shown briefly above magnifier */
#zoomLabel{
	position:absolute;
	transform:translateX(-50%);
	padding:6px 8px;
	background:var(--zoom-label-bg);
	color:var(--zoom-label-text);
	font-size:0.9rem;
	border-radius:6px;
	display:none;
	z-index:60;
}

/* Help button: small circled question mark in top-right */
.help-button{
	position:fixed;
	top:10px;
	right:12px;
	width:36px;
	height:36px;
	border-radius:50%;
	background:var(--surface);
	color:var(--text-primary);
	border:1px solid var(--border-light);
	box-shadow:0 2px 6px var(--shadow);
	font-weight:600;
	font-size:1.05rem;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:100;
}
.help-button:focus{outline:3px solid var(--border-light)}

/* Modal overlay and dialog */
.help-dialog-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:200}
.help-dialog{background:var(--surface);color:var(--text-primary);max-width:520px;width:92%;border-radius:10px;padding:16px;box-shadow:0 8px 40px var(--shadow-strong)}
.help-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.help-header h2{margin:0;font-size:1.1rem}
.help-close{background:transparent;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-primary)}
.help-body{color:var(--text-help);font-size:0.98rem;line-height:1.4}
.help-body ul{padding-left:18px}
.help-body li{margin-bottom:8px}

/* When hidden, ensure overlay is not shown */
.help-dialog-overlay[hidden]{display:none}

/* Portrait image: move arrows below image */
#viewer.portrait{
	flex-wrap:wrap;
}
#viewer.portrait #imageWrap{
	flex:0 0 100%;
	order:1;
}
#viewer.portrait button{
	order:2;
}
#viewer.portrait button#prev{
	order:2;
	flex:1;
	margin-right:4px;
}
#viewer.portrait button#next{
	order:3;
	flex:1;
	margin-left:4px;
}

/* ===== iPhone / Mobile responsive styles ===== */

/* Prevent iOS rubber-band overscroll and pull-to-refresh */
html{overscroll-behavior:none;-webkit-overflow-scrolling:touch}

/* Safe area insets for notched iPhones */
main{
	padding-left:max(16px, env(safe-area-inset-left));
	padding-right:max(16px, env(safe-area-inset-right));
	padding-bottom:max(16px, env(safe-area-inset-bottom));
}

/* Touch-specific: disable text selection and double-tap zoom on interactive elements */
#viewer button,
.help-button{
	-webkit-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
}

/* Active state for touch feedback */
#viewer button:active{
	background:var(--border);
	transform:scale(0.95);
	transition:transform 0.1s, background 0.1s;
}
.help-button:active{
	transform:scale(0.9);
	transition:transform 0.1s;
}

/* Prevent image drag on touch (interferes with swipe) */
#photo{
	-webkit-user-drag:none;
	user-select:none;
	-webkit-user-select:none;
	touch-action:pan-y pinch-zoom;
}

/* Mobile layout: stack navigation below image */
@media (max-width: 600px) {
	#siteHeader{
		position:static;
		padding:8px 12px 0;
		text-align:center;
	}
	h1{font-size:0.95rem}

	main{
		margin:0 auto;
		padding:8px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
	}

	#viewer{
		flex-direction:row;
		flex-wrap:wrap;
		gap:8px;
	}

	#imageWrap{
		width:100%;
		order:1;
	}

	/* Navigation buttons side-by-side below the image */
	#viewer button{
		order:2;
		font-size:1.2rem;
		padding:12px 24px;
		min-height:48px;
		min-width:48px;
		border-radius:8px;
	}

	/* Arrange prev/next in a row below the image */
	#viewer button#prev{
		order:2;
		flex:1;
		margin-right:4px;
	}
	#viewer button#next{
		order:3;
		flex:1;
		margin-left:4px;
	}

	#photo{border-radius:4px}
	#meta{font-size:0.9rem;text-align:center}

	/* Help button sizing for touch */
	.help-button{
		width:44px;
		height:44px;
		font-size:1.15rem;
		top:8px;
		right:max(8px, env(safe-area-inset-right));
	}

	/* Help dialog takes more width on mobile */
	.help-dialog{
		width:96%;
		max-width:none;
		max-height:85vh;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
	}

	/* Magnifier: slightly smaller on mobile */
	#magnifier{width:120px;height:120px}
	#magnifierTicks{width:120px;height:120px}

	/* Zoom label readable on mobile */
	#zoomLabel{font-size:0.85rem;padding:4px 6px}
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
	h1{font-size:0.85rem}
	#viewer button{padding:10px 16px;font-size:1.1rem}
	#meta{font-size:0.8rem}
	#magnifier{width:100px;height:100px}
	#magnifierTicks{width:100px;height:100px}
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
	#siteHeader{position:fixed;top:4px;left:max(8px, env(safe-area-inset-left));z-index:20}
	h1{font-size:0.85rem}

	main{
		margin:0 auto;
		padding:4px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	}

	/* In landscape, keep prev/next beside image to save vertical space */
	#viewer{
		flex-direction:row;
		flex-wrap:nowrap;
		gap:6px;
	}
	#viewer button#prev{order:0;flex:initial;margin-right:0}
	#imageWrap{order:1}
	#viewer button#next{order:2;flex:initial;margin-left:0}

	#photo{border-radius:4px}
	#meta{font-size:0.8rem;margin-top:2px}
}