/* --- 1. CSS VARIABLES --- */
:root {
    --book-width: 420px;
    --book-height: 600px;
    --text-color: #000;
    --stand-display: none;
    --bg-image: linear-gradient(to bottom, #2c3e50, #000000);
    --cover-color: #1a237e;
    --cover-text-color: #ffffff;
}

/* --- 2. BACKGROUND THEMES --- */
.bg-wood {
    --bg-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'), linear-gradient(to bottom, #5d4037, #3e2723);
}

.bg-temple {
    --bg-image: radial-gradient(circle at center, #ffecb3 0%, #ffca28 40%, #ff6f00 100%);
}

.bg-midnight {
    --bg-image: linear-gradient(to bottom, #141e30, #243b55);
}

.bg-nature {
    --bg-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.bg-library {
    --bg-image: repeating-linear-gradient(90deg, #2b1b17 0px, #2b1b17 20px, #1a0f0d 20px, #1a0f0d 40px);
}

.bg-minimal {
    --bg-image: linear-gradient(#e0e0e0, #bdbdbd);
}

/* --- 3. 3D STAGE (Reader) --- */
.scene {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85%;
    perspective: 2000px;
    margin-top: 40px;
}

.book-stand {
    display: var(--stand-display);
    position: absolute;
    bottom: 8%;
    width: 900px;
    height: 120px;
    background: linear-gradient(90deg, #5D4037, #8D6E63, #5D4037);
    border-radius: 5px;
    transform: perspective(1000px) rotateX(25deg);
    border: 1px solid #eee;
    overflow: hidden;
    background-size: 20px 20px;
}

.page.cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: none;
    background-color: var(--cover-color) !important;
    color: var(--cover-text-color) !important;
}

.page.cover h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.page.cover h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    opacity: 0.9;
}

.page-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-footer {
    margin-top: auto;
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

/* Studio Preview Specifics */
.studio-preview {
    background: var(--bg-image);
    background-size: cover;
    transition: background 0.5s ease;
}

/* --- MODE SPECIFIC STYLES --- */
/* DHARMIK */
body.mode-dharmik,
.preview-container.mode-dharmik {
    --book-width: 380px;
    --book-height: 560px;
    --text-color: #6a1b9a;
    --stand-display: block;
}

.mode-dharmik .page {
    font-family: 'Martel', serif;
    border-left: 2px solid #ffb300;
    border-right: 2px solid #ffb300;
}

.mode-dharmik .cover {
    border: 5px solid #ffc107;
}

/* NORMAL */
body.mode-normal,
.preview-container.mode-normal {
    --book-width: 400px;
    --book-height: 600px;
    --text-color: #222;
}

.mode-normal .page {
    font-family: 'Merriweather', serif;
    line-height: 1.6;
}

/* DIARY */
body.mode-diary,
.preview-container.mode-diary {
    --book-width: 360px;
    --book-height: 580px;
    --text-color: #1a237e;
}

.mode-diary .page {
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    background-image: radial-gradient(#ccc 1.5px, transparent 1.5px);
    background-size: 25px 25px;
}

.diary-date {
    font-family: monospace;
    font-size: 0.9rem;
    color: #888;
    text-align: right;
    border-bottom: 2px dashed #ddd;
    margin-bottom: 15px;
}

/* --- 5. LIBRARY VIEW (3D Cards) --- */
.library-book {
    width: 140px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    margin-bottom: 30px;
}

.book-container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

.library-book:hover .book-container,
.library-book.selected .book-container {
    transform: scale(1.05) rotateX(5deg) rotateY(-10deg);
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3);
}

.library-book.selected .book-container {
    outline: 3px solid var(--primary);
    outline-offset: 5px;
}

.cover-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cover-color);
    color: var(--cover-text-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    backface-visibility: hidden;
    z-index: 2;
    box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 2px 5px 5px 2px;
}

.cover-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
    transform: translateZ(-10px);
    z-index: 1;
    border-radius: 2px 5px 5px 2px;
}

.cover-front h2 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-family: 'Cinzel', serif;
    line-height: 1.2;
}

.cover-front p {
    font-size: 0.7rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.cover-front .icon {
    font-size: 2rem;
    margin-top: 5px;
}

/* Spine effect */
.book-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 5;
    transform: translateX(0);
    border-radius: 2px 0 0 2px;
}