:root { --bar-h: 64px; --bar-pad: 10px; --reserved-bottom: 0px; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: #fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans"; overflow: hidden; }

/* Scena (iOS: 100dvh), opcjonalne tło z configu */
#stage { position: relative; height: 100dvh; min-height: 100vh; width: 100vw; overflow: hidden; background: #000 center / cover no-repeat; display: grid; place-items: center; padding-bottom: var(--reserved-bottom); }

#subtitleImg { max-width: 100vw; max-height: calc(100dvh - var(--bar-h) - var(--bar-pad) - env(safe-area-inset-bottom) - var(--reserved-bottom)); object-fit: contain; display: block; transition: opacity 160ms ease; opacity: 0; }

/* Overlay */
#startOverlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.8); color: #fff; }
#startOverlay[hidden] { display: none; }
.overlay-inner { text-align: center; padding: 24px; }
.overlay-title { margin: 0 0 8px 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
.overlay-subtitle { opacity: .85; margin: 0 0 16px 0; font-size: clamp(14px, 2vw, 18px); }
#fsHint { margin-top: 4px; opacity: .55; font-size: 12px; }

/* Pasek sterowania */
#controls { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h); width: 100vw; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: grid; grid-template-columns: max-content minmax(0,1fr) max-content max-content; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px; border-top: 1px solid rgba(255,255,255,0.1); overflow: hidden; will-change: transform, opacity; z-index: 1000; }

/* W fullscreenie trzymaj pasek wewnątrz sceny */
body.is-fullscreen #controls { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }

/* W fullscreen obraz może zajmować pełną wysokość */
body.is-fullscreen #subtitleImg, body.fakefs #subtitleImg { max-height: 100dvh; }

/* Auto-hide tylko w fullscreen */
body.is-fullscreen #controls.autohide { opacity: 0; transform: translateY(100%); pointer-events: none; transition: transform 200ms ease, opacity 200ms ease; }
body.is-fullscreen #controls.autohide.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.btn { appearance: none; border: 0; outline: 0; cursor: pointer; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; background: #1c1c1c; color: #fff; font-weight: 600; }
.btn:hover { background: #242424; }
#progress { width: 100%; min-width: 0; }
.time { font-variant-numeric: tabular-nums; opacity: 0.8; min-width: 45px; text-align: right; }

audio { display: none; }

/* Mobile: panel widoczny, fullscreen ukryty */
@media (hover: none) and (pointer: coarse) {
  #fullscreenBtn { display: none !important; }
  #controls { display: grid !important; }
  :root { --bar-h: 56px; --reserved-bottom: 0px; }
  #fsHint { display: none !important; }
}

/* Krajobraz na mobile – dodatkowy bufor na dół */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root { --reserved-bottom: 96px; }
}

/* Bardzo niska wysokość */
@media (max-height: 560px) {
  #subtitleImg { max-height: calc(100dvh - var(--bar-h) - var(--bar-pad) - env(safe-area-inset-bottom)); }
}
/* Ikonowy przycisk play/pause */
.btn-icon { display: inline-grid; place-items: center; padding: 0 12px; }
.btn-icon img { width: 24px; height: 24px; display: block; pointer-events: none; }
@media (hover: none) and (pointer: coarse) {
  .btn-icon img { width: 28px; height: 28px; }
}