html,body { height:100%; margin:0; background:#000; overflow:hidden; }
/* html,body { height:100%; margin:0; background:#000; overflow:hidden; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; pointer-events: none; } */

.container { width: 100%; height: 100%; position: relative; }
.container iframe { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; }
.container iframe.preload { opacity: 0; }

.container iframe.active { opacity: 1; }
.container iframe.inactive { opacity: 0; }
.countdown { position: fixed; top: 20px; right: 40px; background: rgba(0,0,0,0.7); color: white; padding: 8px 16px; border-radius: 20px; font-family: sans-serif; font-size: 25px; z-index: 100; }

body.img { display: flex; justify-content: center; align-items: center; }
body.img img { max-width: 100%; height: auto; filter: blur(20px); opacity: 0.3; transition: filter 0.8s ease, opacity 0.8s ease; }
body.img img.loaded { filter: blur(0); opacity: 1; }

body.vimeo { opacity: 0; }
body.vimeo .video { width: 100%; height: 100%; }
body.vimeo iframe { width: 100%; height: 100%; border: none; }

body.video { opacity: 0; }
body.video video { width: 100%; height: 100%; }

body.youtube { opacity: 0; }
body.embed iframe { width: 100%; height: 100%; border: 0; }
body.link iframe { width: 100%; height: 100%; border: 0; }

/* PDF html */
body.pdf { display: flex;justify-content: center; }

body.link embed { width: 100%; height: 100%; border: 0; }

.error { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.error .content { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); text-align: center; max-width: 400px; width: 90%; }
.error .message { color: #333; font-size: 16px; margin-bottom: 20px; line-height: 1.5; }

.loading { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 99999; background: #000; font-size: 20px; font-family: sans-serif; display: none; }
.loading.show { display: flex !important; }
.spinner { width: 100px; height: 100px; border: 6px solid red; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }