/* =====================================================================
   சித்தப்பித்தன் — நூல் (page flip)

   அமைப்பு:
     .book        — காட்சிக் களம், perspective இங்கே
     .book-inner  — நூலின் உடல் (இரு பக்க அகலம்)
     .leaf        — ஒரு ஏடு; வலதுபுறப் பாதியில் நிற்கிறது,
                    இடது விளிம்பைச் சுற்றிச் சுழல்கிறது
     .leaf-front  — ஒற்றைப்படைப் பக்கம் (நமை நோக்கி)
     .leaf-back   — இரட்டைப்படைப் பக்கம் (180° திருப்பி வைத்தது)

   .turned சேர்ந்தால் ஏடு இடதுபக்கம் சாய்கிறது — அப்போது அதன்
   பின்பக்கம் இடது பக்கமாகத் தெரிகிறது. உண்மையான நூலின் அதே இயக்கம்.

   JavaScript இல்லாவிட்டால் `.ready` வராது — அப்போது எல்லாப்
   பக்கங்களும் ஒன்றன் கீழ் ஒன்றாக, சாதாரணமாகத் தெரியும்.
   உள்ளடக்கம் ஒருபோதும் மறையக் கூடாது.
   ===================================================================== */

/* --------------------- நூல் காட்சியின் தலைப்புப் பட்டை ---------------------
   நூலுக்குத் திரை முழுவதும் வேண்டும். எனவே தொகுப்பின் பெயர் இங்கே
   ஒரு சிறு வரியாக மட்டும் — முழுத் தலைப்பும் முன்னுரையும் நூலின்
   அட்டைப் பக்கத்தில். */
.book-topbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}
.book-topbar .container {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
    padding-block: .55rem;
}
.book-topbar .bt-name {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--ink); font-weight: 600; font-size: .95rem;
}
.book-topbar .bt-name i { color: var(--brand); }
.book-topbar .bt-n { color: var(--muted); font-size: .82rem; }

/* நூல் காட்சியில் மேலும் கீழும் இடம் குறைவாக — உயரம் நூலுக்கு */
.section-book { padding-block: 1rem 1.6rem; }

.book-wrap { max-width: 1240px; margin-inline: auto; }

/* ------------------- JavaScript இல்லாதபோது ------------------- */
.book:not(.ready) .leaf {
    display: block; position: static; width: auto; height: auto;
    transform: none; margin-bottom: 1.2rem;
}
.book:not(.ready) .leaf-face {
    position: static; transform: none; backface-visibility: visible;
    box-shadow: none; border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 1.2rem;
}
.book:not(.ready) + .book-bar,
.book:not(.ready) ~ .book-hint { display: none; }

/* --------------------------- களம் --------------------------- */
.book.ready {
    position: relative;
    perspective: 2600px;
    /* திரையின் பெரும்பகுதி — தலைப்புப் பட்டைக்கும் புரட்டும்
       பொத்தான்களுக்கும் மட்டும் இடம் விட்டு மீதி நூலுக்கு.
       பக்கத்துக்குள் நீளமான உள்ளடக்கம் தனியே உருளும். */
    height: clamp(520px, calc(100vh - 250px), 900px);
    margin-bottom: 1rem;
}
.book.ready .book-inner {
    position: absolute; inset-block: 0;
    inset-inline-start: 50%;
    width: min(50%, 560px);
    transform-style: preserve-3d;
}

/* நூலின் நடுக்கோடு — கட்டுத் தையல் */
.book.ready .book-inner::before {
    content: '';
    position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 26px; margin-inline-start: -13px;
    background: linear-gradient(90deg,
        transparent, rgba(0, 0, 0, .13) 42%, rgba(0, 0, 0, .13) 58%, transparent);
    pointer-events: none; z-index: 999;
}

/* --------------------------- ஏடு --------------------------- */
.book.ready .leaf {
    position: absolute; inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .75s cubic-bezier(.35, .02, .25, 1);
}
.book.ready .leaf.turned { transform: rotateY(-180deg); }

.book.ready .leaf-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--surface);
    overflow: hidden;
}
.book.ready .leaf-front {
    border-radius: 0 10px 10px 0;
    box-shadow: inset 14px 0 24px -18px rgba(0, 0, 0, .55),
                4px 4px 18px -8px rgba(0, 0, 0, .3);
}
.book.ready .leaf-back {
    transform: rotateY(180deg);
    border-radius: 10px 0 0 10px;
    box-shadow: inset -14px 0 24px -18px rgba(0, 0, 0, .55),
                -4px 4px 18px -8px rgba(0, 0, 0, .3);
}

/* --------------------------- பக்கம் --------------------------- */
.book .page {
    height: 100%; overflow: auto;
    padding: 2.4rem 2.4rem 2.8rem;
    display: flex; flex-direction: column;
}
.book .page-no {
    position: absolute; inset-block-end: .8rem; inset-inline-end: 1.2rem;
    color: var(--muted); font-size: .78rem;
}
.book .leaf-back .page-no { inset-inline-end: auto; inset-inline-start: 1.2rem; }

/* அட்டை / முடிவுப் பக்கம் */
.book .page-cover {
    margin: auto; text-align: center; padding: 1rem;
}
.book .page-cover i { font-size: 2.4rem; color: var(--brand); display: block; margin-bottom: 1rem; }
.book .page-cover h2 {
    font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700;
    color: var(--ink); margin: 0 0 .6rem;
}
.book .page-cover .pc-desc {
    color: var(--ink-soft); font-family: var(--font-read);
    line-height: 1.9; margin: 0 0 .8rem;
}
.book .page-cover .pc-count { color: var(--muted); font-size: .88rem; margin: 0; }
.book .page-cover .pc-count i { color: var(--brand); margin-inline-end: .2rem; }
.book .page-end p { color: var(--ink-soft); font-family: var(--font-read); margin: 0 0 1rem; }

/* முன்னுரை — அட்டைப் பக்கத்தில், தலைப்புக்குக் கீழ். இடதுபுறம்
   நேர்த்தியாக, நடுவில் அல்ல: பத்திகளை நடுவில் அடுக்கினால் படிக்கக்
   கடினம். நீளமானால் பக்கமே உருளும். */
.book .page-cover .pc-intro {
    margin-top: 1.4rem; padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    text-align: start;
    font-family: var(--font-read);
    font-size: .95rem; line-height: 1.95;
    color: var(--ink-soft);
}
.book .page-cover .pc-intro strong { color: var(--ink); }

/* முன்னுரை இருந்தால் அட்டை மேலிருந்தே தொடங்கட்டும் — நடுவில்
   வைத்தால் நீளமான உரையில் தலைப்பு மேலே போய் மறைந்துவிடும். */
.book .page-cover:has(.pc-intro) { margin: 0; }

/* ஒரு படைப்பு */
.book .page-piece { display: flex; flex-direction: column; min-height: 100%; }
.book .page-piece header {
    display: flex; align-items: baseline; gap: .55rem;
    padding-bottom: .7rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.book .pp-no {
    flex: 0 0 auto; display: grid; place-items: center;
    min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem;
    border-radius: 99px; background: var(--brand-soft); color: var(--brand);
    font-size: .76rem; font-weight: 700;
}
.book .page-piece h3 {
    font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 0;
}
.book .pp-body {
    font-family: var(--font-read);
    font-size: 1.02rem; line-height: 2; color: var(--ink);
}
.book .pp-meaning {
    margin-top: 1rem; padding: .7rem .9rem;
    background: var(--bg-alt); border-inline-start: 3px solid var(--brand);
    border-radius: 0 8px 8px 0;
    font-family: var(--font-read);
    color: var(--ink-soft); font-size: .9rem; line-height: 1.85;
}
.book .pp-open { margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .82rem; }
.book .pp-open:hover { color: var(--brand); }

/* --------------------------- கருவிகள் --------------------------- */
.book-bar {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: .4rem;
}
.bk-btn {
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.bk-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.bk-btn:disabled { opacity: .35; cursor: default; }
.bk-count { color: var(--muted); font-size: .88rem; min-width: 6rem; text-align: center; }
.book-hint { text-align: center; color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }

/* --------------------------- கைபேசி ---------------------------
   ஒரே பக்கம் மட்டும். நூல் நகர்ந்து, இப்போதைய பாதி திரையை நிரப்பும். */
@media (max-width: 767.98px) {
    .book.ready { height: clamp(480px, calc(100vh - 210px), 780px); }
    .book.ready .book-inner {
        inset-inline-start: 0; width: 100%;
        transition: transform .75s cubic-bezier(.35, .02, .25, 1);
    }
    .book.ready.on-left .book-inner { transform: translateX(100%); }
    .book.ready .book-inner::before { display: none; }
    .book .page { padding: 1.4rem 1.2rem 2.2rem; }
    .book.ready .leaf-front, .book.ready .leaf-back { border-radius: 10px; }
}

/* அசைவு வேண்டாம் என்றவருக்கு — புரட்டல் உடனடி */
@media (prefers-reduced-motion: reduce) {
    .book.ready .leaf, .book.ready .book-inner { transition: none; }
}

/* அச்சு — நூலாக அல்ல, வரிசையாக */
@media print {
    .book.ready { height: auto; perspective: none; }
    .book.ready .book-inner { position: static; width: auto; transform: none; }
    .book.ready .leaf { position: static; transform: none !important; }
    .book.ready .leaf-face {
        position: static; transform: none !important;
        backface-visibility: visible; box-shadow: none;
        break-inside: avoid; page-break-inside: avoid;
    }
    .book .page { height: auto; overflow: visible; }
    .book-bar, .book-hint, .pp-open { display: none !important; }
}