/* Divya Granth Mantra Sangrah · restrained forest green + parchment book. */
*{box-sizing:border-box}html{background:#0e271d}body{margin:0;background:radial-gradient(ellipse at 50% 24%,#284738,#10281e 72%,#0b2219);font-family:Georgia,'Noto Serif Devanagari',serif;color:#e9d7b1;min-height:100vh}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #edd19a;outline-offset:2px}
.mantraHeader{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#12281e;border-bottom:1px solid #bd9b6555;padding:12px max(14px,4vw);min-height:79px}
.mantraBack{width:48px;height:48px;border:1px solid #b09c73;border-radius:15px;display:grid;place-items:center;background:#1c4936;color:#f0d6a4;text-decoration:none;font-size:25px}
.mantraHeader>div{flex:1}.mantraHeader strong{font:400 29px Georgia,serif;color:#ebcd9a}.mantraHeader small{display:block;letter-spacing:2px;font:10px Arial,sans-serif;color:#b9c7b5;margin-top:4px}.mantraLibrary{display:inline-block;padding:14px 6px;color:#e0c68f;font:13px Arial,sans-serif;text-decoration:none}
main{max-width:1110px;margin:auto;padding:12px 18px 46px}.mantraHero{text-align:center;margin:9px auto 20px}.mantraHero small{font:11px Arial,sans-serif;letter-spacing:2.8px;color:#ceb180}.mantraHero h1{font:400 clamp(30px,5vw,45px) 'Noto Serif Devanagari',serif;color:#f1d8a9;margin:11px auto}.mantraHero p{font:13px Arial,sans-serif;color:#bbc4b2}
.mantraSelect{max-width:1040px;display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 auto 12px}.mantraSelect>label{flex:1;display:grid;gap:7px;font:12px Arial,sans-serif;color:#decda8;min-width:0}.mantraSelect select{max-width:100%;padding:12px;background:#f1e3c4;border:1px solid #ad9367;color:#224b37;border-radius:11px}.mantraPickActions{display:flex;flex-wrap:wrap;gap:8px}.mantraPickActions button,.mantraTools button{font:13px Arial,sans-serif;background:#21503b;color:#f1dab0;border:1px solid #b79e6d88;border-radius:12px;padding:12px 13px}
#status{max-width:1040px;margin:0 auto 12px;text-align:center;font:12px/1.7 Arial,sans-serif;color:#d2c7ac;min-height:17px}
.mantraBook.book,.mantraBook.book.dg-physical-book{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;height:490px;min-height:490px;max-width:1040px;margin:auto;border:9px solid #805430;border-radius:21px;overflow:hidden;background:#362a1c;box-shadow:inset 0 0 0 3px #bb9062,0 23px 50px #0007;position:relative}
.mantraBook.book>.page{display:flex;flex-direction:column;overflow:hidden;min-width:0;height:472px;min-height:472px;padding:0!important;background:radial-gradient(ellipse at 42% 28%,#fff1d5,#edd5a9 95%);color:#403022;border:1px solid #ba9b72}
.mantraBook.book>.page:first-child{box-shadow:inset -15px 0 25px #422b1e24}
.mantraBook.book.dg-physical-book:before{display:block!important;left:calc(50% - 8px)!important;width:16px!important;background:linear-gradient(90deg,#46352696,#fff1ca52,#0004,#fff1ca70)!important}
.mantraPaperScroll{padding:31px 30px 17px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ad9062 transparent}
.mantraPaperScroll .kicker{font:10px Georgia,serif;letter-spacing:2px;color:#96734e}
.mantraPaperScroll h2{color:#71482d;font:400 clamp(19px,2.7vw,27px) 'Noto Serif Devanagari',serif;margin:18px auto 24px}
.mantraOriginal{white-space:pre-line;font:500 clamp(19px,2.45vw,25px)/2 'Noto Serif Devanagari',serif;color:#362719;overflow-wrap:anywhere}
.mantraMeaning{font:clamp(17px,2.2vw,22px)/1.95 'Noto Serif Devanagari',serif;color:#342a22;white-space:pre-line}
.mantraMeaningEnglish{font:clamp(15px,1.8vw,19px)/1.8 Georgia,serif;color:#574633}
.mantraSource{display:inline-flex;margin-top:17px;font:12px Arial,sans-serif;color:#286145;overflow-wrap:anywhere}
.mantraFoot{height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #baa27c;background:#e7d0a8;padding:7px 14px;color:#806444;font:12px Georgia,serif}
.paperPlay{width:38px;height:38px;border:0;border-radius:50%;background:#266044;color:#faf0d4;font:19px Arial,sans-serif;display:grid;place-items:center}.paperPlay[aria-pressed="true"]{background:#a76c37}
.mantraNavigation,.navigation{max-width:1040px;margin:18px auto 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.mantraNavigation button{border:1px solid #bda375;padding:12px 19px;background:#1e4733;color:#edd8ad;border-radius:26px;font:14px Arial,sans-serif}.mantraNavigation span{font:13px Arial,sans-serif;color:#e1d1b0}
.mantraTools{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:8px auto 17px}
.mantraMala,.mantraPlayer,.mantraAmbience,.mantraEdition{max-width:1040px;border:1px solid #b5a0706a;border-radius:17px;background:#17382a;margin:14px auto;padding:17px;color:#e7d7b6}
.malaHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.malaHead small{font:11px Arial,sans-serif;letter-spacing:2px;color:#d6b87e}.malaHead h2,.mantraPlayer h2{font:400 24px Georgia,serif;color:#f2d5a1;margin:7px 0}.malaHead p,.mantraPlayerHead p,.mantraAmbience p{font:12px/1.6 Arial,sans-serif;color:#bfc6b4;margin:4px 0}.malaCount{text-align:center;min-width:95px}.malaCount strong{font:40px Georgia,serif;color:#f2d5a4;display:block}.malaCount span{font:12px Arial,sans-serif;color:#c9c7b7}
.malaBar{background:#455749;height:8px;border-radius:20px;overflow:hidden;margin:12px auto}.malaBar span{display:block;width:0;height:100%;background:#dfbf84;border-radius:20px;transition:width .2s}
.malaControls{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.malaControls label{font:12px Arial,sans-serif;display:grid;gap:5px}.malaControls select,.mantraVoice select,.mantraAmbience select{background:#eee2c8;color:#294637;border:1px solid #af986f;border-radius:9px;padding:10px;max-width:100%}.malaControls button,.mantraPlayActions button,.mantraAmbience button{background:#285641;color:#ecd9b4;border:1px solid #bfa77180;border-radius:10px;min-height:41px;padding:9px 16px;font:13px Arial,sans-serif}
.malaControls .malaTap{background:#dcc088;color:#19382a;font-weight:bold}.mantraMala #malaMessage{color:#c8c7b7;font:12px Arial,sans-serif;margin:11px 0 0}
.mantraPlayerHead{display:flex;justify-content:space-between;gap:12px;align-items:center}.mantraPlayerHead span{font:31px Georgia,serif;color:#d3b07c}.mantraPlayActions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:14px 0}.mantraPlayActions button{min-width:0;padding:9px!important}.mantraPlayActions button:nth-child(2){background:#dac08a;color:#1b3a2b;font-weight:bold}
.mantraVoice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.mantraVoice label{font:11px Arial,sans-serif;display:grid;gap:8px;min-width:0}.mantraVoice input{width:100%;margin:10px 0;accent-color:#e8ca8e}.mantraVoiceNote{color:#c4ccb8;font:11px/1.65 Arial,sans-serif;margin:13px 0 0}
.mantraAmbience{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.mantraAmbience strong{font:18px Georgia,serif;color:#e9ce9f}.mantraAmbience p{flex-basis:100%;text-align:center}.mantraAmbience label{display:flex;align-items:center;gap:8px;font:12px Arial,sans-serif}.mantraAmbience input{accent-color:#e7c287;width:110px}
.mantraEdition{font:12px/1.8 Arial,sans-serif;background:#122f23;color:#bcc6b8}.mantraEdition strong{color:#e5c388}.mantraEdition p{margin:8px 0}
body.mantraDark .mantraBook.book .page{background:radial-gradient(ellipse at 45% 25%,#40413a,#242a24 92%);color:#f4e4c6;border-color:#6e604e}body.mantraDark .mantraOriginal,body.mantraDark .mantraMeaning,body.mantraDark .mantraMeaningEnglish{color:#f1e3c3}body.mantraDark .mantraPaperScroll h2{color:#e8c18c}body.mantraDark .mantraPaperScroll .kicker{color:#c7a87b}body.mantraDark .mantraFoot{background:#252b27;border-color:#807051;color:#dec5a0}body.mantraDark .mantraSource{color:#c9a96c}
@media(max-width:760px){
.mantraHeader{min-height:71px;padding:10px 12px}.mantraHeader strong{font-size:22px}.mantraHeader small{font-size:9px}.mantraLibrary{display:none}.mantraBack{width:42px;height:42px}
main{padding:9px 9px 33px}.mantraHero h1{font-size:29px}.mantraHero p{font-size:11px}.mantraSelect{gap:8px;align-items:stretch}.mantraSelect>label{font-size:11px}.mantraPickActions{flex-direction:column;gap:5px;justify-content:end}.mantraPickActions button{padding:8px;font-size:10px}
.mantraBook.book,.mantraBook.book.dg-physical-book{height:420px!important;min-height:420px!important;border-width:7px!important;border-radius:18px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.mantraBook.book>.page{height:406px!important;min-height:406px!important}.mantraPaperScroll{padding:17px 9px 11px}.mantraPaperScroll .kicker{font-size:8px;letter-spacing:.6px}.mantraPaperScroll h2{font-size:15px!important;margin:13px auto}.mantraOriginal{font-size:14px;line-height:1.8}.mantraMeaning{font-size:12px;line-height:1.7}.mantraMeaningEnglish{font-size:11px;line-height:1.65}.mantraSource{font-size:9px}.mantraFoot{height:46px;flex-basis:46px;padding:5px 7px;font-size:10px}.paperPlay{width:33px;height:33px;font-size:16px}
.mantraNavigation{gap:6px}.mantraNavigation button{font-size:12px;padding:10px 9px}.mantraNavigation span{font-size:12px}.mantraTools button{padding:10px;font-size:11px}
.mantraMala,.mantraPlayer,.mantraAmbience,.mantraEdition{padding:13px}.malaHead h2,.mantraPlayer h2{font-size:20px}.malaCount strong{font-size:32px}.mantraPlayActions{grid-template-columns:repeat(2,minmax(0,1fr))}.mantraVoice{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mantraVoice select{width:100%;min-width:0}.malaControls{gap:7px}.malaControls button{font-size:12px;padding:9px 11px}
}
@media(max-width:380px){.mantraPaperScroll{padding:15px 7px 8px}.mantraOriginal{font-size:12px}.mantraMeaning{font-size:11px}}
@media(prefers-reduced-motion:reduce){.mantraBook *{scroll-behavior:auto}}

/* Always keep the narration panel in document flow, never floating over pages. */
.mantraReader .mantraPlayer{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important}

/* 2026-11 layout fix: on phones the Save/Dark actions sit on their own row
   instead of floating on top of the prayer picker. */
@media(max-width:700px){
 .mantraSelect{flex-wrap:wrap}
 .mantraSelect>label{flex:1 1 100%}
 .mantraPickActions{flex-direction:row!important;width:100%}
 .mantraPickActions button{flex:1;font-size:13px!important;padding:10px 12px!important}
}