/* Fullscreen black background, centered text */
html,body{height:100%;margin:0}
body{background:#000;color:#fff;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-font-smoothing:antialiased}
/* Video fills viewport but preserves aspect ratio (shrink to fit) */
video{position:fixed;inset:0;margin:auto;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:2}
.center-text{font-size:clamp(24px,6vw,64px);text-align:center;padding:1rem}
.hidden{display:none}

/* final message style */
#final .center-text{background:transparent;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.6)}

/* Play button overlay for touch/autoplay fallback */
.play-button{background:rgba(0,0,0,0.55);z-index:3}
.play-button > div{display:flex;flex-direction:column;align-items:center;gap:10px}
.play-circle{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.18)}
.play-circle:after{content:"";display:inline-block;margin-left:3px;width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.play-label{font-size:16px;opacity:0.95}

/* Ensure overlays don't block system gestures on mobile */
.overlay{touch-action:manipulation}

@media (min-width:800px){
	.play-circle{width:100px;height:100px}
	.play-label{font-size:18px}
}