/* ==========================================
   COMPLETED BOOKS — BOOKSHELVES
   Library 1

   QUICK ADJUSTMENTS:
   - Change --mpp-book-width inside a shelf rule to resize every book on that shelf.
   - Height remains automatic, so differently proportioned book images keep different heights.
   - Change --mpp-shelf-baseline to move one whole shelf up/down.
   - Change --mpp-shelf-start to move one whole row left/right.
   - Change --mpp-slot-gap to alter spacing between books.
========================================== */

.mpp-bookshelf-book {
	--mpp-slot-index: 0;
	--mpp-shelf-baseline: 28%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-group-offset: 0%;
	--mpp-book-width: 1.05%;

	position: absolute;
	z-index: 300;

	display: block;
	width: var(--mpp-book-width);
	height: auto;

	margin: 0;
	padding: 0;

	left:
		calc(
			var(--mpp-shelf-start)
			+ (var(--mpp-slot-index) * var(--mpp-slot-gap))
			+ var(--mpp-group-offset)
		);

	top: var(--mpp-shelf-baseline);

	object-fit: contain;

	/* Bottom-align every upright book to the shelf baseline. */
	transform: translateY(-100%);
	transform-origin: bottom center;

	pointer-events: none;
}

/* Slot number becomes a reusable horizontal index. */

.mpp-bookshelf-book.mpp-slot-1 { --mpp-slot-index: 0; }
.mpp-bookshelf-book.mpp-slot-2 { --mpp-slot-index: 1; }
.mpp-bookshelf-book.mpp-slot-3 { --mpp-slot-index: 2; }
.mpp-bookshelf-book.mpp-slot-4 { --mpp-slot-index: 3; }
.mpp-bookshelf-book.mpp-slot-5 { --mpp-slot-index: 4; }
.mpp-bookshelf-book.mpp-slot-6 { --mpp-slot-index: 5; }
.mpp-bookshelf-book.mpp-slot-7 { --mpp-slot-index: 6; }
.mpp-bookshelf-book.mpp-slot-8 { --mpp-slot-index: 7; }
.mpp-bookshelf-book.mpp-slot-9 { --mpp-slot-index: 8; }
.mpp-bookshelf-book.mpp-slot-10 { --mpp-slot-index: 9; }
.mpp-bookshelf-book.mpp-slot-11 { --mpp-slot-index: 10; }
.mpp-bookshelf-book.mpp-slot-12 { --mpp-slot-index: 11; }
.mpp-bookshelf-book.mpp-slot-13 { --mpp-slot-index: 12; }
.mpp-bookshelf-book.mpp-slot-14 { --mpp-slot-index: 13; }
.mpp-bookshelf-book.mpp-slot-15 { --mpp-slot-index: 14; }
.mpp-bookshelf-book.mpp-slot-16 { --mpp-slot-index: 15; }
.mpp-bookshelf-book.mpp-slot-17 { --mpp-slot-index: 16; }
.mpp-bookshelf-book.mpp-slot-18 { --mpp-slot-index: 17; }
.mpp-bookshelf-book.mpp-slot-19 { --mpp-slot-index: 18; }
.mpp-bookshelf-book.mpp-slot-20 { --mpp-slot-index: 19; }
.mpp-bookshelf-book.mpp-slot-21 { --mpp-slot-index: 20; }
.mpp-bookshelf-book.mpp-slot-22 { --mpp-slot-index: 21; }
.mpp-bookshelf-book.mpp-slot-23 { --mpp-slot-index: 22; }
.mpp-bookshelf-book.mpp-slot-24 { --mpp-slot-index: 23; }

/* ==========================================
   LIBRARY 1 — LEFT BOOKCASE
========================================== */

.mpp-library-1.mpp-bookcase-left.mpp-shelf-1 {
	--mpp-shelf-baseline: 18.4%;
	--mpp-shelf-start: 11%;
	--mpp-slot-gap: 1%;
	--mpp-book-width: 1%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-2 {
	--mpp-shelf-baseline: 27.5%;
	--mpp-shelf-start: 12.8%;
	--mpp-slot-gap: 1.15%;
	--mpp-book-width: 1.15%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3 {
	--mpp-shelf-baseline: 50.2%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.86%;
}

/*
 * Left shelf 3 contains two groups:
 * slots 1–12 use the normal starting point;
 * slots 13–24 restart from index 0 and move to the second group.
 */

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-13 {
	--mpp-slot-index: 0;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-14 {
	--mpp-slot-index: 1;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-15 {
	--mpp-slot-index: 2;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-16 {
	--mpp-slot-index: 3;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-17 {
	--mpp-slot-index: 4;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-18 {
	--mpp-slot-index: 5;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-19 {
	--mpp-slot-index: 6;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-20 {
	--mpp-slot-index: 7;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-21 {
	--mpp-slot-index: 8;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-22 {
	--mpp-slot-index: 9;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-23 {
	--mpp-slot-index: 10;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-3.mpp-slot-24 {
	--mpp-slot-index: 11;
	--mpp-group-offset: 17%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-4 {
	--mpp-shelf-baseline: 61.3%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.00%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-5 {
	--mpp-shelf-baseline: 72.4%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.08%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-6 {
	--mpp-shelf-baseline: 83.5%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.96%;
}

.mpp-library-1.mpp-bookcase-left.mpp-shelf-7 {
	--mpp-shelf-baseline: 94.6%;
	--mpp-shelf-start: 2.4%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.08%;
}

/* ==========================================
   LIBRARY 1 — RIGHT BOOKCASE
========================================== */

.mpp-library-1.mpp-bookcase-right.mpp-shelf-1 {
	--mpp-shelf-baseline: 28%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.86%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-2 {
	--mpp-shelf-baseline: 39.1%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.92%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-3 {
	--mpp-shelf-baseline: 50.2%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.92%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-4 {
	--mpp-shelf-baseline: 61.3%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.05%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-5 {
	--mpp-shelf-baseline: 72.4%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.05%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-6 {
	--mpp-shelf-baseline: 83.5%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 1.05%;
}

.mpp-library-1.mpp-bookcase-right.mpp-shelf-7 {
	--mpp-shelf-baseline: 94.6%;
	--mpp-shelf-start: 63.8%;
	--mpp-slot-gap: 1.02%;
	--mpp-book-width: 0.92%;
}


/* ==========================================
   PER-SHELF SIZE GUIDE

   Change only --mpp-book-width in the relevant shelf rule.

   Example:
   .mpp-library-1.mpp-bookcase-left.mpp-shelf-1 {
       --mpp-book-width: 0.82%;
   }

   Smaller percentage = shorter/narrower books.
   Larger percentage = taller/wider books.
   The image height stays automatic.
========================================== */