#battleTranslation{background:#183451;color:#fff;border:1px solid #5d7e9b;border-radius:12px;padding:7px 5px;max-width:86px;font:700 12px system-ui}
.heroLogo{display:block;width:auto;max-width:min(75vw,330px);height:clamp(170px,28dvh,270px);max-height:none;object-fit:contain;margin-inline:auto;flex-shrink:0;filter:drop-shadow(0 0 13px #1d9dff4f)}
#menu.hero{gap:13px!important}
#menu.hero>p{margin:0;max-width:370px}
#menu.hero .bigbtn{padding:12px 18px}
#menu.hero .small{max-width:370px}
/* Let the expanded home menu scroll instead of centering content beyond the screen edges. */
#menu.hero{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;justify-content:safe center!important;padding-top:24px!important;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)!important}
#menu.hero>*{flex-shrink:0}
@media(max-height:800px){#menu.hero{justify-content:flex-start!important;gap:10px!important}#menu.hero h1{font-size:clamp(44px,12vw,76px)}#menu.hero .bigbtn{padding-block:10px}.heroLogo{height:clamp(155px,25dvh,230px)}}
#themeToggle{min-width:37px}
.arena.shield-active{box-shadow:inset 0 0 22px 7px #82d4ff,inset 0 0 70px 20px #e6cb7b66;outline:3px solid #e9d18b;outline-offset:-3px}
.verseShareActions{display:flex;gap:10px;justify-content:center;margin:12px 0}
.verseShareActions button{flex:1;max-width:180px;background:#254b72;border:1px solid #7298bc;color:#fff;padding:11px}
body.light-mode .verseShareActions button{background:#d6e9fa;color:#173957}
.savedMenuButton{font-size:14px!important;padding:11px 16px!important}
.savedMoments{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#051323ed;z-index:110;padding:calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px)}
.savedMoments.open{display:flex}
.savedMomentsPanel{width:min(650px,100%);max-height:100%;overflow:auto;background:#142d49;color:#f3f7ff;padding:20px;border-radius:18px;border:1px solid #698bac;box-shadow:0 20px 70px #0008}
.savedMomentsPanel h2{color:#ebd18b;margin:12px 0 5px}
.savedMomentsPanel>p{color:#bdd2e8;font-size:14px}
.savedClose{float:right}
.savedMomentsList{display:grid;gap:12px}
.savedMomentCard{border:1px solid #4b6d8d;border-radius:14px;background:#0b2037;padding:13px}
.savedMomentCard h3{color:#ebd18b;margin:0 0 8px}
.savedMomentCard p{font:17px/1.55 Georgia,serif;white-space:pre-wrap;margin:7px 0}
.savedMomentCard small{color:#a8c5e1}
.savedMomentActions{display:flex;gap:7px;margin-top:10px}
.savedMomentActions button{flex:1;padding:9px 6px}
body.light-mode .savedMoments{background:#d7e5f4ed}
body.light-mode .savedMomentsPanel{background:#f8fcff;color:#17344e;border-color:#a3bbd2}
body.light-mode .savedMomentsPanel h2,body.light-mode .savedMomentCard h3{color:#8c640d}
body.light-mode .savedMomentsPanel>p,body.light-mode .savedMomentCard small{color:#496a88}
body.light-mode .savedMomentCard{background:#ecf5ff;border-color:#a5bed5}
/* Electric blue + gold REBUKE! identity; cool silver-blue in light mode. */
body:not(.light-mode){--gold:#f4d379;--border:#486da0;--muted:#b0cce8}
body:not(.light-mode) .app{background:radial-gradient(ellipse at 51% 34%,#154a8e 0%,#0b2b5a 42%,#06142e 85%)}
body:not(.light-mode) header{background:linear-gradient(100deg,#07152d,#103568)}
body:not(.light-mode) .hero{background:radial-gradient(ellipse at 50% 23%,#1356a04d,transparent 75%)}
body:not(.light-mode) .resourceLinks{background:#091e40}
body:not(.light-mode) .bigbtn{background:linear-gradient(120deg,#25568f,#386fb2);border-color:#87bee9;color:#fff;box-shadow:0 0 17px #2696e429}
body:not(.light-mode) .bigbtn.subtle{background:linear-gradient(120deg,#122d55,#1b467c)}
body:not(.light-mode) .modal{background:linear-gradient(#153966,#071b39);border-color:#729dd0}
body:not(.light-mode) .reader{background:linear-gradient(#16416d,#0c264a)}
body.light-mode .app{background:radial-gradient(ellipse at 50% 36%,#fff 0%,#e3f3ff 54%,#cfe7fa 100%)}
body.light-mode .hero{background:radial-gradient(ellipse at 50% 22%,#bfe5ff7d,transparent 70%)}
body.light-mode .heroLogo{filter:drop-shadow(0 5px 20px #2c8ada40)}
body.light-mode .bigbtn{background:linear-gradient(115deg,#d9ebfa,#b8d9f5);border-color:#86b6de;color:#173e62;box-shadow:0 2px 13px #4884b022}
body.light-mode .reader{background:linear-gradient(#fff,#e4f2ff)}
body.light-mode .modal{background:linear-gradient(#fff,#dfedfb)}
@media(max-width:400px){.topline{gap:4px;padding-inline:7px}.topline .pill{padding:6px 7px}.topline button{padding:8px}.actions{gap:4px}.actions button{padding:7px!important}}
body.light-mode{color-scheme:light;--bg:#eaf2fb;--ink:#182e48;--muted:#56708a;--gold:#8d610b;--border:#a1b5cb;background:#eaf2fb}
body.light-mode .app{background:radial-gradient(ellipse at 50% 40%,#fff,#dceaf8 85%)}
body.light-mode header{background:#edf5fd;border-color:#cad9e9}
body.light-mode button{background:#d8e7f7;color:#163452;border-color:#8ba9c5}
body.light-mode .brand{color:#9c700f}
body.light-mode .hero{background:radial-gradient(circle,#f3f9ff,transparent 70%)}
body.light-mode .hero h1{color:#a37715;text-shadow:0 1px #e6d49d,0 0 18px #fff}
body.light-mode .hero .motto{color:#8b6010;text-shadow:none}
body.light-mode .hero p{color:#375775}
body.light-mode .bigbtn{background:linear-gradient(120deg,#c6dcf1,#accce9);color:#142e48}
body.light-mode .resourceLinks{background:#e5f0fb;border-color:#cbdbed}
body.light-mode .resourceLinks a{background:#d4e5f7;color:#183f61;border-color:#9ab8d5}
body.light-mode .resourceLinks a:last-child{color:#146382}
body.light-mode .topline .pill{background:#fff;color:#213f5d;border-color:#99b2cc}
body.light-mode #battleTranslation{background:#fff;color:#1b3d59;border-color:#99b2cc}
body.light-mode .arena{background:radial-gradient(ellipse at 50% 80%,#a4c8e64d,transparent 72%)}
body.light-mode .gamehud{color:#153451;text-shadow:0 1px 2px #fff}
body.light-mode .modal{background:linear-gradient(#fff,#e5f1fc);color:#21364b;border-color:#8eafca;box-shadow:0 20px 70px #25435d44}
body.light-mode .overlay{background:#25415da8}
body.light-mode .reader{background:linear-gradient(#f9fcff,#e5f1fc);border-color:#9fbad3}
body.light-mode .readerref{color:#436482}
body.light-mode .readerfooter{background:#e0edf9;border-color:#bbcee0}
body.light-mode .feedtools select,body.light-mode .feedtools button{background:#fff;color:#153a59;border-color:#9ab4cc}
body.light-mode .footnote{color:#5a7693}
body.light-mode .settings{background:#f3f9ff;color:#213a54;border-color:#a2bbd3}
body.light-mode .settings [role="status"],body.light-mode .settings label{color:#213a54!important}
body.light-mode .prayerLibrary{background:#dae9f3f2!important}
body.light-mode .prayerPanel{background:#f7fbff!important;color:#203a54!important;border-color:#94adc6!important}
body.light-mode .prayerPanel h2{color:#9a6d10!important}
body.light-mode .prayerCaption{color:#58728c!important}
/* Hope Scroll brand navigation: white in both appearance modes. */
header .actions .hopeScrollNav,body.light-mode header .actions .hopeScrollNav{
  display:flex;align-items:center;justify-content:center;flex:0 0 36px;
  box-sizing:border-box;width:36px;height:36px;padding:3px;
  background:#fff!important;border:1px solid #d1e0ed;border-radius:11px;
  box-shadow:0 1px 3px #081b2b20;text-decoration:none;
}
header .actions .hopeScrollNav img{display:block;width:28px;height:28px;object-fit:contain}
header .actions .hopeScrollNav:focus-visible{outline:3px solid #009cff;outline-offset:2px}
@media(max-width:420px){header{padding-inline:8px!important;gap:4px!important}.actions{gap:4px!important}.actions button{padding:6px 7px!important}.brand{font-size:clamp(15px,4.5vw,20px)}.small{font-size:clamp(9px,2.5vw,12px)}}