:root{font-family:Arial,sans-serif;color:#183f35;background:#faf8ef}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:14px 20px;background:#17634e;color:white;font-weight:700;min-height:44px}button:disabled{cursor:default;opacity:.58}button:focus-visible,a:focus-visible{outline:3px solid #ce8b27;outline-offset:3px}header{max-width:1300px;margin:auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}header img{width:180px}a{color:#17634e}main{max-width:1280px;margin:auto;padding:15px 28px 40px}#welcome{max-width:920px;margin:20px auto}h1{font:clamp(38px,6vw,70px)/1.06 Georgia,serif;margin:16px 0}h2{font:clamp(25px,3vw,40px)/1.1 Georgia,serif;margin:8px 0 15px}h3{font-size:20px;line-height:1.35}p{line-height:1.65}.lead{font-size:24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold}.welcome-art{width:100%;max-height:290px;object-fit:cover;border-radius:22px}.secondary{display:inline-block;padding:15px}.story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:12px;letter-spacing:1px}.story-top button{font-size:13px}.story-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}.scene-wrap{position:relative;overflow:hidden;border-radius:22px;background:#bed8be;aspect-ratio:5/4}.scene-wrap>img{width:100%;height:100%;object-fit:cover}.scene-label{position:absolute;top:18px;left:18px;font-size:10px;font-weight:bold;letter-spacing:2px;background:#f8f2d8df;padding:8px;border-radius:20px}.hotspot{position:absolute;transform:translate(-50%,-50%);max-width:31%;background:#fff4ca;color:#153e34;border:2px solid #d6a84e;box-shadow:0 5px 20px #153e3440;font-size:13px;line-height:1.3;padding:12px}.hotspot.found{background:#d1e9cc;border-color:#468262}.reading{background:white;padding:24px;border:1px solid #d8e2d1;border-radius:20px}.reading>p{font-size:16px}#discovery:not(:empty),#feedback:not(:empty){padding:15px;border-left:4px solid #d9b75c;background:#f4f4e3;margin-top:18px;line-height:1.6}#answers{display:grid;gap:8px}#answers button{background:#f0f4eb;color:#183f35;text-align:left;border:1px solid #ccdac3;font-weight:500}#answers .correct{background:#d6ebd0;border-color:#579565;opacity:1}#direction{font-size:13px;color:#52695f}#next{width:100%}#chapter-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:30px 0}.chapter-button{text-align:left;background:#e9efdf;color:#183f35}details{line-height:1.6;border-top:1px solid #d7ddcc;padding:20px 0}summary{cursor:pointer;font-weight:bold}#save-note{font-size:12px;color:#53675d}[hidden]{display:none!important}
body.sb-fit[data-screen-game=gospel]{overflow:hidden}body.sb-fit[data-screen-game=gospel] header,body.sb-fit[data-screen-game=gospel] #save-note{display:none}body.sb-fit[data-screen-game=gospel] main{position:fixed;top:calc(var(--sb-top,0px) + var(--sb-bar,44px));height:calc(var(--sb-height,100dvh) - var(--sb-bar,44px));width:100%;max-width:none;padding:10px;overflow:hidden}body.sb-fit #story-play{height:100%;display:flex;flex-direction:column}body.sb-fit .story-top{flex:none;margin-bottom:8px}body.sb-fit .story-layout{flex:1;min-height:0;gap:12px}body.sb-fit .scene-wrap{height:100%;aspect-ratio:auto}body.sb-fit .reading{height:100%;overflow:auto;overscroll-behavior:contain;padding:18px}body.sb-fit .reading>p{margin:10px 0}body.sb-fit #next{position:sticky;bottom:0;box-shadow:0 -6px 14px white}@media(max-width:680px){header{padding:14px}header img{width:140px}header>a:last-child{font-size:12px}main{padding:12px}.story-layout{grid-template-columns:1fr}.scene-wrap{aspect-ratio:5/3}#chapter-list{grid-template-columns:1fr}body.sb-fit .story-layout{grid-template-columns:1fr;grid-template-rows:32% minmax(0,1fr)}body.sb-fit .hotspot{font-size:11px;padding:9px 6px;min-height:44px}body.sb-fit .scene-label{font-size:8px;top:5px;left:8px;padding:4px}body.sb-fit h2{font-size:26px}.story-top{letter-spacing:0}.story-top button{padding:10px}body.sb-fit .scene-wrap{border-radius:12px}}@media(max-height:500px) and (orientation:landscape){body.sb-fit .story-layout{grid-template-columns:42% 1fr;grid-template-rows:1fr}body.sb-fit .reading{padding:12px}body.sb-fit .hotspot{font-size:11px;padding:9px 5px}body.sb-fit h2{font-size:25px}}