diff --git a/index.html b/index.html
index cea11e1..7814f60 100644
--- a/index.html
+++ b/index.html
@@ -1314,6 +1314,9 @@
console.log('Applying theme:', theme);
const characterSides = document.querySelectorAll('.character-side');
+ // Remove any existing theme classes
+ document.body.classList.remove('library-theme');
+
if (theme === 'none') {
characterSides.forEach(element => {
element.style.display = 'none';
@@ -1323,6 +1326,8 @@
}
if (theme === 'library') {
+ // Add library theme class for CSS targeting
+ document.body.classList.add('library-theme');
// Use random images from user's library
await applyLibraryTheme(characterSides);
localStorage.setItem('selectedTheme', theme);
diff --git a/src/styles/styles.css b/src/styles/styles.css
index dacc8b2..8921df4 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -6628,6 +6628,40 @@ button#start-mirror-btn:disabled {
height: 300px;
}
+/* Library Theme - Stacked Layout */
+.library-theme .character-side {
+ width: 120px !important;
+ height: 160px !important;
+ background-size: cover !important;
+ border: 2px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.library-theme .character-side.left {
+ left: 10px !important;
+ transform: none !important;
+}
+
+.library-theme .character-side.right {
+ right: 10px !important;
+ transform: none !important;
+}
+
+/* Stack left column from top */
+.library-theme .character-side.left:nth-of-type(1) { top: 20px !important; }
+.library-theme .character-side.left:nth-of-type(3) { top: 190px !important; }
+.library-theme .character-side.left:nth-of-type(5) { top: 360px !important; }
+.library-theme .character-side.left:nth-of-type(7) { top: 530px !important; }
+.library-theme .character-side.left:nth-of-type(9) { top: 700px !important; }
+
+/* Stack right column from top */
+.library-theme .character-side.right:nth-of-type(2) { top: 20px !important; }
+.library-theme .character-side.right:nth-of-type(4) { top: 190px !important; }
+.library-theme .character-side.right:nth-of-type(6) { top: 360px !important; }
+.library-theme .character-side.right:nth-of-type(8) { top: 530px !important; }
+.library-theme .character-side.right:nth-of-type(10) { top: 700px !important; }
+
/* Background Characters */
.character-background {
position: absolute;