.vpp-player { position: absolute; inset: 0; background: #000; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vpp-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vpp-player-msg { display: grid; place-items: center; padding: 24px; text-align: center; color: #ddd; }

/* Watermark: @handle · 07•• ••• 678, moves every few seconds */
.vpp-wm { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; font: 700 clamp(11px, 1.6vw, 15px)/1 system-ui, sans-serif;
	color: rgba(255, 255, 255, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); transform: rotate(-8deg); transition: left 1.2s ease, top 1.2s ease; letter-spacing: .02em; }

.vpp-bar { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 6px; align-items: center; }
.vpp-quality { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .55); }
.vpp-quality button { border: 0; background: none; color: #ddd; font: 700 12px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.vpp-quality button.is-active { background: #fff; color: #000; }
.vpp-fs { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }

/* Full screen that keeps the watermark (also the iPhone fallback) */
.vpp-player:fullscreen, .vpp-player:-webkit-full-screen { width: 100%; height: 100%; }
.vpp-player.is-theatre { position: fixed; inset: 0; z-index: 100000; width: 100vw; height: 100vh; height: 100dvh; }
html.vpp-noscroll, html.vpp-noscroll body { overflow: hidden; }

.vpp-ended { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; text-align: center; background: rgba(0, 0, 0, .85); color: #fff; font: 600 16px/1.4 system-ui, sans-serif; }
.vpp-ended[hidden] { display: none; }

.vpp-admin-player { position: relative; aspect-ratio: 16 / 9; max-width: 640px; margin-bottom: 12px; border-radius: 8px; overflow: hidden; }

.vpp-report { margin-top: 4px; font-size: 14px; color: var(--muted, #9a9aab); }
.vpp-report summary { cursor: pointer; display: inline-block; text-decoration: underline; }
.vpp-report form { margin-top: 10px; padding: 14px; max-width: 460px; border: 1px solid var(--border, #2a2a36); border-radius: 14px; background: var(--surface, #15151c); }
.vpp-report label { display: block; margin: 8px 0 4px; font-weight: 600; }
.vpp-report select, .vpp-report textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #2a2a36); background: var(--bg, #0b0b0f); color: var(--text, #f2f2f5); font: inherit; }
.vpp-report .btn { margin-top: 10px; }
.vpp-report-msg { margin: 10px 0 0; color: var(--text, #f2f2f5); }

.vpp-load-error { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #fff; background: rgba(0, 0, 0, .78); }
.vpp-load-error p { margin: 0; max-width: 320px; }
.vpp-load-error button { border: 0; border-radius: 999px; padding: 10px 22px; font: inherit; font-weight: 700; color: #fff; background: var(--accent, #ff2d6f); cursor: pointer; }