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

body {
	background: #222;
	color: white;
	font-family: Arial, sans-serif;
	height: 100vh;
	overflow: hidden;
}

/* SHELF - Carousel layout */
#shelf {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	height: 340px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	gap: 2px;
	background: rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

#carousel-container {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	width: 100%;
	height: 300px;
	overflow: hidden;
	flex: 1;
}

#left-side, #right-side {
	display: flex;
	gap: 4px;
	align-items: center;
	height: 100%;
}

#focal-movie {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

#left-side .vhs-tape {
	transform: scaleX(-1);
}

.carousel-arrow {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.3);
	color: white;
	cursor: pointer;
	padding: 12px 8px;
	border-radius: 8px;
	font-size: 20px;
	user-select: none;
	transition: all 0.2s;
	z-index: 5;
	flex-shrink: 0;
}

.carousel-arrow:hover {
	background: rgba(255,255,255,0.2);
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.carousel-arrow:active {
	transform: scale(0.95);
}

/* 2D VHS tape spine */
.vhs-tape {
	flex: 0 0 auto;
	height: 180px;
	width: 100px;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	border: 1px solid #555;
}

/* Focal movie in center */
.vhs-tape.focal {
	height: 280px;
	width: 155px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.8);
	border: 2px solid rgba(255,255,255,0.3);
	transform: scale(1) !important;
}

.vhs-tape.focal:hover {
	transform: scale(1) !important;
}

/* Side movies */
.vhs-tape.side {
	height: 140px;
	width: 75px;
	opacity: 0.7;
	transition: all 0.3s;
}

.vhs-tape.side:hover {
	opacity: 0.9;
	transform: translateY(-5px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

/* Spine image will fill this */
.tape-spine {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.spine-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spine-title {
	color: white;
	font-size: 12px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	text-align: center;
	padding: 10px;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.7);
}

/* DETAIL VIEW - Your original 3D viewer */
:root {
	--viewer-scale: 1;
}

#detailView {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
	z-index: 100;
	display: none;
	justify-content: center;
	align-items: center;
}

#detailView.active {
	display: flex;
}

/* Your original 3D CSS */
.viewport{
	width: calc(98mm * 3 * var(--viewer-scale));
	height: calc(180mm * 3 * var(--viewer-scale));
	perspective: calc(1200px * var(--viewer-scale));
	border: 0px solid rgba(255,255,255,0.06);
	display:flex;align-items:center;justify-content:center;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	max-width: 95vw;
	max-height: 80vh;
}

.scene{
	width: 98mm;
	height: 180mm;
	transform-style: preserve-3d;
	will-change: transform;
	position: relative;
	transform: rotateX(-10deg) rotateY(20deg) scale(var(--viewer-scale));
}

.box{
	position: absolute; inset:0; transform-style: preserve-3d;
	width:100%; height:100%;
}

.face{
	position: absolute; left:50%; top:50%; transform-style: preserve-3d;
	transform-origin: center center;
	display:flex;align-items:center;justify-content:center; overflow:hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.6) inset;
	backface-visibility: hidden;
	background: #333;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
}

.face img{
	display:block;
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	object-fit: cover;
	z-index:1;
}
.face .label{ z-index:2; }

.face .label{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #e6e6e6;
	font-size: 14px;
	white-space: nowrap;
	background: rgba(255,255,255,0.03);
	padding: 6px 8px;
	border-radius: 4px;
	pointer-events: none;
	display: none;
}

#dragArea{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:120%; height:120%;
	max-width:none; max-height:none;
	background:transparent;
	z-index:40;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.top img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) rotate(90deg);
	transform-origin: center center;
	width: 26%;
	height: 389%;
	object-fit: fill;
	max-width: 100%;
	max-height: 2000%;
}

.bottom img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) rotate(90deg);
	transform-origin: center center;
	width: 26%;
	height: 389%;
	object-fit: fill;
	max-width: 100%;
	max-height: 2000%;
}


/* Face sizing before rotations */
.front, .back{ width: 98mm; height: 180mm; }
.left, .right{ width: 25mm; height: 180mm; }
.top, .bottom{ width: 98mm; height: 25mm; }

/* Positioning faces in 3D space */
.front{ transform: translate(-50%,-50%) translateZ(12.5mm); }
.back{ transform: translate(-50%,-50%) rotateY(180deg) translateZ(12.5mm); }
.right{ transform: translate(-50%,-50%) rotateY(90deg) translateZ(49mm); }
.left{ transform: translate(-50%,-50%) rotateY(-90deg) translateZ(49mm); }
.top{ transform: translate(-50%,-50%) rotateX(90deg) translateZ(90mm); }
.bottom{ transform: translate(-50%,-50%) rotateX(-90deg) translateZ(90mm); }

/* CONTROLS */
#closeBtn {
	position: fixed;
	top: 20px;
	right: 20px;
	background: rgba(255,255,255,0.1);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	z-index: 101;
	display: none;
}

#closeBtn.visible {
	display: block;
}

.instructions {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.1);
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	z-index: 101;
}

.shelf-instructions {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(255,255,255,0.1);
	padding: 8px 15px;
	border-radius: 5px;
	font-size: 12px;
	z-index: 2;
}

.carousel-controls-hint {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.1);
	padding: 8px 15px;
	border-radius: 5px;
	font-size: 12px;
	z-index: 2;
	text-align: center;
}

.carousel-controls-hint-mobile {
	display: none;
}

.hint-hidden {
	display: none !important;
}

.detail-hint {
	text-align: center;
	position: absolute;
	bottom: 80px;
	width: 100%;
}

.drag-hint{
	position:relative; margin: 6px auto 6px; z-index:50; width:44px; height:44px; display:block;
	background:rgba(255,255,255,0.06); border-radius:8px; display:flex; align-items:center; justify-content:center;
	backdrop-filter: blur(4px); box-shadow:0 2px 8px rgba(0,0,0,0.4);
	pointer-events: none;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

.hint{ text-align:center; font-size:14px; opacity:0.8; margin-top:6px }

/* General mobile optimizations for 3D viewer */
@media (max-width: 768px) {
	.viewport {
		max-width: 98vw !important;
		max-height: 70vh !important;
	}

	.drag-hint {
		width: 36px;
		height: 36px;
	}

	.hint {
		font-size: 11px;
		padding: 0 8px;
	}

	#closeBtn {
		font-size: 13px;
		padding: 8px 14px;
	}

	/* Make side faces smaller on mobile (1/3 smaller = 2/3 of original) */
	.left, .right {
		width: 16.67mm;
	}

	.top, .bottom {
		height: 16.67mm;
	}

	/* Ensure left/right images fill their faces properly */
	.left img, .right img {
		width: 100%;
		height: 100%;
		object-fit: fill;
	}

	/* Adjust top/bottom images for smaller faces */
	.top img {
		width: 17%;
		height: 583%;
		object-fit: fill;
	}

	.bottom img {
		width: 17%;
		height: 583%;
		object-fit: fill;
	}

	/* Adjust positioning for smaller side faces */
	.front {
		transform: translate(-50%,-50%) translateZ(8.335mm);
	}

	.back {
		transform: translate(-50%,-50%) rotateY(180deg) translateZ(8.335mm);
	}

	.left {
		transform: translate(-50%,-50%) rotateY(-90deg) translateZ(49mm);
	}

	.right {
		transform: translate(-50%,-50%) rotateY(90deg) translateZ(49mm);
	}

	.top {
		transform: translate(-50%,-50%) rotateX(90deg) translateZ(90mm);
	}

	.bottom {
		transform: translate(-50%,-50%) rotateX(-90deg) translateZ(90mm);
	}
}

/* PORTRAIT MODE - Mobile phones held vertically */
@media (max-width: 768px) and (orientation: portrait) {
	/* Hide carousel arrows on mobile */
	.carousel-arrow {
		display: none;
	}

	/* Swap hints for mobile */
	.carousel-controls-hint {
		display: none;
	}

	.carousel-controls-hint-mobile {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(255,255,255,0.1);
		padding: 8px 15px;
		border-radius: 5px;
		font-size: 12px;
		z-index: 2;
		text-align: center;
	}

	/* Redesign shelf for vertical scrolling */
	#shelf {
		position: static;
		top: auto;
		transform: none;
		height: 100vh;
		max-height: 100vh;
		flex-direction: column; /* Stack vertically */
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		overflow-y: auto; /* Vertical scrolling */
		overflow-x: hidden;
		padding: 10px;
		gap: 8px;
		background: rgba(0, 0, 0, 0.5);
	}

	/* Resize tapes for portrait */
	.vhs-tape {
		width: 80vw; /* Use viewport width */
		height: 120px; /* Taller for better visibility */
		max-width: 300px;
		min-height: 100px;
	}

	/* Make focal movie larger in portrait mode */
	.vhs-tape.focal {
		width: 85vw; /* Slightly wider than side movies */
		height: 180px; /* Taller than side movies */
		max-width: 350px;
		min-height: 150px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.8);
		border: 2px solid rgba(255,255,255,0.3);
	}

	/* Side movies stay smaller */
	.vhs-tape.side {
		opacity: 0.8;
	}

	/* Adjust spine layout */
	.tape-spine {
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.spine-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.spine-title {
		writing-mode: horizontal-tb; /* Horizontal text */
		transform: none;
		text-align: center;
		width: calc(100% - 80px); /* Remaining width */
		padding: 5px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Hide hover effect on touch devices */
	.vhs-tape:hover {
		transform: none;
	}

	/* Make touch targets larger */
	.vhs-tape:active {
		transform: scale(0.98);
		box-shadow: 0 5px 15px rgba(0,0,0,0.7);
	}

	/* Adjust 3D viewer for portrait */
	.viewport {
		width: 90vw !important;
		height: 50vh !important;
		max-width: 400px;
		max-height: 400px;
	}

	.scene {
		width: 98mm;
		height: 180mm;
	}

	/* Adjust instructions for portrait */
	.instructions {
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		font-size: 12px;
		padding: 8px 12px;
	}

	.hint {
		font-size: 12px;
		padding: 0 10px;
	}

	.drag-hint {
		width: 36px;
		height: 36px;
	}

	/* Reposition close button for portrait */
	#closeBtn {
		top: 10px;
		right: 10px;
		padding: 8px 16px;
		font-size: 14px;
	}

	/* Add a header for shelf */
	#shelf::before {
		content: "VHS Collection";
		font-size: 20px;
		font-weight: bold;
		color: white;
		text-align: center;
		padding: 15px;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		margin-bottom: 10px;
		position: sticky;
		top: 0;
		z-index: 10;
	}
}

/* LANDSCAPE MODE - Mobile phones held horizontally */
@media (max-width: 768px) and (orientation: landscape) {
	/* Hide carousel arrows on mobile */
	.carousel-arrow {
		display: none;
	}

	/* Swap hints for mobile */
	.carousel-controls-hint {
		display: none;
	}

	.carousel-controls-hint-mobile {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(255,255,255,0.1);
		padding: 8px 15px;
		border-radius: 5px;
		font-size: 12px;
		z-index: 2;
		text-align: center;
	}

	#shelf {
		flex-wrap: nowrap; /* Single row */
		overflow-x: auto; /* Horizontal scrolling */
		overflow-y: hidden;
		gap: 4px;
		padding: 10px;
	}

	.vhs-tape {
		width: 80px; /* Narrower for landscape */
		height: 140px;
		flex: 0 0 auto;
	}

	/* Make focal movie larger in landscape mode */
	.vhs-tape.focal {
		width: 110px;
		height: 180px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.8);
		border: 2px solid rgba(255,255,255,0.3);
	}

	/* Side movies stay smaller */
	.vhs-tape.side {
		opacity: 0.8;
	}

	.spine-title {
		font-size: 10px;
		padding: 8px;
	}

	/* Adjust 3D viewer for landscape */
	.viewport {
		width: 60vh !important;
		height: 40vh !important;
	}
}

/* SMALL SCREENS - Extra small phones */
@media (max-width: 480px) and (orientation: portrait) {
	.vhs-tape {
		width: 90vw;
		height: 100px;
	}

	/* Make focal movie larger on small screens too */
	.vhs-tape.focal {
		width: 95vw;
		height: 150px;
		max-width: 380px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.8);
		border: 2px solid rgba(255,255,255,0.3);
	}

	.spine-image {
		width: 70px;
	}

	.spine-title {
		width: calc(100% - 70px);
		font-size: 12px;
	}

	.viewport {
		height: 40vh !important;
	}
}