:root{
 --bg:#fbf7f0;
 --bg2:#f4ecdf;
 --card:#fffdf9;
 --ink:#33312e;
 --ink-soft:#6b665e;
 --blue:#35507a;
 --blue-deep:#26385a;
 --gold:#c69a3a;  /* one elegant amber-gold used app-wide */
 --gold-soft:#e6d3a3;
 --line:#e8dfce;
 --bead:#d9cdb4;
 --bead-done:#c69a3a;
 --bead-active:#35507a;
 --shadow:0 10px 40px -12px rgba(38,56,90,.28);
 --radius:22px;
 --ps:1; /* prayer-text size multiplier, set by the A-/A+ control */
 --accent:#35507a; /* seasonal primary, defaults to Marian blue, set by liturgical season */
 --accent-deep:#26385a;
 --accent-glow:198,154,58; /* rgb used for the glowing today dot */
 --maxw:600px; /* main column width, grows on wide screens */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:auto;font-size:clamp(16px, 14.9px + 0.28vw, 19px);}
body{
 font-family:'Inter',system-ui,sans-serif;
 color:var(--ink);
 background:
 radial-gradient(1200px 600px at 50% -10%, #fffdf8 0%, rgba(255,253,248,0) 60%),
 radial-gradient(900px 500px at 90% 110%, #eef1f7 0%, rgba(238,241,247,0) 55%),
 linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
 background-attachment:fixed;
 min-height:100dvh;
 display:flex;flex-direction:column;align-items:center;
 padding:0 16px 26px;
 overflow-x:hidden;overflow-y:auto;
}
/* Roomy screens: center the column vertically for a calm, balanced feel */
@media(min-width:640px) and (min-height:820px){
 body{justify-content:center;padding-top:8px;}
}
.ml{font-family:'Noto Sans Malayalam',sans-serif;}
/* Keep every Malayalam label/title in the same Noto Sans Malayalam as the top bar */
html[lang="ml"] .section-label,
html[lang="ml"] .mystery-title,
html[lang="ml"] .mystery-verse,
html[lang="ml"] .prayer-name,
html[lang="ml"] .counter-line,
html[lang="ml"] .progress-meta,
html[lang="ml"] .stat .l{font-family:'Noto Sans Malayalam',sans-serif;}
.ta{font-family:'Noto Sans Tamil',sans-serif;}
/* ---------- Day / Night theme ---------- */
body.dark{
 --bg:#14161d; --bg2:#191c24; --card:#1f232e; --ink:#eae6dc; --ink-soft:#9d988c;
 --line:#343843; --gold:#dcb551; --gold-soft:#6d5f36; --bead:#3b3e49;
 --shadow:0 12px 44px -14px rgba(0,0,0,.7);
}
body.dark{
 background:
 radial-gradient(1200px 600px at 50% -10%, #1e2434 0%, rgba(0,0,0,0) 60%),
 radial-gradient(900px 500px at 90% 110%, #181b25 0%, rgba(0,0,0,0) 55%),
 linear-gradient(180deg, #14161d 0%, #0f1117 100%);
}
body.dark .meditation-top{background:linear-gradient(180deg,#2a2716,#231f11);border-color:#4c4327;color:#ece2c0;}
body.dark .mystery-title{color:var(--accent);}
body.dark .theme-toggle,body.dark .lang-select,body.dark .btn-back,body.dark .fontctl button,body.dark .chip,body.dark .stat,body.dark .fb-modal,body.dark .fb-modal textarea,body.dark .fb-modal input{background-color:var(--card);}
body.dark .lang-select{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239d988c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
 border:1px solid var(--line);background:var(--card);border-radius:999px;cursor:pointer;color:var(--ink-soft);
 transition:border-color .2s,color .2s;}
.theme-toggle:hover{border-color:var(--gold-soft);color:var(--gold);}
.theme-toggle svg{width:18px;height:18px;}
/* Tamil script sizing (mirrors the Malayalam rules) */
.chip.ta{font-family:'Noto Sans Tamil',sans-serif;}
.mystery-title.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:1.22rem;line-height:1.4;}
.prayer-name.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:1rem;}
.prayer-text.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:calc(1.02rem * var(--ps));line-height:1.95;}
.meditation.ta{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;}
.meditation-top.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:calc(1rem * var(--ps));line-height:1.95;}
.fb-modal.ta h2,.fb-modal.ta p,.fb-modal.ta textarea{font-family:'Noto Sans Tamil',sans-serif;}
/* Announcement / seasonal greeting banner */
.announce{width:100%;max-width:var(--maxw);display:none;align-items:flex-start;gap:12px;
 background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;
 border-radius:14px;padding:12px 14px;margin:12px 0 0;box-shadow:0 8px 22px -12px rgba(0,0,0,.5);
 font-size:.9rem;line-height:1.5;}
.announce.show{display:flex;}
.announce #announceMsg{flex:1;}
.announce.ml #announceMsg{font-family:'Noto Sans Malayalam',sans-serif;}
.announce.ta #announceMsg{font-family:'Noto Sans Tamil',sans-serif;}
.announce-x{background:rgba(255,255,255,.2);border:none;color:#fff;width:26px;height:26px;flex:none;
 border-radius:50%;cursor:pointer;position:relative;font-size:0;padding:0;margin-top:1px;}
.announce-x::before,.announce-x::after{content:"";position:absolute;top:50%;left:50%;
 width:12px;height:2px;background:#fff;border-radius:2px;}
.announce-x::before{transform:translate(-50%,-50%) rotate(45deg);}
.announce-x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.announce-x:hover{background:rgba(255,255,255,.34);}
.resume{width:100%;max-width:var(--maxw);display:none;align-items:center;gap:12px;flex-wrap:wrap;
 background:var(--card);border:1px solid var(--gold-soft);border-radius:14px;padding:11px 14px;margin:12px 0 0;
 font-size:.92rem;color:var(--ink);box-shadow:0 6px 18px -12px rgba(0,0,0,.35);}
.resume.show{display:flex;}
.resume #resumeText{flex:1;min-width:150px;}
.resume.ml #resumeText{font-family:'Noto Sans Malayalam',sans-serif;}
.resume.ta #resumeText{font-family:'Noto Sans Tamil',sans-serif;}
.resume-btns{display:flex;gap:8px;}
.resume-btns button{font:inherit;font-weight:600;font-size:.86rem;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;}
#resumeYes{background:var(--accent);color:#fff;}
#resumeNo{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
/* ---------- Top bar ---------- */
header{
 width:100%;max-width:var(--maxw);
 display:flex;align-items:center;justify-content:space-between;
 gap:10px;padding:18px 4px 10px;
}
.brand{display:flex;align-items:center;gap:9px;}
.brand .cross{
 width:26px;height:26px;color:var(--gold);flex:none;
 filter:drop-shadow(0 2px 3px rgba(198,154,58,.35));
}
.brand h1{
 font-family:'Cormorant Garamond',serif;font-weight:600;
 font-size:1.42rem;letter-spacing:.3px;color:var(--blue-deep);line-height:1;
}
.brand span{display:block;font-family:'Inter';font-weight:500;font-size:.58rem;
 letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px;}
.top-actions{display:flex;align-items:center;gap:8px;}
.lang-select{
 appearance:none;border:1px solid var(--line);background:var(--card);
 color:var(--ink);font-family:inherit;font-size:.8rem;font-weight:500;
 padding:8px 30px 8px 12px;border-radius:999px;cursor:pointer;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b665e' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
 background-repeat:no-repeat;background-position:right 10px center;
 transition:border-color .2s,box-shadow .2s;
}
.lang-select:hover{border-color:var(--gold-soft);}
/* ---------- Mystery selector chips ---------- */
.mode-toggle{
 width:100%;max-width:var(--maxw);display:flex;gap:6px;padding:14px 16px 4px;
}
.mode-toggle button{
 flex:1;font:inherit;font-weight:600;font-size:.84rem;cursor:pointer;
 border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
 border-radius:999px;padding:9px 10px;transition:.15s;
}
.mode-toggle button.on{
 background:var(--accent);color:#fff;border-color:var(--accent);
 box-shadow:0 4px 12px -6px var(--accent);
}
.mode-toggle.ml button{font-family:'Noto Sans Malayalam',sans-serif;}
.mode-toggle.ta button{font-family:'Noto Sans Tamil',sans-serif;}
.mysteries{
 width:100%;max-width:var(--maxw);display:flex;gap:7px;overflow-x:auto;
 padding:6px 16px 14px;scroll-padding-left:16px;scrollbar-width:none;
}
.mysteries::-webkit-scrollbar{display:none;}
.chip{
 flex:none;border:1px solid var(--line);background:var(--card);
 border-radius:999px;padding:8px 15px;font-size:.78rem;font-weight:500;
 color:var(--ink-soft);cursor:pointer;white-space:nowrap;
 transition:all .2s;
}
.chip:hover{border-color:var(--gold-soft);color:var(--ink);}
.chip.active{
 background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
 color:#fff;border-color:var(--accent-deep);
 box-shadow:0 6px 16px -6px rgba(38,56,90,.5);
}
.chip.today::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
 background:var(--gold);margin-right:7px;vertical-align:middle;position:relative;top:-1.5px;
 animation:todayPulse 2.2s ease-in-out infinite;}
.chip.active.today::before{background:#fff;animation:todayPulseLight 2.2s ease-in-out infinite;}
@keyframes todayPulse{
 0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-glow),.16);}
 50%{box-shadow:0 0 0 4px rgba(var(--accent-glow),.30), 0 0 8px 2px rgba(var(--accent-glow),.5);}
}
@keyframes todayPulseLight{
 0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.25);}
 50%{box-shadow:0 0 0 5px rgba(255,255,255,.4), 0 0 9px 2px rgba(255,255,255,.55);}
}
@media (prefers-reduced-motion: reduce){
 .chip.today::before,.chip.active.today::before{animation:none;}
}
.chip .todaytag{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
 margin-left:7px;opacity:.85;}
/* Liturgical season badge */
.season-badge{width:100%;max-width:var(--maxw);display:flex;justify-content:center;margin:-2px 0 12px;padding:0 4px;}
.season-badge span{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:600;
 letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
 background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 14px;}
.season-badge.ml span{font-family:'Noto Sans Malayalam',sans-serif;letter-spacing:.03em;text-transform:none;}
.season-badge .sdot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
 box-shadow:0 0 0 3px rgba(var(--accent-glow),.18);animation:todayPulse 2.6s ease-in-out infinite;}
/* ---------- Main card ---------- */
.card{
 width:100%;max-width:var(--maxw);background:var(--card);
 border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow);padding:22px 22px 26px;position:relative;overflow:hidden;
}
.card::before{
 content:"";position:absolute;inset:0 0 auto 0;height:4px;
 background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--gold-soft));
 opacity:.9;
}
.section-label{
 text-align:center;font-family:'Inter';font-weight:600;font-size:.68rem;
 letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;
}
.mystery-title{
 text-align:center;font-family:'Cormorant Garamond',serif;font-weight:600;
 font-size:1.5rem;color:var(--accent-deep);line-height:1.15;margin-bottom:2px;
}
.mystery-title.ml{font-size:1.25rem;line-height:1.35;}
.mystery-title:empty,.mystery-verse:empty{display:none;}
.mystery-verse{text-align:center;font-size:.74rem;color:var(--ink-soft);
 font-style:italic;margin-bottom:16px;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:14px 0 16px;}
/* Prayer */
.prayer-name{
 text-align:center;font-family:'Cormorant Garamond',serif;font-weight:600;
 font-size:1.15rem;letter-spacing:.3px;color:var(--gold);margin-bottom:10px;
}
.prayer-name.ml{font-family:'Noto Sans Malayalam';font-size:1rem;}
.prayer-text{
 font-family:'EB Garamond',serif;font-size:calc(1.24rem * var(--ps));line-height:1.8;
 text-align:center;color:var(--ink);max-height:clamp(150px,36vh,340px);overflow-y:auto;
 max-width:60rem;margin-left:auto;margin-right:auto;
 padding:2px 6px 6px;transition:opacity .28s ease;white-space:pre-line;
 scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent;
}
.prayer-text.ml{font-family:'Noto Sans Malayalam';font-size:calc(1.06rem * var(--ps));line-height:1.95;}
.prayer-text.fade{opacity:0;}
/* Two-part prayers: leader half in the normal ink, the response half in a gentle contrasting tone */
.prayer-text .p-resp{color:#52618a;}
body.dark .prayer-text .p-resp{color:#aeb8d6;}
.prayer-text::-webkit-scrollbar{width:5px;}
.prayer-text::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:5px;}
.meditation{
 margin-top:10px;max-width:60rem;margin-left:auto;margin-right:auto;padding:11px 14px;background:var(--bg);border-radius:14px;
 border:1px solid var(--line);font-size:calc(.9rem * var(--ps));line-height:1.8;color:var(--ink-soft);text-align:center;
}
/* Text-size control */
.fontctl{position:absolute;top:11px;right:12px;display:flex;gap:5px;z-index:3;}
.fontctl button{
 min-width:30px;height:30px;padding:0 7px;border-radius:9px;border:1px solid var(--line);
 background:var(--card);color:var(--ink-soft);font-family:'Cormorant Garamond',serif;font-weight:600;
 cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s;
}
.fontctl button:hover{border-color:var(--gold-soft);color:var(--accent);}
.fontctl button:active{transform:scale(.9);}
.fontctl button:disabled{opacity:.35;cursor:default;}
.fontctl .a-sm{font-size:.78rem;}
.fontctl .a-lg{font-size:1.08rem;}
.meditation.ml{font-family:'Noto Sans Malayalam';line-height:1.95;}
.meditation b{color:var(--accent);font-weight:600;}
/* Prominent meditation shown on the announce (Our Father) step */
.meditation-top{
 margin:0 auto 18px;max-width:60rem;padding:16px 18px;border-radius:16px;text-align:center;
 background:linear-gradient(180deg,#fbf3db,#f6ecd0);border:1px solid var(--gold-soft);
 box-shadow:0 6px 18px -12px rgba(198,154,58,.55);
 font-family:'EB Garamond',serif;font-size:calc(1.18rem * var(--ps));line-height:1.8;color:var(--accent-deep);
}
.meditation-top.ml{font-family:'Noto Sans Malayalam';font-size:calc(1.02rem * var(--ps));line-height:1.95;}
/* Beads */
.beads{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
 margin:20px 0 6px;min-height:18px;}
.bead{width:13px;height:13px;border-radius:50%;background:var(--bead);
 transition:transform .25s,background .25s,box-shadow .25s;}
.bead.done{background:var(--bead-done);}
.bead.active{background:var(--accent);animation:beadGlow 1.8s ease-in-out infinite;}
@keyframes beadGlow{
 0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-glow),.18);}
 50%{box-shadow:0 0 0 4px rgba(var(--accent-glow),.32), 0 0 8px 2px rgba(var(--accent-glow),.55);}
}
@media (prefers-reduced-motion: reduce){ .bead.active{animation:none;box-shadow:0 0 0 3px rgba(var(--accent-glow),.25);} }
.bead.big{width:13px;height:13px;background:var(--gold-soft);}
.bead.big.done{background:var(--gold);}
.bead.big.active{background:var(--accent);}
.counter-line{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:2px;font-weight:500;}
.counter-line b{color:var(--accent-deep);font-size:1.05rem;}
/* Controls, Next centered in the card, Back tucked to the left */
.controls{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;margin-top:22px;}
.btn-back{position:absolute;left:0;top:50%;transform:translateY(-50%);}
.btn-back{
 width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
 background:var(--card);color:var(--ink-soft);cursor:pointer;flex:none;
 display:flex;align-items:center;justify-content:center;
 transition:all .15s;
}
.btn-back:hover{border-color:var(--accent);color:var(--accent);}
.btn-back:active{transform:translateY(-50%) scale(.92);}
.btn-back svg{width:22px;height:22px;}
.btn-next{
 width:100%;max-width:min(300px, calc(100% - 140px));height:64px;border:none;border-radius:999px;cursor:pointer;
 background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
 color:#fff;font-family:'Inter';font-size:1.05rem;font-weight:600;letter-spacing:.02em;
 box-shadow:0 12px 26px -10px rgba(38,56,90,.65);
 display:flex;align-items:center;justify-content:center;gap:10px;
 transition:transform .12s,box-shadow .2s;position:relative;overflow:hidden;
}
.btn-next:hover{box-shadow:0 16px 32px -10px rgba(38,56,90,.75);}
.btn-next:active{transform:scale(.975);}
.btn-next .num{font-size:1.35rem;font-weight:600;}
.btn-next svg{width:20px;height:20px;}
.progress-wrap{margin-top:20px;}
.progress-track{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;width:0;border-radius:99px;
 background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .4s ease;}
.progress-meta{display:flex;justify-content:space-between;font-size:.72rem;
 color:var(--ink-soft);margin-top:7px;font-weight:500;}
/* Stats */
.stats{
 width:100%;max-width:var(--maxw);margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.stat{
 background:var(--card);border:1px solid var(--line);border-radius:16px;
 padding:14px 8px;text-align:center;
}
.stat .n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;color:var(--accent-deep);line-height:1;}
.stat .l{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
.reset-link{display:block;text-align:center;margin:14px auto 0;font-size:.72rem;
 color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:underline;opacity:.7;}
.reset-link:hover{opacity:1;}
/* Feedback */
.footer-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;}
.foot-link{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.75rem;
 color:var(--ink-soft);text-decoration:underline;opacity:.75;padding:2px;}
.foot-link:hover{opacity:1;color:var(--accent);}
.fb-overlay{position:fixed;inset:0;background:rgba(38,56,90,.42);backdrop-filter:blur(3px);
 display:none;align-items:center;justify-content:center;padding:20px;z-index:70;}
.fb-overlay.show{display:flex;}
.fb-modal{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:420px;
 width:100%;padding:24px 22px;box-shadow:var(--shadow);position:relative;text-align:center;}
.fb-modal h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--accent-deep);margin-bottom:6px;}
.fb-modal p{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin-bottom:14px;}
.fb-modal textarea,.fb-modal input[type=email]{width:100%;border:1px solid var(--line);border-radius:12px;
 padding:11px 13px;font-family:inherit;font-size:.92rem;margin-bottom:11px;resize:vertical;color:var(--ink);}
.fb-modal textarea:focus,.fb-modal input[type=email]:focus{outline:none;border-color:var(--gold-soft);}
.fb-modal.ml h2,.fb-modal.ml p,.fb-modal.ml textarea{font-family:'Noto Sans Malayalam',sans-serif;}
.fb-send{width:100%;height:48px;border:none;border-radius:12px;cursor:pointer;
 background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;
 font-family:inherit;font-size:.98rem;font-weight:600;transition:transform .12s;}
.fb-send:active{transform:scale(.98);}
.fb-x{position:absolute;top:11px;right:14px;background:none;border:none;font-size:1.5rem;
 color:var(--ink-soft);cursor:pointer;line-height:1;}
.fb-hp{position:absolute;left:-9999px;visibility:hidden;}
/* Hymns (big-screen lyrics for congregational singing) */
.hy-overlay{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:80;overflow-y:auto;}
.hy-overlay.show{display:flex;}
.hy-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:20px 22px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;z-index:2;
 box-shadow:0 6px 22px -12px rgba(18,24,45,.55);}
.hy-head h2{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:#fff;margin:0;display:flex;align-items:center;gap:11px;}
.hy-head h2 .cross{width:21px;height:21px;color:var(--gold);flex:none;}
.hy-head .hy-x{background:rgba(255,255,255,.16);border:none;width:34px;height:34px;border-radius:50%;color:#fff;
 font-size:1.25rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s;}
.hy-head .hy-x:hover{background:rgba(255,255,255,.3);}
.hy-body{flex:1;width:100%;max-width:720px;margin:0 auto;padding:26px 20px 54px;}
.hy-sub{text-align:center;color:var(--ink-soft);font-size:.98rem;margin-bottom:22px;font-style:italic;font-family:'EB Garamond',serif;}
.hy-list{display:flex;flex-direction:column;gap:11px;}
.hy-item{display:flex;align-items:center;gap:15px;text-align:left;background:var(--card);border:1px solid var(--line);
 border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;transition:.16s;width:100%;}
.hy-item:hover{border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(40,45,70,.4);}
.hy-ic{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(198,154,58,.15);
 display:flex;align-items:center;justify-content:center;}
.hy-ic svg{width:22px;height:22px;color:var(--gold);}
.hy-txt{flex:1;display:flex;flex-direction:column;}
.hy-item .t{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--accent-deep);font-weight:600;line-height:1.2;}
.hy-item.ml .t{font-family:'Noto Sans Malayalam',sans-serif;font-size:1.12rem;}
.hy-item.ta .t{font-family:'Noto Sans Tamil',sans-serif;font-size:1.12rem;}
.hy-item .play{font-size:.72rem;color:var(--accent);margin-top:4px;font-weight:600;letter-spacing:.04em;}
.hy-chev{width:18px;height:18px;color:var(--ink-soft);opacity:.4;flex:none;}
.hy-detail{display:none;text-align:center;}
.hy-detail.show{display:block;}
.hy-back{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
 border-radius:999px;padding:8px 18px;color:var(--accent);font-family:inherit;font-size:.85rem;font-weight:600;
 cursor:pointer;margin-bottom:28px;transition:.15s;}
.hy-back:hover{border-color:var(--accent);background:rgba(53,80,122,.06);}
.hy-title{font-family:'Cormorant Garamond',serif;font-size:calc(2.1rem * var(--ps));color:var(--gold-soft);
 margin-bottom:28px;font-weight:600;position:relative;padding-bottom:18px;}
.hy-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
 width:72px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.hy-lyrics{font-size:calc(1.5rem * var(--ps));line-height:1.8;color:var(--ink);white-space:pre-line;
 font-family:'EB Garamond',serif;max-width:640px;margin:0 auto;}
.hy-lyrics.ml{font-family:'Noto Sans Malayalam',sans-serif;line-height:1.95;}
.hy-lyrics.ta{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;}
.hy-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:42px;}
.hy-nav .wc-btn{min-width:64px;}
.hy-empty{text-align:center;color:var(--ink-soft);font-size:1rem;padding:52px 20px;line-height:1.7;font-family:'EB Garamond',serif;font-style:italic;}
/* Way of the Cross (stepper overlay) */
.wc-overlay{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:80;}
.wc-overlay.show{display:flex;}
.wc-head{flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;
 box-shadow:0 6px 22px -10px rgba(18,24,45,.5);position:relative;z-index:2;}
.wc-head-in{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;
 max-width:900px;margin:0 auto;width:100%;}
.wc-title-wrap{display:flex;align-items:center;gap:11px;font-family:'Cormorant Garamond',serif;
 font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);font-weight:600;letter-spacing:.01em;}
.wc-title-wrap .wc-cross{width:22px;height:22px;color:var(--gold);flex:none;}
#wcTitle.ml{font-family:'Noto Sans Malayalam',sans-serif;font-size:clamp(1.1rem,.95rem + .8vw,1.5rem);}
#wcTitle.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:clamp(1.1rem,.95rem + .8vw,1.5rem);}
.wc-x{background:rgba(255,255,255,.16);border:none;width:34px;height:34px;border-radius:50%;color:#fff;
 cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:none;
 transition:background .2s ease,transform .2s ease;}
.wc-x svg{width:15px;height:15px;display:block;}
.wc-x:hover{background:rgba(255,255,255,.34);transform:scale(1.12);}
.wc-x:active{transform:scale(.92);}
.wc-progress{height:3px;background:rgba(255,255,255,.16);width:100%;}
.wc-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--gold));
 width:0;transition:width .4s cubic-bezier(.4,0,.2,1);}
.wc-rail{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
 padding:11px 16px 13px;max-width:900px;margin:0 auto;width:100%;}
.wc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);border:none;padding:0;cursor:pointer;
 transition:.2s;flex:none;}
.wc-dot:hover{background:rgba(255,255,255,.6);transform:scale(1.25);}
.wc-dot.done{background:rgba(255,255,255,.55);}
.wc-dot.active{background:var(--gold);width:26px;border-radius:5px;box-shadow:0 0 0 3px rgba(198,154,58,.25);}
.wc-dot.edge{width:7px;height:7px;opacity:.85;}
/* scroll + reading body */
.wc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
.wc-body{max-width:min(760px,92vw);margin:0 auto;padding:30px 22px 46px;text-align:center;}
.wc-kicker{font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.wc-kicker.ml,.wc-kicker.ta{letter-spacing:.08em;}
.wc-kicker.ml{font-family:'Noto Sans Malayalam',sans-serif;}
.wc-kicker.ta{font-family:'Noto Sans Tamil',sans-serif;}
.wc-name{font-family:'Cormorant Garamond',serif;color:var(--accent-deep);font-weight:600;line-height:1.22;
 font-size:calc(clamp(1.7rem,1.4rem + 1.4vw,2.5rem) * var(--ps));margin:0 0 20px;position:relative;padding-bottom:20px;}
.wc-name::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
 width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
body.dark .wc-name{color:var(--accent);}
.wc-name.ml{font-family:'Noto Sans Malayalam',sans-serif;font-size:calc(clamp(1.25rem,1.05rem + 1vw,1.75rem) * var(--ps));line-height:1.4;font-weight:600;}
.wc-name.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:calc(clamp(1.25rem,1.05rem + 1vw,1.75rem) * var(--ps));line-height:1.4;font-weight:600;}
.wc-name.empty{display:none;}
.wc-parts{display:flex;flex-direction:column;gap:22px;align-items:stretch;}
.wc-part-label{font-family:'Inter',sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.18em;
 text-transform:uppercase;color:var(--gold);margin-bottom:9px;display:flex;align-items:center;justify-content:center;gap:7px;}
.wc-part-label.ml,.wc-part-label.ta{letter-spacing:.05em;text-transform:none;font-size:.9rem;}
.wc-part-label.ml{font-family:'Noto Sans Malayalam',sans-serif;}
.wc-part-label.ta{font-family:'Noto Sans Tamil',sans-serif;}
.wc-part-label svg{width:14px;height:14px;}
/* hymn / song block */
.wc-hymn{background:linear-gradient(180deg,rgba(198,154,58,.09),rgba(198,154,58,.03));
 border:1px solid rgba(198,154,58,.22);border-radius:16px;padding:14px 18px 15px;}
.wc-hymn .wc-lines{font-family:'EB Garamond',serif;font-style:italic;color:var(--ink-soft);
 font-size:calc(clamp(1.08rem,1rem + .55vw,1.44rem) * var(--ps));line-height:1.8;white-space:normal;}
.wc-hymn .wc-lines.ml{font-family:'Noto Sans Malayalam',sans-serif;font-style:normal;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
.wc-hymn .wc-lines.ta{font-family:'Noto Sans Tamil',sans-serif;font-style:normal;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
/* versicle (We adore you) */
.wc-verse{color:var(--accent);font-family:'EB Garamond',serif;font-weight:500;white-space:pre-line;
 font-size:calc(clamp(1.08rem,1rem + .55vw,1.44rem) * var(--ps));line-height:1.8;
 padding:2px 0;position:relative;}
body.dark .wc-verse{color:var(--accent);}
.wc-verse.ml{font-family:'Noto Sans Malayalam',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
.wc-verse.ta{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
/* meditation / prayer prose */
.wc-med,.wc-prayer,.wc-contrition{font-family:'EB Garamond',serif;color:var(--ink);white-space:pre-line;
 font-size:calc(clamp(1.08rem,1rem + .55vw,1.44rem) * var(--ps));line-height:1.8;text-align:left;}
.wc-med.ml,.wc-prayer.ml,.wc-contrition.ml{font-family:'Noto Sans Malayalam',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
.wc-med.ta,.wc-prayer.ta,.wc-contrition.ta{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
/* prayer note pill (1 Our Father / 1 Hail Mary) */
.wc-note{display:inline-flex;align-self:center;align-items:center;gap:8px;background:var(--card);
 border:1px solid rgba(198,154,58,.4);border-radius:999px;padding:9px 20px;color:var(--accent-deep);
 font-family:'Inter',sans-serif;font-weight:600;font-size:calc(.92rem * var(--ps));letter-spacing:.02em;}
body.dark .wc-note{color:var(--accent);}
.wc-note.ml{font-family:'Noto Sans Malayalam',sans-serif;}
.wc-note.ta{font-family:'Noto Sans Tamil',sans-serif;}
/* refrain */
.wc-refrain{white-space:pre-line;color:var(--ink-soft);font-family:'EB Garamond',serif;font-style:italic;
 font-size:calc(clamp(1.08rem,1rem + .55vw,1.44rem) * var(--ps));line-height:1.8;padding-top:20px;position:relative;}
.wc-refrain::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
 width:44px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.wc-refrain.ml,.wc-refrain.ta{font-style:normal;}
.wc-refrain.ml{font-family:'Noto Sans Malayalam',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
.wc-refrain.ta{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;font-size:calc(clamp(1.02rem,.94rem + .5vw,1.32rem) * var(--ps));}
/* soft divider between parts */
.wc-sep{width:100%;height:1px;background:var(--line);opacity:.6;}
/* bottom navigation */
.wc-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);
 border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(18,24,45,.4);
 max-width:900px;margin:0 auto;width:100%;}
.wc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
 border-radius:999px;padding:11px 20px;color:var(--accent);font-family:'Inter',sans-serif;font-weight:600;
 font-size:.95rem;cursor:pointer;transition:.15s;min-width:112px;justify-content:center;}
.wc-btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg2);transform:translateY(-1px);}
.wc-btn:disabled{opacity:.32;cursor:default;}
.wc-btn .wc-arrow{font-size:1.3rem;line-height:1;}
.wc-next,.wc-next:hover:not(:disabled),.wc-next:active{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;border-color:var(--accent-deep);}
.wc-next{box-shadow:0 6px 16px -8px var(--accent-deep);}
.wc-next:hover:not(:disabled){filter:brightness(1.08);}
.wc-count{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;color:var(--accent-deep);
 flex:none;letter-spacing:.03em;}
body.dark .wc-count{color:var(--accent);}
@media(max-width:520px){
 .wc-btn-lbl{display:none;}
 .wc-btn{min-width:52px;padding:11px 16px;}
 .wc-body{padding:24px 18px 40px;}
 .wc-rail{gap:6px;padding:9px 12px 11px;}
}
@media(min-width:1100px){
 .wc-body{max-width:820px;padding:44px 24px 60px;}
 .wc-parts{gap:28px;}
}
/* Beginner guide */
.guide-body{max-width:min(680px,92vw);margin:0 auto;padding:26px 22px 48px;text-align:center;}
.guide-intro{font-family:'EB Garamond',serif;font-size:calc(clamp(1.05rem,.98rem + .4vw,1.3rem) * var(--ps));line-height:1.7;color:var(--ink-soft);max-width:560px;margin:0 auto 20px;}
.guide-diagram{max-width:355px;margin:6px auto 28px;}
.guide-diagram svg{width:100%;height:auto;display:block;}
.guide-steps{list-style:none;text-align:left;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.guide-steps li{display:flex;gap:14px;align-items:flex-start;font-family:'EB Garamond',serif;color:var(--ink);font-size:calc(clamp(1.02rem,.96rem + .35vw,1.22rem) * var(--ps));line-height:1.6;}
.guide-steps li .gnum{flex:none;width:29px;height:29px;border-radius:50%;background:var(--blue-deep);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.guide-reassure{margin:30px auto 0;max-width:520px;font-family:'EB Garamond',serif;font-style:italic;color:var(--ink-soft);font-size:calc(1.08rem * var(--ps));line-height:1.6;}
.guide-begin{margin:26px auto 0;display:block;min-width:210px;height:56px;border:none;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 24px -10px var(--accent-deep);transition:.15s;}
.guide-begin:hover{filter:brightness(1.07);}
.guide-begin:active{transform:scale(.98);}
#guideTitle.ml{font-family:'Noto Sans Malayalam',sans-serif;font-size:clamp(1.05rem,.95rem + .8vw,1.45rem);}
#guideTitle.ta{font-family:'Noto Sans Tamil',sans-serif;font-size:clamp(1.05rem,.95rem + .8vw,1.45rem);}
.guide-intro.ml,.guide-reassure.ml,.guide-steps.ml li{font-family:'Noto Sans Malayalam',sans-serif;line-height:1.95;}
.guide-intro.ta,.guide-reassure.ta,.guide-steps.ta li{font-family:'Noto Sans Tamil',sans-serif;line-height:1.95;}
.guide-begin.ml{font-family:'Noto Sans Malayalam',sans-serif;}
.guide-begin.ta{font-family:'Noto Sans Tamil',sans-serif;}
/* Side menu (hamburger drawer) */
.menu-btn{background:var(--card);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;
 display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none;transition:.15s;}
.menu-btn:hover{border-color:var(--gold-soft);color:var(--accent);}
.menu-btn svg{width:20px;height:20px;}
.fs-btn{display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;
 align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none;transition:.15s;}
.fs-btn:hover{border-color:var(--gold-soft);color:var(--accent);}
.fs-btn svg{width:19px;height:19px;}
@media(min-width:1024px){ .fs-btn.on{display:flex;} }
.drawer-overlay{position:fixed;inset:0;background:rgba(28,40,66,.5);backdrop-filter:blur(4px);
 opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:85;}
.drawer-overlay.show{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;height:100%;width:314px;max-width:86%;background:var(--card);
 border-radius:24px 0 0 24px;box-shadow:-20px 0 55px -20px rgba(18,24,45,.6);transform:translateX(106%);
 transition:transform .34s cubic-bezier(.32,.72,0,1);z-index:86;display:flex;flex-direction:column;overflow:hidden;}
.drawer.show{transform:translateX(0);}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 22px;
 background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;}
.drawer-brand{display:flex;align-items:center;gap:11px;font-family:'Cormorant Garamond',serif;
 font-size:1.5rem;font-weight:600;}
.drawer-brand .cross{width:22px;height:22px;color:var(--gold);flex:none;}
.drawer-x{background:rgba(255,255,255,.16);border:none;width:32px;height:32px;border-radius:50%;color:#fff;
 font-size:1.25rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s;}
.drawer-x:hover{background:rgba(255,255,255,.3);}
.drawer-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
/* Custom language dropdown on the main page (works with a TV remote, unlike a native <select>) */
.lang-select{display:none !important;}
.lang-dd{position:relative;}
.lang-dd-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
 color:var(--ink);font-family:inherit;font-size:.8rem;font-weight:500;padding:8px 12px;border-radius:999px;cursor:pointer;transition:border-color .2s;}
.lang-dd-btn:hover{border-color:var(--gold-soft);}
.lang-dd-btn .chev{width:12px;height:12px;flex:none;color:var(--ink-soft);transition:transform .2s;}
.lang-dd.open .lang-dd-btn .chev{transform:rotate(180deg);}
.lang-dd-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:88;min-width:162px;background:var(--card);
 border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:none;flex-direction:column;gap:2px;}
.lang-dd.open .lang-dd-menu{display:flex;}
.lang-dd-opt{text-align:left;background:none;border:none;border-radius:10px;padding:11px 13px;font-family:inherit;
 font-size:.95rem;color:var(--ink);cursor:pointer;transition:.12s;white-space:nowrap;}
.lang-dd-opt:hover{background:var(--bg2);}
.lang-dd-opt.on{background:var(--accent);color:#fff;}
.lang-dd-opt[data-lang="ml"]{font-family:'Noto Sans Malayalam',sans-serif;}
.lang-dd-opt[data-lang="ta"]{font-family:'Noto Sans Tamil',sans-serif;}
html[lang="ml"] .lang-dd-btn{font-family:'Noto Sans Malayalam',sans-serif;}
html[lang="ta"] .lang-dd-btn{font-family:'Noto Sans Tamil',sans-serif;}
/* Clear focus ring so D-pad / remote users can see where they are on a TV */
button:focus-visible,.lang-dd-opt:focus-visible,.drawer-item:focus-visible,.chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.drawer-stats{flex:none;padding:10px 14px 6px;border-top:1px solid var(--line);}
.drawer-stats .stats{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.drawer-stats .stat{padding:9px 6px;}
.drawer-stats .stat .n{font-size:1.35rem;}
.drawer-stats .footer-note{width:100%;max-width:none;margin:10px 0 0;font-size:.66rem;line-height:1.5;opacity:.85;text-align:center;}
.drawer-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;
 border-radius:16px;padding:11px 12px;font-family:inherit;font-size:1.04rem;color:var(--ink);cursor:pointer;transition:.15s;}
.drawer-item:hover{background:rgba(53,80,122,.09);}
.di-ic{width:42px;height:42px;flex:none;border-radius:50%;background:rgba(198,154,58,.15);
 display:flex;align-items:center;justify-content:center;}
.di-ic svg{width:21px;height:21px;color:var(--gold);}
.drawer-item .di-label{flex:1;}
.di-chev{width:17px;height:17px;color:var(--ink-soft);opacity:.45;flex:none;}
.drawer-foot{text-align:center;padding:15px;font-size:.7rem;color:var(--ink-soft);letter-spacing:.08em;
 text-transform:uppercase;border-top:1px solid var(--line);}
body.dark .drawer-item:hover{background:rgba(255,255,255,.06);}
.drawer-sep{height:1px;background:var(--line);margin:8px 12px;}
/* Completion toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(260%);
 background:var(--accent-deep);color:#fff;padding:14px 24px;border-radius:999px;
 font-size:.92rem;font-weight:500;box-shadow:var(--shadow);z-index:60;
 transition:transform .5s cubic-bezier(.2,.9,.3,1.2);display:flex;align-items:center;gap:10px;}
.toast.show{transform:translateX(-50%) translateY(0);}
.footer-note{max-width:var(--maxw);text-align:center;font-size:.7rem;color:var(--ink-soft);
 margin-top:22px;line-height:1.6;opacity:.8;}
@media(max-width:420px){
 .brand h1{font-size:1.25rem;}
 .prayer-text{font-size:1.14rem;}
 .btn-next{height:60px;}
}

/* ---------- Responsive: use full real estate on larger screens ---------- */
@media(min-width:760px){ :root{ --maxw:700px; } }
@media(min-width:1000px){ :root{ --maxw:900px; } }
@media(min-width:1280px){ :root{ --maxw:min(1120px, 90vw); } }
@media(min-width:1600px){ :root{ --maxw:min(1360px, 88vw); } }
@media(min-width:2000px){ :root{ --maxw:min(1560px, 86vw); } }
/* On desktop, scale the touch targets and beads up to match the roomier column,
   and compact the vertical rhythm so the whole page tends to fit one screen.
   The page still scrolls normally if it needs to, so nothing is ever cut off. */
@media(min-width:1000px){
 .beads{gap:11px;margin:12px 0 4px;}
 .bead{width:14px;height:14px;}
 .bead.big{width:14px;height:14px;}
 .controls{min-height:58px;margin-top:14px;}
 .btn-next{height:58px;max-width:min(340px, calc(100% - 170px));font-size:1rem;}
 .btn-next svg{width:20px;height:20px;}
 .btn-back{width:52px;height:52px;}
 .btn-back svg{width:22px;height:22px;}
 .brand .cross{width:28px;height:28px;}
 .card{padding:18px 40px 20px;}
 header{padding:10px 4px 6px;}
 .mode-toggle{padding:8px 16px 4px;}
 .mysteries{padding:4px 16px 8px;}
 .season-badge{margin:-2px 0 8px;}
 .section-label{margin-bottom:2px;}
 .mystery-title{font-size:1.12rem;line-height:1.2;}
 .mystery-title.ml{font-size:1.06rem;}
 .mystery-title.ta{font-size:1.04rem;}
 .mystery-verse{font-size:.76rem;}
 .prayer-name{margin-bottom:1px;}
 .prayer-text{font-size:calc(1.0rem * var(--ps));line-height:1.55;padding-top:0;}
 .prayer-text.ml{font-size:calc(.9rem * var(--ps));line-height:1.7;}
 .prayer-text.ta{font-size:calc(.88rem * var(--ps));line-height:1.7;}
 .meditation-top{font-size:calc(.96rem * var(--ps));line-height:1.5;padding:10px 16px;margin:0 auto 8px;max-height:18vh;overflow-y:auto;}
 .meditation-top.ml,.meditation-top.ta{font-size:calc(.88rem * var(--ps));line-height:1.6;}
 .meditation{font-size:calc(.8rem * var(--ps));padding:8px 12px;margin-top:8px;}
 .progress-wrap{margin-top:12px;}
 .stats{margin-top:10px;}
 .stat{padding:8px 8px;}
 .stat .n{font-size:1.32rem;}
 .stat .l{margin-top:2px;font-size:.6rem;}
 .footer-note{margin-top:8px;font-size:.66rem;}
}
/* Very short desktop windows: trim a touch more so nothing needs scrolling */
@media(min-width:1000px) and (max-height:760px){
 .card{padding:12px 40px 12px;}
 .section-label{margin-bottom:1px;}
 .mystery-title{font-size:1.05rem;}
 .mystery-verse{font-size:.72rem;}
 .divider{margin:6px auto;}
 .meditation-top{max-height:60px;font-size:calc(.9rem*var(--ps));line-height:1.4;padding:8px 14px;margin:0 auto 6px;}
 .prayer-text{font-size:calc(.96rem*var(--ps));line-height:1.5;}
 .beads{margin:8px 0 2px;}
 .controls{margin-top:10px;min-height:50px;}
 .btn-next{height:50px;}
 .btn-back{width:48px;height:48px;}
 .progress-wrap{margin-top:8px;}
 .stats{margin-top:8px;}
 .stat{padding:6px 6px;}
 .stat .n{font-size:1.18rem;}
 .stat .l{font-size:.56rem;}
 .footer-note{margin-top:6px;}
}
/* ---- Mobile / tablet: compact the frame so the reading area has real height ---- */
@media(max-width:999px) and (min-height:560px){
 header{padding:8px 2px 6px;}
 .mode-toggle{padding:8px 14px 4px;}
 .mysteries{padding:4px 14px 8px;}
 .card{padding:16px 18px 16px;}
 .section-label{margin-bottom:2px;}
 .mystery-title{font-size:1.1rem;line-height:1.2;}
 .mystery-title.ml{font-size:1.04rem;}
 .mystery-title.ta{font-size:1.02rem;}
 .mystery-verse{font-size:.74rem;}
 .divider{margin:8px auto;}
 .meditation-top{font-size:calc(.92rem*var(--ps));line-height:1.45;padding:9px 12px;margin:0 auto 8px;max-height:20vh;overflow-y:auto;}
 .meditation-top.ml,.meditation-top.ta{font-size:calc(.86rem*var(--ps));line-height:1.6;}
 .prayer-text{font-size:calc(1.02rem*var(--ps));line-height:1.6;}
 .prayer-text.ml{font-size:calc(.92rem*var(--ps));line-height:1.75;}
 .prayer-text.ta{font-size:calc(.9rem*var(--ps));line-height:1.75;}
 .meditation{font-size:calc(.78rem*var(--ps));padding:7px 11px;margin-top:6px;}
 .beads{margin:10px 0 3px;}
 .counter-line{margin-top:1px;font-size:.78rem;}
 .controls{margin-top:12px;min-height:52px;}
 .btn-next{height:52px;font-size:1rem;}
 .btn-back{width:46px;height:46px;}
 .btn-back svg{width:20px;height:20px;}
 .progress-wrap{margin-top:10px;}
 .stats{margin-top:8px;}
 .stat{padding:7px 6px;}
 .stat .n{font-size:1.25rem;}
 .stat .l{font-size:.56rem;margin-top:2px;}
 .footer-note{margin-top:6px;font-size:.62rem;line-height:1.4;}
}
/* ---------- Fixed three-zone shell: top pinned, bottom pinned, prayer fills the middle.
   Only the prayer changes between steps, so the page never jumps. ---------- */
.read-zone{display:contents;}
/* Applies on phones, tablets and desktop alike (any screen tall enough to hold the
   frame); very short landscape screens fall back to normal scrolling so nothing clips. */
@media(min-height:560px){
 html,body{height:100vh;height:100dvh;}
 body{overflow:hidden;justify-content:flex-start;
  padding-top:max(6px,env(safe-area-inset-top));
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));}
 .shell-top{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;}
 .shell-bottom{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;}
 .card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
 /* The whole reading area scrolls as one unit and centres when it fits.
    The prayer keeps its natural size (never squeezed); the meditation boxes
    are capped so they can't crowd the prayer out on short screens. */
 .read-zone{flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;justify-content:safe center;
  scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent;}
 .read-zone>*{flex:none;}
 .read-zone .prayer-text{max-height:none;overflow:visible;}
 .read-zone .meditation-top{max-height:42%;overflow-y:auto;}
 .read-zone .meditation{max-height:38%;overflow-y:auto;}
}
/* ---------- Immersive full-screen: focus on the prayer only ---------- */
body.immersive{padding:0;overflow:hidden;}
body.immersive .shell-top,
body.immersive .shell-bottom,
body.immersive .announce,
body.immersive .resume,
body.immersive .fontctl,
body.immersive .mystery-verse,
body.immersive .divider,
body.immersive .meditation-top,
body.immersive .meditation,
body.immersive .beads,
body.immersive .counter-line{display:none !important;}
/* Small context line at the top: which section / mystery you are praying */
body.immersive .section-label{
 display:block;flex:none;text-align:center;margin:0 0 4px;
 color:var(--gold);font-family:'Inter';font-weight:600;font-size:.74rem;
 letter-spacing:.2em;text-transform:uppercase;opacity:.9;
}
body.immersive .mystery-title{
 display:block;flex:none;text-align:center;margin:0 0 4px;color:var(--ink-soft);
 font-family:'Cormorant Garamond',serif;font-weight:600;
 font-size:clamp(1rem,.7rem + .9vw,1.45rem);line-height:1.2;letter-spacing:.01em;
}
body.immersive .mystery-title.ml,body.immersive .mystery-title.ta{font-family:inherit;}
body.immersive .mystery-title:empty{display:none !important;}
body.immersive .card{
 max-width:min(1200px,88vw);width:100%;
 background:transparent;border:none;box-shadow:none;
 height:100vh;height:100dvh;padding:4vh 0 3vh;
 display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;overflow:hidden;
}
body.immersive .card::before{display:none;}
body.immersive .prayer-name{
 flex:none;text-align:center;margin:0 0 10px;color:var(--gold);
 font-family:'Cormorant Garamond',serif;font-weight:600;
 font-size:clamp(1.1rem,.7rem+1vw,1.6rem);letter-spacing:.02em;
}
body.immersive .prayer-name.ml,body.immersive .prayer-name.ta{font-family:inherit;}
/* The read-zone fills the middle and stays vertically centred; it scrolls only if a
   prayer is genuinely too long, so the text can never overlap the buttons below. */
body.immersive .read-zone{
 flex:1 1 auto;min-height:0;overflow-y:auto;
 display:flex;flex-direction:column;justify-content:safe center;
}
body.immersive .prayer-text{
 max-height:none;overflow:visible;
 font-size:clamp(1.6rem,1.05rem + 2vw,3rem);line-height:1.5;
 margin:0 auto;max-width:min(1000px,86vw);padding:2px 8px;
}
body.immersive .prayer-text.ml{font-size:clamp(1.35rem,.9rem + 1.6vw,2.6rem);line-height:1.7;}
body.immersive .prayer-text.ta{font-size:clamp(1.3rem,.9rem + 1.5vw,2.5rem);line-height:1.7;}
body.immersive .controls{flex:none;margin-top:24px;min-height:auto;}
body.immersive .btn-next{height:68px;max-width:min(360px, calc(100% - 200px));}
body.immersive .progress-wrap{flex:none;margin:22px auto 0;max-width:min(820px,80vw);width:100%;}
body.immersive .progress-meta{font-size:.82rem;}
/* ---------- Full-screen focus mode: hide the top nav, enlarge type for big screens / projectors ---------- */
.fs-exit{display:none;}
body.fsmode .shell-top{display:none !important;}
body.fsmode .fs-exit{display:flex;position:fixed;z-index:95;
 top:max(12px,env(safe-area-inset-top));left:16px;
 width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--ink);
 align-items:center;justify-content:center;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s,color .2s;}
body.fsmode .fs-exit:hover{opacity:1;border-color:var(--gold-soft);color:var(--accent);}
body.fsmode .fs-exit svg{width:20px;height:20px;}
body.fsmode .card{padding-top:30px;}
body.fsmode .section-label{font-size:.85rem;}
body.fsmode .mystery-title{font-size:clamp(1.35rem,1rem + 1.1vw,2.1rem);}
body.fsmode .mystery-verse{font-size:.98rem;}
body.fsmode .prayer-name{font-size:clamp(1.35rem,1rem + 1vw,2rem);}
body.fsmode .prayer-text{font-size:clamp(1.5rem,1rem + 1.6vw,2.6rem);line-height:1.6;}
body.fsmode .prayer-text.ml{font-size:clamp(1.3rem,.9rem + 1.3vw,2.2rem);line-height:1.75;}
body.fsmode .prayer-text.ta{font-size:clamp(1.25rem,.9rem + 1.25vw,2.1rem);line-height:1.75;}
body.fsmode .meditation-top{font-size:clamp(1.1rem,.8rem + .85vw,1.6rem);line-height:1.6;}
body.fsmode .meditation{font-size:clamp(1rem,.8rem + .6vw,1.35rem);}
body.fsmode .counter-line{font-size:1.02rem;}
body.fsmode .counter-line b{font-size:1.3rem;}
body.fsmode .beads{gap:14px;margin:18px 0 6px;}
body.fsmode .bead,body.fsmode .bead.big{width:18px;height:18px;}
body.fsmode .btn-next{height:76px;font-size:1.2rem;max-width:min(440px,calc(100% - 220px));}
body.fsmode #nextLabel{font-size:1.2rem;}
body.fsmode .btn-back{width:66px;height:66px;}
body.fsmode .btn-back svg{width:26px;height:26px;}
body.fsmode .progress-meta{font-size:.98rem;}