/* Players (task M5.2): what LgVideo and LgAudio add to the design's .video, .seek and .play. Not synced from the
   design reference (lg.css is); keep it small and scoped to .lg-player. */
.lg-app .lg-player{display:flex; flex-direction:column; gap:12px}
.lg-app .lg-player .video{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; background-size:cover; background-position:center}
.lg-app .lg-player .video video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:transparent}
.lg-app .lg-player.audio-only .video video{opacity:0}
.lg-app .lg-player .video .play{z-index:3}
.lg-app .lg-player.playing .video .play{opacity:0; pointer-events:none}
.lg-app .lg-player.playing .video{cursor:pointer}
/* The watermark: light, never in the way of a tap, moved every little while by lg-player.js. */
.lg-app .lg-wm{position:absolute; z-index:2; top:12%; left:8%; color:#fff; opacity:.28; font-size:13px; font-weight:800;
  letter-spacing:.14em; direction:ltr; pointer-events:none; user-select:none; text-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:top 1.2s ease, left 1.2s ease}
.lg-app .lg-player .seek{cursor:pointer; touch-action:none}
.lg-app .lg-player .seek:focus-visible{outline:3px solid var(--b); outline-offset:3px}
@media (prefers-reduced-motion: reduce){.lg-app .lg-wm{transition:none}}