@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Manrope:wght@300;400;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body { width: 100vw; height: 100vh; overflow: hidden; font-family: 'Manrope', sans-serif; background-color: transparent; }

/* Title card */
.overlay-container { position: absolute; bottom: 10vh; left: 5vw; transform-origin: bottom left; opacity: 0; transition: opacity 0.8s ease, transform 0.3s ease; }
.overlay-container.visible { opacity: 1; animation: fadeIn 1.2s ease-out; }
.overlay-container.hidden { opacity: 0; }

.sermon-title-box { background: linear-gradient(135deg, #040e60 0%, #030e69 50%, #0e3162 100%); border-left: 8px solid #D4AF37; padding: 35px 50px; min-width: 800px; max-width: 1200px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); border-radius: 0 12px 12px 0; position: relative; overflow: hidden; display: flex; align-items: center; }
.glow-effect { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%); opacity: 0; pointer-events: none; }
.sermon-content { display: flex; flex-direction: column; flex-grow: 1; }
.sermon-label-container { display: flex; align-items: center; margin-bottom: 12px; transition: opacity 0.5s ease, height 0.5s ease, margin 0.5s ease; }
.bible-icon { width: 40px; height: 40px; margin-right: 15px; fill: #D3D3D3; stroke: #D4AF37; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bible-icon path:nth-child(n+3) { stroke: white; stroke-width: 1.5; }

.sermon-label, .scripture-only-label { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 32px; color: #D3D3D3; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); white-space: nowrap; }
.scripture-only-label { margin-bottom: 15px; transition: opacity 0.5s ease, height 0.5s ease, margin 0.5s ease; }

.sermon-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 72px; color: #FFFFFF; line-height: 1.2; margin-bottom: 15px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); transition: opacity 0.5s ease, height 0.5s ease, margin 0.5s ease; overflow-wrap: break-word; text-wrap: balance; }
.sermon-subtitle { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 42px; color: #D4B464; font-style: italic; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: opacity 0.5s ease, height 0.5s ease, margin 0.5s ease; }
.hidden-text { opacity: 0; height: 0; overflow: hidden; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

@keyframes fadeIn { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes glowPulse { 0% { left: -100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 200%; opacity: 0; } }

:root { --panel-base-w: 440px; --panel-scale-factor: 1; }

/* Operator control panel: every font-size, padding, gap, and touch target below is
   calc()'d against --panel-scale-factor, which the Panel Size slider writes to
   document.documentElement. One number drives the whole panel's scale. */
#controlPanel { position: fixed; top: 15px; right: 15px; padding: calc(20px * var(--panel-scale-factor)); background: rgba(26, 58, 95, 0.97); color: white; border-radius: 10px; border-right: 5px solid #D4AF37; z-index: 100; display: flex; flex-direction: column; gap: calc(16px * var(--panel-scale-factor)); width: calc(var(--panel-base-w) * var(--panel-scale-factor)); min-width: 340px; max-width: calc(100vw - 30px); height: auto; max-height: calc(100vh - 30px); overflow-y: auto; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; transform: translateX(0); }
#controlPanel.hidden { transform: translateX(calc(100% + 25px)); opacity: 0; pointer-events: none; }
#controlPanel h3 { margin-bottom: 10px; padding-right: 40px; font-family: 'Cinzel', serif; color: #D4AF37; font-size: calc(22px * var(--panel-scale-factor)); text-align: center; }
#closePanelButton { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #e0e0e0; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
#closePanelButton:hover { background: rgba(255, 255, 255, 0.2); }
#shortcutsList { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 15px; margin-top: 5px; }
#shortcutsList h4 { font-family: 'Manrope', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #D4B464; margin-bottom: 10px; }
#shortcutsList dl { display: grid; grid-template-columns: auto 1fr; gap: calc(6px * var(--panel-scale-factor)) calc(12px * var(--panel-scale-factor)); font-size: calc(13px * var(--panel-scale-factor)); }
#shortcutsList dt { font-weight: 700; color: #D4AF37; white-space: nowrap; }
#shortcutsList dd { color: #c0c0c0; }
#controlPanel label { display: block; margin-bottom: 8px; font-weight: 600; font-size: calc(15px * var(--panel-scale-factor)); color: #e0e0e0; }
#controlPanel input[type="text"] { width: 100%; padding: calc(11px * var(--panel-scale-factor)); border: 1px solid #777; border-radius: 5px; background: #ffffff; color: #1A3A5F; margin-bottom: 10px; font-family: 'Manrope', sans-serif; font-size: calc(16px * var(--panel-scale-factor)); min-height: calc(44px * var(--panel-scale-factor)); }
#controlPanel input[type="text"]::placeholder { color: #999; }
#controlPanel button { padding: calc(12px * var(--panel-scale-factor)) calc(14px * var(--panel-scale-factor)); min-height: calc(44px * var(--panel-scale-factor)); border: none; background: #D4AF37; color: #1A3A5F; cursor: pointer; border-radius: 5px; font-weight: 700; font-size: calc(14px * var(--panel-scale-factor)); line-height: 1.2; white-space: normal; transition: background 0.2s ease, transform 0.1s ease; text-transform: uppercase; letter-spacing: 0.5px; touch-action: manipulation; }
#controlPanel button:hover { background: #E5C158; }
#controlPanel button:active { transform: translateY(1px); }
#controlPanel .button-row { display: flex; flex-wrap: wrap; gap: calc(10px * var(--panel-scale-factor)); }
#controlPanel .button-row button { flex: 1 1 auto; min-width: 120px; }

/* The toggle button is now completely removed from view */
#toggleControlPanel { display: none; }

.preset-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--panel-scale-factor)); margin-top: 10px; }
.preset-buttons button { padding: calc(10px * var(--panel-scale-factor)); min-height: calc(44px * var(--panel-scale-factor)); font-size: calc(12.5px * var(--panel-scale-factor)); text-align: center; white-space: normal; line-height: 1.2; }
.font-controls { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14px * var(--panel-scale-factor)); align-items: center; padding: 10px 0; }
.font-controls label { font-size: calc(13px * var(--panel-scale-factor)); margin-bottom: 5px; text-align: center; }
.font-controls input[type="range"], .scale-control input[type="range"] { width: 100%; min-height: calc(44px * var(--panel-scale-factor)); cursor: pointer; touch-action: manipulation; }
.font-size-display { font-size: calc(14px * var(--panel-scale-factor)); color: #D4B464; text-align: center; font-weight: 600; }
.scale-control { padding: 10px 0; text-align: center; }
.scale-control label { display: block; font-size: calc(13px * var(--panel-scale-factor)); margin-bottom: 5px; }
.checkbox-container { display: flex; align-items: center; margin-top: -10px; margin-bottom: 10px; gap: 10px; padding: 8px 0; }
.checkbox-container input[type="checkbox"] { width: calc(24px * var(--panel-scale-factor)); height: calc(24px * var(--panel-scale-factor)); accent-color: #D4AF37; touch-action: manipulation; }
.checkbox-container label { margin-bottom: 0; font-weight: 500; font-size: calc(15px * var(--panel-scale-factor)); color: #e0e0e0; cursor: pointer; }